Bug: React 18 Strict mode does not simulate unsetting and re-setting DOM refs

[JMartinCollins]

React version: 18.1.0

Steps To Reproduce

1. Use <React.StrictMode>
2. Set a ref to a JSX element in a component
3. Create a useLayoutEffect/useEffect in the component where the returned cleanup function console logs the ref
4. Save and refresh the app
5. You should have access to the ref element in the the useLayoutEffect/useEffect cleanup function during the simulated unmount.

Link to code example: https://codesandbox.io/s/proud-snow-ox4ngx?file=/src/App.js

The current behavior

Does not unset/re-set refs in simulated unmount. This could lead to unexpected bugs in development like having double-set event listeners, i.e.if( ref.current ){ //add eventlistener to it }and might not match the behavior of actually unmounting the DOM node as described in the docs: https://reactjs.org/docs/strict-mode.html

On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.

The expected behavior

In normal unmounts and mounts refs are unset(before layout effects are cleaned up) and set(before layout effects).

[gaearon]

Thanks, will check with the team.

[Razzwan]

I confirm. In my case, this causes a nasty bug. Everything related refs that worked in version 17 just stopped working in version 18 without any error messages. I definitely can't use React.StrictMode right now.

Moreover, during the first installation using create-react-app, a person will not be able to use any library that uses the refs functionality, thinking that the library does not work. My suggestion is to remove React.StrictMode from default create-react-app set up until the bug is fixed.

[JMartinCollins]

According to this post:

Whether a component gets hidden or unmounted, refs that are attached to host components (like HTML elements) will be cleaned up and re-initialized the same as they are today during unmount/remount.

Refs that store use-managed values won't be reset when a component is hidden though. They allow things to be persisted for the case where a component is hidden and later shown again.

It makes sense to keep the user-managed values around as they are part of the component state that will be restored, however refs to DOM elements maybe should not be set?

[gaearon]

a person will not be able to use any library that uses the refs functionality, thinking that the library does not work

I may be missing something but this statement sounds massively overblown. There are lots of libraries using refs that work fine with React 18. While the issue discussed here might be legit (we're discussing that), can you share what kind of code you have that doesn't work? Specific examples are most helpful.

[JMartinCollins]

sandbox link

Also something to consider is that the current effect cleanup order is different between simulated(bubble) and standard(capture) unmounts.

[huynhit24]

in React 18 every time I render the component mount, the callback runs twice, I don't know what to do?

[gaearon]

@huynhit24 That's intentional behavior in Strict Mode and unrelated to this thread. Please refer to https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors.

[dmitryKochergin]

Hi! Any updates for this?

While the issue discussed here might be legit (we're discussing that), can you share what kind of code you have that doesn't work?

For example, useChangeEffect hook, quite commonly used, I guess.
Initial implementation was based on the fact, that after mount ref always has initial value, but now it isn't true:
https://codesandbox.io/s/dry-grass-0uyhx4

Basically, it was like axiom - refs always have initial values after mount.
Now the axiom is broken.

Of course, for this particular case you can use cleanup function to set isMounted ref back to false, but if you want to implement useChangeEffect with cleanup functions provided by user, you need to use two useEffects instead of one - one for setting isMount ref (without deps), and the other for actual effect with deps.
Something like this:

const useChangeEffect = (effect, deps) => {
  const isMounted = useRef(false);
  
  useEffect(() => {
    if (isMounted.current) return effect();
    
    isMounted.current = true;
  }, deps);

  useEffect(() => {
    isMounted.current = true;
    
    return () => {
      isMounted.current = false;
    };
  }, []);
};

And now we have to use two effects instead of one for implementing the same functionality, just because of artefact of dev mode. That's kind of strange to me.

[gaearon]

Initial implementation was based on the fact, that after mount ref always has initial value, but now it isn't true:

I think you're confusing the issue in this thread (<div ref=...> not getting "detached" during simulated cleanup) with something different. I'm not sure what behavior you want exactly, but I suggest to file a separate issue about that. More generally, I'd say Hooks like useChangeEffect are not a good idea, but it's hard to say more without actually seeing what you're using it for. Regardless, it's off-topic for this thread.

[dmitryKochergin]

I'm not sure, but it looked like these cases have the same reason.
Because at the moment all refs are not getting "detached" during simulated unmount.
I was going to create a separated issue, but found this one.

Anyway, thank you for the answer! I'll create a separated issue, then.