Skip to content

Commit c9efe0c

Browse files
committed
frontend: fix usemounted hook in react 18 mode
Regression introduced in d120245 In webdev, this caused useLoad hook to always return undefined which broke various components. Issues appeared with syncheaders on account summary (never ended), some settings did not load (that depend on useLoad) or the skip for testing was missing on the waiting view. > React 18 introduces a new development-only check to Strict Mode. > This new check will automatically unmount and remount every > component, whenever a component mounts for the first time, > restoring the previous state on the second mount. https://react.dev/blog/2022/03/29/react-v18#new-strict-mode-behaviors This explains why useLoad broke, as it cleaned up after first unmount and after that the mounted ref was undefined.
1 parent 8166783 commit c9efe0c

File tree

1 file changed

+13
-11
lines changed

1 file changed

+13
-11
lines changed

frontends/web/src/hooks/mount.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,21 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { useRef, useEffect } from 'react';
17+
import { useEffect, useRef } from 'react';
1818

1919
/**
20-
* useMountedRef returns a `react.Ref` with `ref.current` boolean defining if
21-
* the component is actually mounted.
20+
* useMounted returns a boolean which is true if the component is actually mounted.
2221
*/
23-
2422
export const useMountedRef = () => {
25-
const mounted = useRef(true);
26-
useEffect(() => (
27-
() => {
28-
mounted.current = false;
29-
}
30-
), []);
31-
return mounted;
23+
const isMountedRef = useRef(false);
24+
25+
useEffect(() => {
26+
isMountedRef.current = true;
27+
28+
return () => {
29+
isMountedRef.current = false;
30+
};
31+
}, []);
32+
33+
return isMountedRef;
3234
};

0 commit comments

Comments
 (0)