Dissecting ReactJS LifeCycle Methods
Recently, I started playing around with ReactJS more and one aspect of it I wanted to focus on in this post is its lifecycle methods. Essentially, lifecycle methods are special methods provided by JavaScript frameworks that allow users to “hook” into the views when specific conditions happen (i.e. when the view first renders, when the view gets updated with new data, etc).
You might have noticed in my definition above, I mentioned that lifecycle methods are provided by different JavaScript frameworks / libraries— in order words, they aren’t something unique to ReactJS. In fact, frameworks like AngularJS and BackboneJS / MarionetteJS also have this concept. I won’t go into detail of how they work in other frameworks, but I’ve found that the lifecycle methods in ReactJS are easier to understand because it forces users to really think about state and props, and encourages users to code in a more functional style.
The goal of this post is less a tutorial and more an exploration into the different lifecycle methods in ReactJS. My hope is that exploring these methods will lead to a better understanding of when and how to use them in effective ReactJS code.
Getting Started
I’m breaking down my analysis of lifecycle methods into 2 categories:
- When ReactJS components get mounted and unmounted
- When ReactJS components get updated with new data via state and props
