Bug: useEffect hook, dom ref is null in unmount callback.

[itutto]

DOM element references created with useRef are not null-ed by the time useEffect cleanup callback is called.

React version:

17
The same code works as expected in React below v17

Steps To Reproduce

1. Create a functional component with a simple div returned and referenced with a useRef hook.
2. Add a useEffect hook and try to access the dom element on unmount.

note:
I understand that a local variable is the ideal solution for storing references inside useEffect, however this behaviour of null-ing DOM element references by the time the unmount phase runs is new to React 17.

Link to code example:
https://codesandbox.io/s/interesting-water-n8c48?file=/src/App.js

The current behavior

Inside useEffect cleanup: The ref.current value is null

The expected behavior

Inside useEffect cleanup: The ref.current value should still point to the DOM element as the component has not unmounted yet.

[vkurchatkin]

This is documented here: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing

[itutto]

This is documented here: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing

All clear, thanks!