Bug: useLayoutEffect callback called twice when a dom node is in a dependency array

React version: v16.3.1

Steps To Reproduce

1. add useLayoutEffect
2. add dom node to the deps array
3. invoke setState inside useLayoutEffect callback

Link to code example: https://codepen.io/everdimension/pen/rNOpZGK

The current behavior

useLayoutEffect callback gets called a second time, although the values in the deps array have not changed

The expected behavior

useLayoutEffect callback should not get called unless values in the dependency array change

[vkurchatkin]

@bvaughn

If you have to clean up when your DOM node changes, you have two options. First is to use effects, which means that you HAVE to put the node in state:

React.useLayoutEffect(() => {
  if (!domNode) {
     return;
  } 
  const resizeObserver = new ResizeObserver(...);
  ...
  return () => {
     resizeObserver.disconnect();
  }
}, [domNode])

The second is to do it manually:

  const cleanupRef = React.useRef();
  const ref = React.useCallback(domNode => {
    if (cleanupRef.current) {
      cleanupRef.current();
    }

    cleanupRef.current = undefined;

   if (!domNode) {
     return;
   }
     const resizeObserver = new ResizeObserver(...);

     cleanupRef.current =  () => {
        resizeObserver.disconnect();
     };
  }, []);

React.useEffect(() => {
  return () => {
     if (cleanupRef.current) {
      cleanupRef.current();
    }
  };
}, [])

While you can certainly use the second option, and even wrap it in some sort of hook, I would rather just go with the first one.

[vkurchatkin]

The idea is to create a reusable hook which doesn’t create a ref object, but accepts a ref

There is no feasible way to detect when such a ref changes. But IMO this is fine. When a hook accepts a DOM ref it is a clear signal to the user, that this ref should not change until the component is unmounted and they should structure their code accordingly.