React: Forget about component lifecycles and start thinking in effects

Yesterday, while at a workshop, React Hooks (intro here) became the subject of discussion between participants. Someone in the audience asked how to easily map the classes+lifecycle way of thinking onto hooks, as she had trouble doing so.

In short, my recommendation was to no longer think in lifecycles but to think in effects, as useEffect was created for exactly this type of thing: when one (state) value changes something else should happen. It also provides you with cleanup methods, to perform stuff one would typically do in componentWillUnmount.

When coming home later that day I was really glad to see that Sebastian had just published a blogpost, along with a practical example, on that very same subject:

React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place.

Thanks for writing this post Seb, saved me some time from writing it myself 😉

Forget about component lifecycles and start thinking in effects →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.