React Lifecycle Methods
Last week we started learning about React in my coding Bootcamp. Aside from components, states, and props, we learned about lifecycle methods. We learned mostly about mounting (more on that later), but I decided to explore more about React’s lifecycle methods. Keep reading to learn more about React’s Lifecycle Methods and how you can use them on your next React app.
First off, what are Lifecycle Methods?
Lifecycle Methods are a series of events that occur within a class-based React Component. Think of your React Component as a flower. First, it sprouts from a seed, then blossoms, and then eventually withers. React Components have a similar lifecycle rhythm. They have 3 phases — Mounting(sprouting), Updating(blossoming), and Unmounting (withering).
Now that we know the 3 phases by name, let’s go through each one and see their part within a React Component.
Mounting
render()
This is the event/phase that you need to get your component to activate. In this event, we find the only required method — render(). As the name entails, the render method renders your component to the user interface.
A render method must be pure meaning it will always return the same output when invoked. Keep in mind that this means that you cannot setState() within a render() method.
ComponentDidMount()
ComponentDidMount() is the method invoked immediately after a component is mounted. You can do a fetch request within this method to obtain data from an outside source such as an API. You can also use setState() immediately within ComponentDidMount(). This will cause a second rendering to occur. Do not worry as this rendering will happen before the browser updates the screen. Something to take note of, please use this pattern cautiously as it can lead to performance issues.
Updating
The next event in the lifecycle method for a component is updating. A component updates whenever there is a change in its state or props. The render method is still present and needed to rerender the changes. Additionally, there are other methods we can use during this phase, but let’s stick to one for now.
componentDidUpdate()
componentDidUpdate() is a method that is invoked immediately after the update occurs. Use this method when you want to update the DOM in response to changes in state or props. Think of it like when your teacher lets you know how much time is left on the exam every 30 minutes.
Unmounting
The final event of a component’s lifecycle method is unmounting. We’ve hit the end of the road, no really. This is the part of the lifecycle where the component is removed from the DOM. Unmounted. Destroyed. Finished. React only has one built-in method that gets invoked in this phase of its lifecycle, componentWillUnmount().
componentWillUnmount()
componentWillUnmount() is the cleaner method. It can clear timers, clear cache, and cancel any network requests. Calling setState inside this method is futile. Once a component instance is unmounted, it can never be mounted again. No re-rendering. No coming back after 3 days. It’s gone over the hill.
Visual Representation
If you want a visual representation of how the lifecycle methods work, check out this diagram courtesy of Wojciech Maj et al.
You can play around with the diagram here too.
There you have it, React’s lifecycle methods in a nutshell. I hope this post has helped you with understanding a little bit more about React’s lifecycle methods. Until next time! Happy coding!
