ReactJS Introduction to Hooks

Last modified on: September 7, 2025

<h1 data-start="355" data-end="390"><strong data-start="357" data-end="390">ReactJS Introduction to Hooks</strong></h1>
<p data-start="392" data-end="548"><strong data-start="392" data-end="401">Hooks</strong> were introduced in <strong data-start="421" data-end="435">React 16.8</strong> to allow <strong data-start="445" data-end="470">functional components</strong> to use <strong data-start="478" data-end="512">state and other React features</strong> without writing class components.</p>
<p data-start="550" data-end="702">Before Hooks, state and lifecycle methods were only available in <strong data-start="615" data-end="635">class components</strong>. Hooks simplify code, make it reusable, and improve readability.</p>
<hr data-start="704" data-end="707" />
<h2 data-start="709" data-end="729"><strong data-start="712" data-end="729">1. Why Hooks?</strong></h2>
<ul data-start="731" data-end="937">
<li data-start="731" data-end="788">
<p data-start="733" data-end="788">Enable <strong data-start="740" data-end="760">state management</strong> in functional components.</p>
</li>
<li data-start="789" data-end="848">
<p data-start="791" data-end="848">Allow <strong data-start="797" data-end="813">side effects</strong> like API calls or subscriptions.</p>
</li>
<li data-start="849" data-end="897">
<p data-start="851" data-end="897">Promote <strong data-start="859" data-end="877">reusable logic</strong> via custom hooks.</p>
</li>
<li data-start="898" data-end="937">
<p data-start="900" data-end="937">Cleaner and more <strong data-start="917" data-end="934">readable code</strong>.</p>
</li>
</ul>
<hr data-start="939" data-end="942" />
<h2 data-start="944" data-end="973"><strong data-start="947" data-end="973">2. Commonly Used Hooks</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="975" data-end="1391">
<thead data-start="975" data-end="993">
<tr data-start="975" data-end="993">
<th data-start="975" data-end="982" data-col-size="sm">Hook</th>
<th data-start="982" data-end="993" data-col-size="md">Purpose</th>
</tr>
</thead>
<tbody data-start="1013" data-end="1391">
<tr data-start="1013" data-end="1070">
<td data-start="1013" data-end="1028" data-col-size="sm"><strong data-start="1015" data-end="1027">useState</strong></td>
<td data-start="1028" data-end="1070" data-col-size="md">Manage state in functional components.</td>
</tr>
<tr data-start="1071" data-end="1146">
<td data-start="1071" data-end="1087" data-col-size="sm"><strong data-start="1073" data-end="1086">useEffect</strong></td>
<td data-start="1087" data-end="1146" data-col-size="md">Handle side effects (API calls, timers, subscriptions).</td>
</tr>
<tr data-start="1147" data-end="1196">
<td data-start="1147" data-end="1164" data-col-size="sm"><strong data-start="1149" data-end="1163">useContext</strong></td>
<td data-start="1164" data-end="1196" data-col-size="md">Access React Context easily.</td>
</tr>
<tr data-start="1197" data-end="1245">
<td data-start="1197" data-end="1214" data-col-size="sm"><strong data-start="1199" data-end="1213">useReducer</strong></td>
<td data-start="1214" data-end="1245" data-col-size="md">Manage complex state logic.</td>
</tr>
<tr data-start="1246" data-end="1304">
<td data-start="1246" data-end="1259" data-col-size="sm"><strong data-start="1248" data-end="1258">useRef</strong></td>
<td data-start="1259" data-end="1304" data-col-size="md">Reference DOM elements or persist values.</td>
</tr>
<tr data-start="1305" data-end="1391">
<td data-start="1305" data-end="1333" data-col-size="sm"><strong data-start="1307" data-end="1332">useMemo / useCallback</strong></td>
<td data-start="1333" data-end="1391" data-col-size="md">Optimize performance by memoizing values or functions.</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr data-start="1393" data-end="1396" />
<h2 data-start="1398" data-end="1430"><strong data-start="1401" data-end="1430">3. Example: useState Hook</strong></h2>
<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 } from "react";

function Counter() {
  const [count, setCount] = useState(0);

return (
    &lt;div style={{ textAlign: "center", marginTop: "50px" }}&gt;
      &lt;h2&gt;Count: {count}&lt;/h2&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
      &lt;button onClick={() =&gt; setCount(count - 1)}&gt;Decrement&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default Counter;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1832" data-end="1906">✅ <code data-start="1834" data-end="1844">useState</code> allows functional components to <strong data-start="1877" data-end="1903">store and update state</strong>.</p>
<hr data-start="1908" data-end="1911" />
<h2 data-start="1913" data-end="1946"><strong data-start="1916" data-end="1946">4. Example: useEffect Hook</strong></h2>
<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 Timer() {
  const [seconds, setSeconds] = useState(0);

useEffect(() =&gt; {
    const interval = setInterval(() =&gt; setSeconds(s =&gt; s + 1), 1000);
    return () =&gt; clearInterval(interval); // Cleanup
  }, []);

return &lt;h2&gt;Seconds Elapsed: {seconds}&lt;/h2&gt;;
}

export default Timer;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2303" data-end="2396">✅ <code data-start="2305" data-end="2316">useEffect</code> replaces <strong data-start="2326" data-end="2393">componentDidMount, componentDidUpdate, and componentWillUnmount</strong>.</p>
<hr data-start="2398" data-end="2401" />
<h2 data-start="2403" data-end="2432"><strong data-start="2406" data-end="2432">5. Custom Hook Example</strong></h2>
<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 { useState, useEffect } from "react";

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

useEffect(() =&gt; {
    fetch(url)
      .then(res =&gt; res.json())
      .then(json =&gt; setData(json));
  }, [url]);

return data;
}

export default useFetch;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2719" data-end="2725">Usage:</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 from "react";
import useFetch from "./useFetch";

function App() {
  const data = useFetch("https://jsonplaceholder.typicode.com/posts");

return (
    &lt;div&gt;
      &lt;h2&gt;Posts&lt;/h2&gt;
      {data ? data.map(post =&gt; &lt;p key={post.id}&gt;{post.title}&lt;/p&gt;) : "Loading..."}
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3053" data-end="3101">✅ Custom hooks <strong data-start="3068" data-end="3098">encapsulate reusable logic</strong>.</p>
<hr data-start="3103" data-end="3106" />
<h2 data-start="3108" data-end="3125"><strong data-start="3111" data-end="3125">6. Summary</strong></h2>
<ul data-start="3127" data-end="3368">
<li data-start="3127" data-end="3202">
<p data-start="3129" data-end="3202">Hooks allow <strong data-start="3141" data-end="3166">functional components</strong> to manage state and side effects.</p>
</li>
<li data-start="3203" data-end="3236">
<p data-start="3205" data-end="3236"><code data-start="3205" data-end="3215">useState</code> &rarr; State management</p>
</li>
<li data-start="3237" data-end="3279">
<p data-start="3239" data-end="3279"><code data-start="3239" data-end="3250">useEffect</code> &rarr; Side effects &amp; lifecycle</p>
</li>
<li data-start="3280" data-end="3313">
<p data-start="3282" data-end="3313">Custom hooks &rarr; Reusable logic</p>
</li>
<li data-start="3314" data-end="3368">
<p data-start="3316" data-end="3368">Promote <strong data-start="3324" data-end="3366">clean, readable, and maintainable code</strong></p>
</li>
</ul>

Web Technology View More