Swastik Yadav

S Y

Navigate back to the homepage

🛑 STOP thinking about React lifecycle methods.

Swastik Yadav
July 22nd, 2023 · 1 min read

In this post let’s talk about the paradigm shift from lifecycle methods to state synchronization and hooks in ReactJs.

When class components were a thing in ReactJs (Well it still is, but no one likes them anymore), we use to think a lot in terms of mouting, unmounting, and lifecycle methods.

lifecycle diagram

Whenever a class component mounts, the lifecycle methods are called in following sequence: constructor → render → DOM and refs update → componentDidMount

But then came React Hooks, and we started to think in terms of dependency array.

And, often times we ask:

What is the hooks equivalent to [some lifecycle method]?

The quick answer is that hooks are a paradigm shift from thinking in terms of “lifecycles” to thinking in terms of “state and synchronization with DOM”.

lifecycles!=hoooks

Trying to take the old paradigm and apply it to hooks just doesn’t work out very well and can hold you back.

1useEffect(fn) // fn invoked on all updates
2
3useEffect(fn, []) // invoked on mount
4
5useEffect(fn, [a, b, c]) // invoked if any of the members of the array are updated

The above snippet is not the right way to think about React hook.

Lifecycles are gone, but we still think of useEffect with empty dep array as componentDidMount, and that’s not the right way to think about React Hooks.

Now I want to present to you the right way to think about react hooks.

State Synchronization

See, the question is not “when does this effect run” the question is “which state does this effect synchronizes with”

1useEffect(fn) // useEffect with no dep array, sync with all state
2
3useEffect(fn, []) // useEffect with empty dep array, sync with no state
4
5useEffect(fn, [stateA, stateB]) // useEffect with stateA and stateB in dep array sync with stateA and stateB.

And that’s how you should think about React Hooks.


Hope, you found this video useful, and if so, make sure show your support by subscribing.

I also run a weekly newsletter, so you can join me there also.

Thank You!

More articles from Swastik Yadav

How map() and reduce() Array method works in JavaScript.

Today let's implement our own version of the **map()** and **reduce()** array methods in JavaScript.

June 18th, 2023 · 2 min read

Web rendering patterns in a nutshell.

In this post let's try to understand the **web rendering patterns** and why did we came up with all these different rendering patterns.

May 22nd, 2023 · 4 min read

Developers, Double your income without competing against thousands of resumes by building your social presence.

Learn to bypass all the competition. Let the opportunities come to you instead of you mindlessly running behind it. This is how I went from 9LPA to 18LPA.

© 2021–2023 Swastik Yadav
Link to $https://twitter.com/swastikb380Link to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastikyadav/