refs in memoized elements

[pomber]

Describe the bug

Using useRef and useMemo together produces weird results.

It's easier to explain with code:

function Counter() {
  const [count, setCount] = useState(0);
  const inc = () => setCount(count + 1);

  const ref = useRef(null);
  const element = useMemo(() => <div ref={ref}>hey</div>, []);

  useEffect(() => {
    console.log(ref.current);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={inc}>Increment</button>
      <div key={count}>{element}</div>
    </div>
  );
}

The console.log logs null half of the times. I think ref.current should never be null.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/jovial-bouman-1d0yik?file=/components/counter.js
2. Open codesandbox console
3. Click on Increment button
4. See null logged half of the time

Expected behavior

ref.current shouldn't be null. If I remove the useMemo it works as expected.

React works as expected: https://codesandbox.io/s/condescending-gagarin-o29rj6?file=/src/App.js

[JoviDeCroock]

Thank you for the awesome reproduction, after looking at this I can confirm this is an issue on our side.

It seems related to keyed elements. Basically we see the key difference and rather than discarding the entire subtree we still reuse the oldVNodeChildren which does a short-circuit for element as that vnode is referentially equal. Basically we re-parent the element while unmounting the old parent div

[pomber]

That's funny because I added the key to simplify the example. My real use case doesn't use keys, it unmounts the element, then mounts another tree, and later re-mounts the element.

So, maybe there are two issues. I'll wait until the one you are mentioning is fixed, and try again. Thanks.