Menu
How to use componentWillUpdate in functional component by react hooks ?
502
You can create the same effect of componentWillUpdate using the combination of refs and effect hooks. Docs says componentWillUpdate,is called every time when update,occurs.It is not called on initial render. Now using useRef hook,the returend object is persited in the complete life time of the application.
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes — they let you use React without classes. (We don't recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.)
How to use componentWillUnmount with react hooks? For this task, we will useEffect hook provided by React JS and call our subscription for event or API inside useEffect and do the cleanup of that particular task inside useEffect hook itself.
As mentioned earlier, the lifecycle methods are very useful in react application development. Even though they are not available in functional components, we can achieve the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount using the useEffect() hook.
You can create the same effect of componentWillUpdate using the combination of refs and effect hooks.
Docs says componentWillUpdate,is called every time when update,occurs.It is not called on initial render.
Now using useRef hook,the returend object is persited in the complete life time of the application.
const isFirstRender = React.useRef(true);
React.useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
/*business logic for component did update*/
});If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
