React class life cycle methods to useEffect
source link: https://dev.to/codegino/react-class-life-cycle-methods-to-useeffect-1kg0
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to map a React class life cycle methods/hooks to useEffect
Common class lifecycle methods
// happens as soon as your component is mounted
componentDidMount() {}
// happens as soon as the updating begin
componentDidUpdate(prevProps, prevState, snapshot) {}
// for certain performance optimizations
shouldComponentUpdate(nextProps, nextState) {}
// happens just before the component unmounts
componentWillUnmount() {}
}
How can we map those lifecycle hooks to useEffect?
Here are basic templates to convert a class lifecycle method to a useEffect hook:
componentDidMount
Create an empty dependency array and pass it to the useEffect
hook.
useEffect(() => {
// code to run when the component is mounted
// Make sure this is empty to ensure hook will only run once
}, [])
shouldComponentUpdate
Add the dependency array and pass it to the useEffect
hook.
// props: {name}
// state: {visible}
useEffect(() => {
// ... code to run
// the dependency array below is "equivalent" to:
// the effect will trigger if
// props.name !== nextProps.name || state.enabled !== nextState.enabled
}, [name, visible])
componentWillUnmount
A useEffect
can return a function which its body will be executed when the component is unmounted.
useEffect(() => {
return () => {
// code to run when the component is unmounted
}
}, /* with or without dependency array */)
componentDidUpdate
This is a bit subjective because it's up to the developer to decide how componentDidUpdate
should behave (the simplest is the same as componentDidMount
mapping).
It could also be a combination of componentDidMount
and shouldComponentUpdate
mapping with the addition
of a reference variable to check if the component has been mounted as shown below:
const hasMount = useRef(false)
useEffect(() => {
if (hasMount.current) {
// code to run when the component is updated
} else {
hasMount.current = true
}
}, /* dependencies */)`
Additional Note
- You can only define one of each lifecycle method in a
class
component. When using hooks you can define as manyuseEffect
as you want. - You can only use
useEffect
in afunction
component
Conclusion
The examples above are simple ways to map a class lifecycle hooks
component to a React hooks
, and there are many other ways to do it.
The good news is that you don't need to think of mapping lifecycle hooks to useEffect since React hooks introduced a
different paradigm on how we can create a React component and how we can mange side-effects.
This mapping is only useful when I'm refactoring a class
component to be a function
component.
For newer projects, I ought to think that class component does not exists.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK