React Component Lifecycle Explained

twitter logo github logo Updated on ・1 min read

React components have several lifecycle methods that you can override to run your code at a particular time in the process. In this video, we will explore all the React Component Lifecycle methods.

Link to Video on YouTube


If this video was helpful, ❀️ it and subscribe to my YouTube channel.


twitter logo DISCUSS (11)
markdown guide
 

Thank you for the tutorial, Nick πŸ™.

I never was exposed to those rarely used life cycle methods

  • shouldComponentUpdate - for possible optimization
  • getDerivedStateFromProps - for computed states
  • getSnapshotBeforeUpdate - saving state to use it after render

but now I understand where I need to use them 😎.

What was surprising 😲 was componentDidCatch. I thought I had to create a separate component (<ErrorBoundary/> to be able to use it but it seems like there is no need for it.

Tips for others

I was able to get more out of Nick's video while reading the official React documentation & watching the video at the same time.

 

You're welcome, Sung. I'm glad that this was useful. I hope the quality of the recording was better this time. :)

(I responded yesterday, but I'm not sure what happened to my post!)

Although I used componentDidCatch in my class, I think creating an ErrorBoundary component might be a better approach as it is reusable and you don't have to track the error state, etc. and perform conditional rendering. It also depends on the complexity of your app. I took a few shortcuts in this tutorial to keep it relatively short (but it was still 25 minutes!).

Thanks for the tip about following the official React documentation. That is a good idea.

 

I hope the quality of the recording was better this time. :)

Yes it indeed was better πŸ˜ƒ

 

I've never looked into React but this tutorial is so well done that even without any knowledge on the topic I could start my first React app now ☺️

 

Thank you, Gene. I never thought about this tutorial helping get started with React, but I'm glad it is useful in that sense.

Lately, I've been thinking about how simple React is and how one can master it by simply understanding the Component Lifecycle Methods. I will probably consider an article on Mastering React.

Feel free to reach out if you need any help with the Node / React ecosystem.

 

This is my first React test:

glitch.com/~react-vs-zuix

=) see the RenderTest.js class file.

I used a starter project found on Glitch.
Would you suggest any other good starter project for React?

If you're looking for a boilerplate, I would recommend Create React App because it is widely used on so many projects. Personally, I don't use a boilerplate as building something from scratch doesn't take that long and you have complete control over stuff.

Here's an article I had written that might be useful (although, nowadays I prefer using Parcel instead of Webpack): How to build your own React Boilerplate. I'm planning on doing a video around that too.

Anyway, it's hard to find the ideal starter project. I have yet to find one that I loved 100%.

 

Interesting, thanks for this, but by creating methods in the constructor aren't you creating new functions for every single instance of the class, instead of having those functions attached to the class prototype? Am I missing something? Is there a reason for this? :-)

 

Thank you, Marco, for pointing that out. You are right about the methods in the constructor creating new functions for each instance. I was trying to focus on lifecycle methods and wanted to keep the recording short, so I took a few shortcuts. I should have mentioned that in my video.

It is incumbent upon me to do a follow-up video to highlight the pros and cons of the various ways we can define and use functions in a class! :o

In the grand scheme of things, the performance overhead for this approach is pretty low if you're instantiating a handful of instances or instantiating them infrequently. And, it won't be noticeable to us. It works fine in this example. However, when focusing on performance, this is not the right approach.

 

Thank you nick, the tutorial was awesome. we need more of these.

 

You're welcome, Umesh! I'm glad you found it useful. I'll be working on more videos as I get time. You can also subscribe to my youtube channel to get updates. Let me know if you have any requests and I can prioritize my todo list if it matches something.

Classic DEV Post from Jan 5

You don't need to know everything (but you should know something well)

Dan Abramov recently published a couple of posts that made me think considerabl...

Nick Karnik profile image
Computer Scientist | Entrepreneur | Teacher

Hey there reader...

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❀️