A hook that executes a callback immediately before a component is unmounted and destroyed.

  • Use React.useEffect() with an empty array as the second argument and return the provided callback to be executed only once before cleanup.

代码实现

const useComponentWillUnmount = onUnmountHandler => {
  React.useEffect(() => () => {
    onUnmountHandler()
  }, []);
}

使用样例

const Unmounter = () => {
  useComponentWillUnmount(() => console.log('Component will unmount'));

  return <div>Check the console!</div>;
}

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