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 →