Prevent unmount in Strict Mode of React18

Viewed 43

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...

0 Answers
Related