DEV Community

Cover image for 🛑 STOP thinking about React lifecycle methods.

🛑 STOP thinking about React lifecycle methods.

Swastik Yadav on June 02, 2022

In this post let's talk about the paradigm shift from lifecycle methods to state synchronization and hooks in ReactJs. When class components were ...
 
swastikyadav profile image
Swastik Yadav • Edited

Ah! Now I got your point. Now I see where you coming from.

I missUnderstood your point of miss-using the useEffect hook.

useEffect

Collapse
 
swastikyadav profile image
Swastik Yadav • Edited

Well, the whole point to ReactJs is to keep the UI and State in sync. And useEffect is the most commonly used hook to handle side-effects in ReactJs community.

useEffect can create performance issue without dependency array, but with dep array, I think it works just fine.

Would love to know your view on this, if you are ok to elaborate your point a little bit more.

Thank You 🙏

 
swastikyadav profile image
Swastik Yadav • Edited

Wow, this is really very insightful. I will give this a thorough study.

Thanks for sharing this.

And thanks for starting this positive and constructive conversation.

😊

Thread Thread
 
z2lai profile image
z2lai • Edited

This short and succinct article was one of the most enlightening ones I've read about the useEffect hook. I've subscribed to your Youtube channel and newsletter, can't wait to see more from you!

It can't be a coincidence that you wrote this just a few days after David Khourshid's (creator of XState library) talk about this exact topic, which include the same insights in this comment thread. If you haven't checked it out, you really should as I believe you'll benefit a lot from it, and many of David's talks: youtube.com/watch?v=HPoC-k7Rxwo

His conclusion is the same as Luke's - avoid useEffect hook as side-effects should be considered as part of state management ([state, event]=>[nextState, effects]) and not separately, which is what external libraries help you do. This is one of the things that David's own XState library does on top of implementing a declarative and explicit way of managing state with State Machines. You should also check out his talks on state machines and his XState library.

Thread Thread
 
swastikyadav profile image
Swastik Yadav

Thanks for all your support.

I will surely check David Khourshid's talk on this topic.

 
swastikyadav profile image
Swastik Yadav • Edited

Agreed

So, how would you go about making an API call, based on the response of which your view will be rendered.

As per my React knowledge useEffect is the only way here.

Please share if it can be done without useEffect.

Collapse
 
k_penguin_sato profile image
K-Sato

Nicely explained!

Collapse
 
swastikyadav profile image
Swastik Yadav

Thanks for the kind words K-Sato 😊

Collapse
 
oumaymasghayer profile image
Oumayma JavaScript Developer

Thank you for clearing it up!

Collapse
 
swastikyadav profile image
Swastik Yadav

My pleasure... 🙏

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice article.

Collapse
 
swastikyadav profile image
Swastik Yadav

Thank you, Andrew 😊

Collapse
 
bevis_9 profile image
bevis jason

ReactJs is a popular front-end development framework that has seen a lot of growth in the past few retro bowl years. It's easy to use and has a lot of features, making it a great choice for web applications and apps.