ReactJS Component Life Cycle Using React Hooks

← ReactJS State Management Using React Hooks

Last modified on: September 7, 2025

<h1 data-start="465" data-end="516"><strong data-start="467" data-end="516">ReactJS Component Lifecycle Using React Hooks</strong></h1>
<p data-start="518" data-end="767">In <strong data-start="521" data-end="546">functional components</strong>, React Hooks like <code data-start="565" data-end="576">useEffect</code> allow us to <strong data-start="589" data-end="623">simulate the lifecycle methods</strong> of class components. This makes it possible to manage <strong data-start="678" data-end="725">mounting, updating, and unmounting behavior</strong> without converting components to classes.</p>
<hr data-start="769" data-end="772" />
<h2 data-start="774" data-end="798"><strong data-start="777" data-end="798">1. Mounting Phase</strong></h2>
<p data-start="800" data-end="885"><strong data-start="800" data-end="837">Equivalent of <code data-start="816" data-end="835">componentDidMount</code></strong>: Run code <strong data-start="848" data-end="884">once after the component renders</strong>.</p>
<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 MountExample() {
  const [data, setData] = useState(null);

useEffect(() =&gt; {
    // Runs once on mount
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((res) =&gt; res.json())
      .then((data) =&gt; setData(data));
  }, []); // Empty dependency array

return &lt;div&gt;{data ? data.title : "Loading..."}&lt;/div&gt;;
}

