According to this,react behaves like the following with Strict Mode...
- React renders the component.
- React mounts the component
- Layout effect setup code runs.
- Effect setup code runs.
- React simulates the component being hidden or unmounted.
- Layout effect cleanup code runs
- Effect cleanup code runs
- React simulates the component being shown again or remounted.
- Layout effect setup code runs
- Effect setup code runs
However, I have a function like this...
const [ac, setAC] = useState(new AbortController())
useEffect(() => {
return () => ac.abort();
}, [ac]
This cleanup function is called every time when Strict Mode is enabled, but I wanna make it run as it behaves without Strict Mode (but I wanna keep Strict Mode).
Are there any good ways to do it?
I tried something like that
// Use a Ref to hold the value, but initialize it in an effect.
const ref = useRef(null);
useEffect(() => {
// Initialize an imperative API inside of the same effect that destroys it.
// This way it will be recreated if the component gets remounted.
const someImperativeThing = ref.current = new SomeImperativeThing();
return () => {
someImperativeThing.destroy();
};
}, []);
const handeThing = (event) => {
const someImperativeThing = ref.current;
// Now we can call methods on the imperative API...
};
But it doesnt work as I expected...