ReactJS Component Life Cycle

Last modified on: September 7, 2025

<h1 data-start="442" data-end="476">ReactJS Component Life Cycle</h1>
Every React component goes through a series of phases from creation to removal. Understanding the component life cycle is essential for managing state, side-effects, and performance.
React components have two types:
<ol data-start="713" data-end="825">
<li data-start="713" data-end="762">
Class Components &ndash; use lifecycle methods
</li>
<li data-start="763" data-end="825">
Functional Components &ndash; use hooks (e.g., <code data-start="811" data-end="822">useEffect</code>)
</li>
</ol>
<hr data-start="827" data-end="830" />
<h2 data-start="832" data-end="859">1. Life Cycle Phases</h2>
<h3 data-start="861" data-end="880">A. Mounting</h3>
Occurs when a component is created and inserted into the DOM.
Methods (Class Components):
<ol data-start="984" data-end="1263">
<li data-start="984" data-end="1041">
<code data-start="987" data-end="1002">constructor()</code> &ndash; Initialize state and bind methods.
</li>
<li data-start="1042" data-end="1125">
<code data-start="1045" data-end="1092">static getDerivedStateFromProps(props, state)</code> &ndash; Update state based on props.
</li>
<li data-start="1126" data-end="1158">
<code data-start="1129" data-end="1139">render()</code> &ndash; Render the UI.
</li>
<li data-start="1159" data-end="1263">
<code data-start="1162" data-end="1183">componentDidMount()</code> &ndash; Runs after the component is rendered. Ideal for API calls, subscriptions.
</li>
</ol>
Example:
<pre class="language-javascript"><code>class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = { data: null };
 }

componentDidMount() {
    fetch("https://api.example.com/data")
      .then(res =&gt; res.json())
      .then(data =&gt; this.setState({ data }));
  }

render() {
 return &lt;div&gt;{this.state.data ? this.state.data : "Loading..."}&lt;/div&gt;;
 }
}
</code></pre>
<hr data-start="1646" data-end="1649" />
<h3 data-start="1651" data-end="1670">B. Updating</h3>
Occurs when props or state change.
Methods (Class Components):
<ol data-start="1747" data-end="2196">
<li data-start="1747" data-end="1822">
<code data-start="1750" data-end="1785">static getDerivedStateFromProps()</code> &ndash; Update state based on new props.
</li>
<li data-start="1823" data-end="1931">
<code data-start="1826" data-end="1871">shouldComponentUpdate(nextProps, nextState)</code> &ndash; Optimize performance by preventing unnecessary renders.
</li>
<li data-start="1932" data-end="1974">
<code data-start="1935" data-end="1945">render()</code> &ndash; Re-render the component.
</li>
<li data-start="1975" data-end="2073">
<code data-start="1978" data-end="2025">getSnapshotBeforeUpdate(prevProps, prevState)</code> &ndash; Capture some information before DOM update.
</li>
<li data-start="2074" data-end="2196">
<code data-start="2077" data-end="2119">componentDidUpdate(prevProps, prevState)</code> &ndash; Runs after the update. Perfect for side effects like network requests.
</li>
</ol>
Example:
<pre class="language-javascript"><code>componentDidUpdate(prevProps, prevState) {
 if (prevState.data !== this.state.data) {
 console.log("Data updated!");
 }
}
</code></pre>
<hr data-start="2350" data-end="2353" />
<h3 data-start="2355" data-end="2376">C. Unmounting</h3>
Occurs when a component is removed from the DOM.
Method:
<ul data-start="2447" data-end="2531">
<li data-start="2447" data-end="2531">
<code data-start="2449" data-end="2473">componentWillUnmount()</code> &ndash; Clean up timers, subscriptions, or event listeners.
</li>
</ul>
Example:
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>componentWillUnmount() {
 clearInterval(this.timer);
}
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2614" data-end="2617" />
<h2 data-start="2619" data-end="2670">2. Life Cycle Hooks in Functional Components</h2>
Functional components use the <code data-start="2704" data-end="2715">useEffect</code> hook to handle lifecycle behavior:
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

