Неочевидности реакта

react-fails.md

Хуки и componentWillUnmount

С первого взгляда аналог componentWillUnmount очень прост:

function useWrongUnmount(f) {
  useEffect(() => () => f(), [])
}

Если вы гляните на всякие react-awesome, то увидите, что всякие библиотеки хуков используют именно эту имплементацию:

• https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n
• https://github.com/streamich/react-use/blob/master/src/useUnmount.ts
• https://bit.dev/giladshoham/react-hooks/use/use-unmount/~code

Но это неверная имплементация. Очень простой тест проверяет это

const [state, setState] = useState('')

useWrongUnmount(() => console.log(state))

В итоге в замыкание к useWrongUnmount попадёт только начальное значение state.

Верная реализация будет выглядеть так:

function useUnmount(f) {
  const fWrapper = React.useRef(f)
  if (fWrapper.current != f) {
    fWrapper.current = f
  }
  React.useEffect(() => () => fWrapper.current(), []) 
}