Today we are briefly going to talk about the most commonly used lifecycle method render, then about updating and unmounting.
Important Note: This post focuses on class component lifecycle methods, which are now considered legacy. Modern React development uses function components with hooks (useEffect, useState, etc.) that provide similar functionality with a simpler mental model. However, understanding lifecycle methods is still valuable for maintaining existing codebases and understanding React’s underlying concepts.
Render
The render() method is the only required method in a class component.
Called when this.props and this.state change, the render() method determines what should be displayed.
The render() method can return:
- React elements (JSX) - The most common return type
- Arrays and fragments - For returning multiple elements without a wrapper
- Strings and numbers - Rendered as text nodes
- Booleans or null - Render nothing (useful for conditional rendering)
- Portals - For rendering content outside the component tree
Critical requirements for render(): The render() method must behave like a pure function:
- No side effects - Does not modify component state
- Predictable - Returns the same result each time it’s invoked with the same props/state
- No direct browser interaction - Does not directly interact with the DOM
- No async operations - No network calls, setTimeout, etc.
Modern equivalent: Function components naturally enforce this - they’re just functions that return JSX based on props and state.
Updating
A process a component goes through when being re-rendered, if there are any changes to prop or state the render() method gets called followed by the componentDidUpdate() method.
In the componentDidUpdate() we can add additional network calls or manipulate the DOM.
render() {
console.log("render");
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
componentDidUpdate() {
console.log("componentDidUpdate");
}
Unmounting
It is called when a component is removed from the DOM.
componentWillUnmount() is invoked immediately before a component is unmounted and destroyed.
The componentWillUnmount() method can:
- Unsubscribe to promises / cancel any subscriptions
- Clear event handlers
- Invalidating timers
- Cancel network requests
You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.
componentWillUnmount() {
console.log("clear watch timer");
clearInterval(this.watchID);
}
Error Handling
These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
static getDerivedStateFromError() componentDidCatch()
We will dive into these more in the next few posts.
Conclusion 🐒
The most commonly used lifecycle methods.
- constructor()
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
Ok its making sense and btw I love this diagram, done by an pro dev named Wojciech Maj, mad credit here, their GitHub profile and repo for this project is listed below in the credits. Thank you, helps me visualize the process much easier.