// ComponentDidMount equivalent
  useEffect(() =&gt; {
    fetch("https://api.example.com/data")
      .then(res =&gt; res.json())
      .then(setData);
  }, []); // Empty dependency array =&gt; runs once on mount

// ComponentDidUpdate equivalent
  useEffect(() =&gt; {
    console.log("Data updated:", data);
  }, [data]); // Runs whenever 'data' changes

// ComponentWillUnmount equivalent
  useEffect(() =&gt; {
    const timer = setInterval(() =&gt; console.log("Running..."), 1000);
    return () =&gt; clearInterval(timer); // Cleanup on unmount
  }, []);

return &lt;div&gt;{data ? data : "Loading..."}&lt;/div&gt;;
}
</code></pre>
</div>
</div>
</div>
</div>
Explanation:
<ul data-start="3499" data-end="3688">
<li data-start="3499" data-end="3555">
<code data-start="3501" data-end="3512">useEffect</code> with <code data-start="3518" data-end="3522">[]</code> acts like <code data-start="3533" data-end="3552">componentDidMount</code>.
</li>
<li data-start="3556" data-end="3621">
<code data-start="3558" data-end="3569">useEffect</code> with dependencies acts like <code data-start="3598" data-end="3618">componentDidUpdate</code>.
</li>
<li data-start="3622" data-end="3688">
Return function in <code data-start="3643" data-end="3654">useEffect</code> acts like <code data-start="3665" data-end="3687">componentWillUnmount</code>.
</li>
</ul>
<hr data-start="3690" data-end="3693" />
<h2 data-start="3695" data-end="3746">3. Lifecycle Flow Diagram (Class Components)</h2>
Mounting &rarr; Updating &rarr; Unmounting
Mounting: <code data-start="3802" data-end="3815">constructor</code> &rarr; <code data-start="3818" data-end="3844">getDerivedStateFromProps</code> &rarr; <code data-start="3847" data-end="3855">render</code> &rarr; <code data-start="3858" data-end="3877">componentDidMount</code> Updating: <code data-start="3894" data-end="3920">getDerivedStateFromProps</code> &rarr; <code data-start="3923" data-end="3946">shouldComponentUpdate</code> &rarr; <code data-start="3949" data-end="3957">render</code> &rarr; <code data-start="3960" data-end="3985">getSnapshotBeforeUpdate</code> &rarr; <code data-start="3988" data-end="4008">componentDidUpdate</code> Unmounting: <code data-start="4027" data-end="4049">componentWillUnmount</code>
<hr data-start="4051" data-end="4054" />
<h2 data-start="4056" data-end="4080">4. Best Practices</h2>
<ol data-start="4081" data-end="4460">
<li data-start="4081" data-end="4156">
Use functional components with hooks for modern React development.
</li>
<li data-start="4157" data-end="4237">
Avoid side effects in render(); use <code data-start="4200" data-end="4219">componentDidMount</code> or <code data-start="4223" data-end="4234">useEffect</code>.
</li>
<li data-start="4238" data-end="4319">
Clean up timers, subscriptions, and event listeners in unmounting phase.
</li>
<li data-start="4320" data-end="4397">
Use <code data-start="4327" data-end="4350">shouldComponentUpdate</code> or <code data-start="4354" data-end="4366">React.memo</code> to optimize performance.
</li>
<li data-start="4398" data-end="4460">
Keep state minimal to prevent unnecessary re-renders.
</li>
</ol>
<hr data-start="4462" data-end="4465" />
<h2 data-start="4467" data-end="4484">5. Summary</h2>
<ul data-start="4485" data-end="4835">
<li data-start="4485" data-end="4525">
Mounting &ndash; component is created.
</li>
<li data-start="4526" data-end="4600">
Updating &ndash; component is re-rendered due to state or props changes.
</li>
<li data-start="4601" data-end="4656">
Unmounting &ndash; component is removed from the DOM.
</li>
<li data-start="4657" data-end="4747">
Class components use lifecycle methods; functional components use <code data-start="4733" data-end="4744">useEffect</code>.
</li>
<li data-start="4748" data-end="4835">
Proper lifecycle management ensures efficient, clean, and predictable React apps.
</li>
</ul>

Web Technology View More