DEV Community

Replace lifecycle with hooks in React

Trent Yang on January 06, 2019

If you have ever used React, you should be familiar with power of React lifecycles. The upcoming React hooks are about to change the way we handl...

Read full post

Alexander Kim • Mar 2 '20

If you use useEffect with empty deps array, ESLint would throw an error, that you have to add all dependencies, or omit deps array at all. So, it's not a replacement for componentdidmount lifecycle. What do you use yourself, when you need to do something, only when your component is mounted?

svgpubs • Jul 20 '20

I created an account just to like your comment. I am stuck because my useEffect hook relies on local state. Since I need to add local state in the dependency array for the function to work, I cannot use it as a stand-in for componentDidUnmount.

Where is the onUnmount hook?

Arnab Sen • Mar 16 '21

Take a look at this thread once: github.com/facebook/react/issues/1... Might be helpful

Taha Hassan Mujaddadi • May 8 '20

That's problem of ESlint. You can easily change the rule by the way.

Alexander Kim • May 8 '20

Of course you can, but it's not recommended.

Taha Hassan Mujaddadi • Nov 18 '19

Thank you for the article. Although I really like Hooks but the life cycle methods in Classes, properly explains what their use is for. Such as componentDidMount. With hooks by using above technique, it doesn't explain much since there are just small differences between them.

DjLeChuck • Jul 10 '19

I just created an account to thank you! Nice sheatcheet to have! :)

En • Oct 20 '20

So how exactly can you perform an action once the component is mounted in the functional component if it needs a reference to dependencies. Say I have to reference a dispatch method

useEffect(() => {
dispatch({
type: "COMPONENT_INITIALIZED",
payload: { },
});
}, [dispatch]);

I get COMPONENT_INITIALIZED on every render because dispatch is different.