export default MountExample;
</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="1340" data-end="1465">
<li data-start="1340" data-end="1403">
<p data-start="1342" data-end="1403"><code data-start="1342" data-end="1367">useEffect(() =&gt; {}, [])</code> runs <strong data-start="1373" data-end="1400">once after first render</strong>.</p>
</li>
<li data-start="1404" data-end="1465">
<p data-start="1406" data-end="1465">Ideal for <strong data-start="1416" data-end="1462">API calls, subscriptions, or initial setup</strong>.</p>
</li>
</ul>
<hr data-start="1467" data-end="1470" />
<h2 data-start="1472" data-end="1496"><strong data-start="1475" data-end="1496">2. Updating Phase</strong></h2>
<p data-start="1498" data-end="1587"><strong data-start="1498" data-end="1536">Equivalent of <code data-start="1514" data-end="1534">componentDidUpdate</code></strong>: Run code when <strong data-start="1552" data-end="1586">specific state or props change</strong>.</p>
<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>function UpdateExample() {
  const [count, setCount] = useState(0);

useEffect(() =&gt; {
    console.log("Count updated:", count);
  }, [count]); // Runs whenever 'count' changes

return (
    &lt;div&gt;
      &lt;h1&gt;Count: {count}&lt;/h1&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
    &lt;/div&gt;
  );
}
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1919" data-end="1937"><strong data-start="1919" data-end="1935">Explanation:</strong></p>
<ul data-start="1938" data-end="2101">
<li data-start="1938" data-end="2029">
<p data-start="1940" data-end="2029">The dependency array <code data-start="1961" data-end="1970">[count]</code> tells React to <strong data-start="1986" data-end="2026">run this effect when <code data-start="2009" data-end="2016">count</code> changes</strong>.</p>
</li>
<li data-start="2030" data-end="2101">
<p data-start="2032" data-end="2101">Can be used for <strong data-start="2048" data-end="2100">side effects triggered by state or props updates</strong>.</p>
</li>
</ul>
<hr data-start="2103" data-end="2106" />
<h2 data-start="2108" data-end="2134"><strong data-start="2111" data-end="2134">3. Unmounting Phase</strong></h2>
<p data-start="2136" data-end="2233"><strong data-start="2136" data-end="2176">Equivalent of <code data-start="2152" data-end="2174">componentWillUnmount</code></strong>: Clean up <strong data-start="2187" data-end="2232">timers, subscriptions, or event listeners</strong>.</p>
<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>function Timer() {
  const [seconds, setSeconds] = useState(0);

useEffect(() =&gt; {
    const interval = setInterval(() =&gt; setSeconds((s) =&gt; s + 1), 1000);

// Cleanup function runs on unmount
    return () =&gt; clearInterval(interval);
  }, []);

return &lt;h1&gt;Seconds: {seconds}&lt;/h1&gt;;
}
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2538" data-end="2556"><strong data-start="2538" data-end="2554">Explanation:</strong></p>
<ul data-start="2557" data-end="2703">
<li data-start="2557" data-end="2633">
<p data-start="2559" data-end="2633">Return function inside <code data-start="2582" data-end="2593">useEffect</code> runs <strong data-start="2599" data-end="2630">when component is unmounted</strong>.</p>
</li>
<li data-start="2634" data-end="2703">
<p data-start="2636" data-end="2703">Prevents <strong data-start="2645" data-end="2661">memory leaks</strong> and ensures <strong data-start="2674" data-end="2702">clean-up of side effects</strong>.</p>
</li>
</ul>
<hr data-start="2705" data-end="2708" />
<h2 data-start="2710" data-end="2754"><strong data-start="2713" data-end="2754">4. Lifecycle Summary with <code data-start="2741" data-end="2752">useEffect</code></strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2756" data-end="3166">
<thead data-start="2756" data-end="2835">
<tr data-start="2756" data-end="2835">
<th data-start="2756" data-end="2774" data-col-size="sm">Lifecycle Phase</th>
<th data-start="2774" data-end="2806" data-col-size="sm">Class Component Method</th>
<th data-start="2806" data-end="2835" data-col-size="sm">Functional Component Hook</th>
</tr>
</thead>
<tbody data-start="2914" data-end="3166">
<tr data-start="2914" data-end="2992">
<td data-start="2914" data-end="2932" data-col-size="sm">Mounting</td>
<td data-start="2932" data-end="2963" data-col-size="sm"><code data-start="2934" data-end="2955">componentDidMount()</code></td>
<td data-start="2963" data-end="2992" data-col-size="sm"><code data-start="2965" data-end="2990">useEffect(() =&gt; {}, [])</code></td>
</tr>
<tr data-start="2993" data-end="3075">
<td data-start="2993" data-end="3011" data-col-size="sm">Updating</td>
<td data-start="3011" data-end="3042" data-col-size="sm"><code data-start="3013" data-end="3035">componentDidUpdate()</code></td>
<td data-start="3042" data-end="3075" data-col-size="sm"><code data-start="3044" data-end="3073">useEffect(() =&gt; {}, [deps])</code></td>
</tr>
<tr data-start="3076" data-end="3166">
<td data-start="3076" data-end="3094" data-col-size="sm">Unmounting</td>
<td data-start="3094" data-end="3125" data-col-size="sm"><code data-start="3096" data-end="3120">componentWillUnmount()</code></td>
<td data-start="3125" data-end="3166" data-col-size="sm"><code data-start="3127" data-end="3164">useEffect(() =&gt; return cleanup, [])</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<p data-start="3168" data-end="3180"><strong data-start="3168" data-end="3178">Notes:</strong></p>
<ul data-start="3181" data-end="3370">
<li data-start="3181" data-end="3272">
<p data-start="3183" data-end="3272">Multiple <code data-start="3192" data-end="3203">useEffect</code> hooks can be used in one component for <strong data-start="3243" data-end="3269">different side effects</strong>.</p>
</li>
<li data-start="3273" data-end="3324">
<p data-start="3275" data-end="3324">Dependency array controls when the effect runs.</p>
</li>
<li data-start="3325" data-end="3370">
<p data-start="3327" data-end="3370">Cleanup ensures <strong data-start="3343" data-end="3369">efficient memory usage</strong>.</p>
</li>
</ul>
<hr data-start="3372" data-end="3375" />
<h2 data-start="3377" data-end="3401"><strong data-start="3380" data-end="3401">5. Best Practices</strong></h2>
<ol data-start="3402" data-end="3748">
<li data-start="3402" data-end="3468">
<p data-start="3405" data-end="3468">Split <strong data-start="3411" data-end="3432">effects logically</strong>; avoid combining unrelated logic.</p>
</li>
<li data-start="3469" data-end="3535">
<p data-start="3472" data-end="3535">Always provide <strong data-start="3487" data-end="3508">dependency arrays</strong> for predictable updates.</p>
</li>
<li data-start="3536" data-end="3589">
<p data-start="3539" data-end="3589">Use cleanup functions to <strong data-start="3564" data-end="3586">avoid memory leaks</strong>.</p>
</li>
<li data-start="3590" data-end="3678">
<p data-start="3593" data-end="3678">Avoid putting <strong data-start="3607" data-end="3644">state setters in an infinite loop</strong>; manage dependencies carefully.</p>
</li>
<li data-start="3679" data-end="3748">
<p data-start="3682" data-end="3748">Prefer <strong data-start="3689" data-end="3725">functional components with hooks</strong> for modern React apps.</p>
</li>
</ol>
<hr data-start="3750" data-end="3753" />
<h2 data-start="3755" data-end="3772"><strong data-start="3758" data-end="3772">6. Summary</strong></h2>
<ul data-start="3773" data-end="4127">
<li data-start="3773" data-end="3855">
<p data-start="3775" data-end="3855"><code data-start="3775" data-end="3786">useEffect</code> replicates <strong data-start="3798" data-end="3827">class component lifecycle</strong> in functional components.</p>
</li>
<li data-start="3856" data-end="3914">
<p data-start="3858" data-end="3914">Mounting: run effect once with empty dependency array.</p>
</li>
<li data-start="3915" data-end="3976">
<p data-start="3917" data-end="3976">Updating: run effect when specific state or props change.</p>
</li>
<li data-start="3977" data-end="4023">
<p data-start="3979" data-end="4023">Unmounting: cleanup using return function.</p>
</li>
<li data-start="4024" data-end="4127">
<p data-start="4026" data-end="4127">Hooks make <strong data-start="4037" data-end="4076">functional components fully capable</strong> of handling side effects and lifecycle behavior.</p>
</li>
</ul>

Web Technology View More