@atom-learning/components 8.0.2 → 8.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,8 +8,12 @@ var useCallbackRef = () => {
|
|
|
8
8
|
};
|
|
9
9
|
var useCallbackRefState = () => {
|
|
10
10
|
const [elRef, setElRef] = React$1.useState(null);
|
|
11
|
+
const hasElement = React$1.useRef(false);
|
|
11
12
|
return [elRef, React$1.useCallback((el) => {
|
|
12
|
-
if (el
|
|
13
|
+
if (el && !hasElement.current) {
|
|
14
|
+
hasElement.current = true;
|
|
15
|
+
setElRef(el);
|
|
16
|
+
}
|
|
13
17
|
}, [])];
|
|
14
18
|
};
|
|
15
19
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCallbackRef.js","names":[],"sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n React.MutableRefObject<HTMLElement | null>,\n (HTMLElement) => void\n] = () => {\n const elRef = React.useRef<HTMLElement | null>(null)\n\n const setElRefCallback = React.useCallback((el) => {\n if (el) elRef.current = el\n }, [])\n\n return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n HTMLElement | null,\n (HTMLElement) => void\n] = () => {\n const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n\n const setElRefCallback = React.useCallback((el) => {\n
|
|
1
|
+
{"version":3,"file":"useCallbackRef.js","names":[],"sources":["../../../src/utilities/hooks/useCallbackRef.ts"],"sourcesContent":["import * as React from 'react'\n\nexport const useCallbackRef: () => [\n React.MutableRefObject<HTMLElement | null>,\n (HTMLElement) => void\n] = () => {\n const elRef = React.useRef<HTMLElement | null>(null)\n\n const setElRefCallback = React.useCallback((el) => {\n if (el) elRef.current = el\n }, [])\n\n return [elRef, setElRefCallback]\n}\n\nexport const useCallbackRefState: () => [\n HTMLElement | null,\n (HTMLElement) => void\n] = () => {\n const [elRef, setElRef] = React.useState<HTMLElement | null>(null)\n const hasElement = React.useRef(false)\n\n const setElRefCallback = React.useCallback((el) => {\n // Commit the attached node to state exactly once — the first time one\n // becomes available — and never again. Under React 19 concurrent rendering\n // with heavy CPU contention, renders get interrupted and re-run, so the DOM\n // node attached via the callback ref churns: React commits and replaces the\n // node, firing this callback with a fresh identity each time. The previous\n // `prev === el ? prev : el` guard couldn't catch that — a new identity is\n // never `=== prev` — so every churn scheduled another render, which churned\n // the node again: an unbounded \"Maximum update depth exceeded\" loop.\n //\n // A one-shot setState makes the returned element reference stable and the\n // loop structurally impossible (later invocations are no-ops). All consumers\n // attach this to a single, always-mounted element, so the first node is the\n // node — there is no element swap to miss.\n if (el && !hasElement.current) {\n hasElement.current = true\n setElRef(el)\n }\n }, [])\n\n return [elRef, setElRefCallback]\n}\n"],"mappings":";;AAEA,IAAa,uBAGH;CACR,MAAM,QAAQ,QAAM,OAA2B,KAAK;AAMpD,QAAO,CAAC,OAJiB,QAAM,aAAa,OAAO;AACjD,MAAI,GAAI,OAAM,UAAU;IACvB,EAAE,CAAC,CAE0B;;AAGlC,IAAa,4BAGH;CACR,MAAM,CAAC,OAAO,YAAY,QAAM,SAA6B,KAAK;CAClE,MAAM,aAAa,QAAM,OAAO,MAAM;AAsBtC,QAAO,CAAC,OApBiB,QAAM,aAAa,OAAO;AAcjD,MAAI,MAAM,CAAC,WAAW,SAAS;AAC7B,cAAW,UAAU;AACrB,YAAS,GAAG;;IAEb,EAAE,CAAC,CAE0B"}
|