Update hook descriptions
This commit is contained in:
@ -3,16 +3,20 @@ title: useComponentWillUnmount
|
||||
tags: hooks,effect,beginner
|
||||
---
|
||||
|
||||
A hook that executes a callback immediately before a component is unmounted and destroyed.
|
||||
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.
|
||||
- Use `useEffect()` with an empty array as the second argument and return the provided callback to be executed only once before cleanup.
|
||||
- Behaves like the `componentWillUnmount()` lifecycle method of class components.
|
||||
|
||||
```jsx
|
||||
const useComponentWillUnmount = onUnmountHandler => {
|
||||
React.useEffect(() => () => {
|
||||
onUnmountHandler()
|
||||
}, []);
|
||||
}
|
||||
React.useEffect(
|
||||
() => () => {
|
||||
onUnmountHandler();
|
||||
},
|
||||
[]
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
```jsx
|
||||
@ -20,7 +24,7 @@ const Unmounter = () => {
|
||||
useComponentWillUnmount(() => console.log('Component will unmount'));
|
||||
|
||||
return <div>Check the console!</div>;
|
||||
}
|
||||
};
|
||||
|
||||
ReactDOM.render(<Unmounter />, document.getElementById('root'));
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user