useEffect Clean-Up Function Executes After Component is Removed

This behavior has changes in React version 17.0.x.

Clean-up function should execute when the component unmounts, and I've noticed in React v.17 by the time cleanup function executes, React referenced elements are no longer available.

Working example with React v.16
Example with React v.17

Notice unmountSuccessful logs before divRef in React v.17 example.

This is the only relevant change I noticed from the changelog.

If the behavior of useEffect clean-up has changed it should be reflected on the docs.

Code Snippet:

const App = () => {
  const divRef = React.useRef(null);
  
  React.useEffect(() => {
    console.log('divRef ::', divRef.current)
    return function cleanUp() {
      console.log('[cleanUp] divRef ::', divRef.current)
    }
  }, [])
  return (
    <div ref={divRef}>
      Open Browser's Console For Output
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

const unmountApp = () => {
  console.log('unmounting root...')
  const node = document.getElementById('root');
  const unmountSuccessful = ReactDOM.unmountComponentAtNode(node);
  console.log('unmountSuccessful ::', unmountSuccessful)
};

window.setTimeout(unmountApp, 1500);

Commencez par la documentation de React useEffect liée dans l’issue et comparez sa formulation concernant le nettoyage avec le comportement de React 17 montré dans les deux exemples CodePen. Lisez la pull request du changelog liée concernant le changement pertinent. C’est terminé lorsque la documentation explique précisément quand le nettoyage s’exécute et si les éléments référencés restent disponibles.