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.
React Component Lifecycle Explained
Publish Date: Aug 14 '18
119 11
Comments 11 total
Nick KarnikAug 15, 2018You'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.
- Sung M. KimAug 15, 2018
I hope the quality of the recording was better this time. :)
Yes it indeed was better 😃
Marco ArduiniAug 15, 2018Interesting, 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? :-)
- Nick KarnikAug 15, 2018
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.
- Nick KarnikAug 15, 2018
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.
- Nick KarnikAug 16, 2018
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%.
- Nick KarnikAug 16, 2018
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.
Thank you for the tutorial, Nick 🙏.
I never was exposed to those
rarely usedlife cycle methodsshouldComponentUpdate- for possible optimizationgetDerivedStateFromProps- for computed statesgetSnapshotBeforeUpdate- saving state to use it after renderbut 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.