React：关于使用 ref 和 useLayoutEffect 来确定组件是挂载还是卸载的问题

Question

I have a component like this

function App() {
  const mounted = useRef()
  useLayoutEffect(() => {
    mounted.current = true
    return () => {
      console.log('unmounted') // this does not get called when I unmount the component
      mounted.current = false
    }
  }, [])

  if (mounted.current) {
    console.log('mounted')
  }
  return (
    <div>
      {/* this hello world div doesn't get rendered on the screen👇, I thought useLayoutEffect would be called before browser paints screen */}
      {mounted.current && <div>hello world</div>}
    </div>
  )
}

I know that useEffect serves the purpose too. I used useLayoutEffect is because it runs a bit earlier than useEffect . According to this https://github.com/donavon/hook-flow hook flow diagram.

My question is:

1. After I unmount the component, I don't see console.log('unmounted') gets run
2. I was expecting <div>hello world</div> to get rendered on the screen after I refresh the page since I the useLayoutEffect callback would run before browser paints the screen by that time when it paints the screen, the ref is set to true by the callback.

Answer 1

I was expecting hello world to get rendered on the screen after I refresh the page since I the useLayoutEffect callback would run before browser paints the screen by that time when it paints the screen, the ref is set to true by the callback.

Although useLayoutEffect runs more quickly than useEffect , it's still asynchronous . It's similar to the difference between setTimeout(fn, 0) and setTimeout(fn, 60) . The useLayoutEffect callback will not run until after the functional component has returned, but it will run before the user can see the new element.

So, since mounted.current is false the first time the component renders, and since no state changes occur, it doesn't re-render, and hello world doesn't appear.

After I unmount the component, I don't see console.log('unmounted') gets run

Works fine here, I see it:

 function App() { const mounted = React.useRef() React.useLayoutEffect(() => { mounted.current = true return () => { console.log('unmounted') // this does not get called when I unmount the component mounted.current = false } }, []) if (mounted.current) { console.log('mounted') } return ( <div> {/* this hello world div doesn't get rendered on the screen👇, I thought useLayoutEffect would be called before browser paints screen */} {mounted.current && <div>hello world</div>} </div> ) } const Outer = () => { const [show, setShow] = React.useState(true); React.useEffect(() => { setTimeout(() => { setShow(false); }, 2000); }, []); return ( show ? <App /> : null ); }; ReactDOM.render(<Outer />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>