ReactJS State Management Using React Hooks

ReactJS Component Life Cycle Using React Hooks →

Last modified on: September 7, 2025

<h1 data-start="480" data-end="528"><strong data-start="482" data-end="528">ReactJS State Management Using React Hooks</strong></h1>
<p data-start="530" data-end="712">React Hooks allow <strong data-start="548" data-end="573">functional components</strong> to manage state and side effects without converting them into class components. The two most commonly used hooks for state management are:</p>
<ol data-start="714" data-end="817">
<li data-start="714" data-end="759">
<p data-start="717" data-end="759"><code data-start="717" data-end="727">useState</code> &ndash; for simple state management</p>
</li>
<li data-start="760" data-end="817">
<p data-start="763" data-end="817"><code data-start="763" data-end="775">useReducer</code> &ndash; for complex or multiple state updates</p>
</li>
</ol>
<hr data-start="819" data-end="822" />
<h2 data-start="824" data-end="864"><strong data-start="827" data-end="864">1. Managing State with <code data-start="852" data-end="862">useState</code></strong></h2>
<p data-start="866" data-end="930"><code data-start="866" data-end="876">useState</code> allows you to <strong data-start="891" data-end="929">add state to functional components</strong>.</p>
<h3 data-start="932" data-end="966"><strong data-start="936" data-end="966">Example: Counter Component</strong></h3>
<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); // Initialize state

const increment = () =&gt; setCount(count + 1);
  const decrement = () =&gt; setCount(count - 1);

return (
    &lt;div&gt;
      &lt;h1&gt;Count: {count}&lt;/h1&gt;
      &lt;button onClick={increment}&gt;Increment&lt;/button&gt;
      &lt;button onClick={decrement}&gt;Decrement&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default Counter;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1400" data-end="1418"><strong data-start="1400" data-end="1416">Explanation:</strong></p>
<ul data-start="1419" data-end="1566">
<li data-start="1419" data-end="1464">
<p data-start="1421" data-end="1464"><code data-start="1421" data-end="1434">useState(0)</code> initializes state with <code data-start="1458" data-end="1461">0</code>.</p>
</li>
<li data-start="1465" data-end="1525">
<p data-start="1467" data-end="1525"><code data-start="1467" data-end="1477">setCount</code> updates the state and triggers <strong data-start="1509" data-end="1522">re-render</strong>.</p>
</li>
<li data-start="1526" data-end="1566">
<p data-start="1528" data-end="1566">State is <strong data-start="1537" data-end="1563">local to the component</strong>.</p>
</li>
</ul>
<hr data-start="1568" data-end="1571" />
<h2 data-start="1573" data-end="1623"><strong data-start="1576" data-end="1623">2. Managing Complex State with <code data-start="1609" data-end="1621">useReducer</code></strong></h2>
<p data-start="1625" data-end="1705"><code data-start="1625" data-end="1637">useReducer</code> is useful when state logic involves <strong data-start="1674" data-end="1704">multiple values or actions</strong>.</p>
<h3 data-start="1707" data-end="1744"><strong data-start="1711" data-end="1744">Example: Counter with Reducer</strong></h3>
<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, { useReducer } from "react";

const initialState = { count: 0 };

function CounterReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

return (
    &lt;div&gt;
      &lt;h1&gt;Count: {state.count}&lt;/h1&gt;
      &lt;button onClick={() =&gt; dispatch({ type: "increment" })}&gt;+&lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({ type: "decrement" })}&gt;-&lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch({ type: "reset" })}&gt;Reset&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default CounterReducer;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2526" data-end="2544"><strong data-start="2526" data-end="2542">Explanation:</strong></p>
<ul data-start="2545" data-end="2769">
<li data-start="2545" data-end="2613">
<p data-start="2547" data-end="2613"><code data-start="2547" data-end="2582">useReducer(reducer, initialState)</code> returns <code data-start="2591" data-end="2610">[state, dispatch]</code>.</p>
</li>
<li data-start="2614" data-end="2685">
<p data-start="2616" data-end="2685"><code data-start="2616" data-end="2626">dispatch</code> sends <strong data-start="2633" data-end="2651">action objects</strong> to the reducer to update state.</p>
</li>
<li data-start="2686" data-end="2769">
<p data-start="2688" data-end="2769">Ideal for <strong data-start="2698" data-end="2721">complex state logic</strong> or when multiple state variables are related.</p>
</li>
</ul>
<hr data-start="2771" data-end="2774" />
<h2 data-start="2776" data-end="2809"><strong data-start="2779" data-end="2809">3. Handling State in Forms</strong></h2>
<p data-start="2811" data-end="2864">Using <code data-start="2817" data-end="2827">useState</code> to manage <strong data-start="2838" data-end="2863">multiple input fields</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 } from "react";

function UserForm() {
  const [user, setUser] = useState({ name: "", email: "" });

const handleChange = (e) =&gt; {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    console.log(user);
    setUser({ name: "", email: "" }); // Reset form
  };

return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;input name="name" value={user.name} onChange={handleChange} placeholder="Name" /&gt;
      &lt;input name="email" value={user.email} onChange={handleChange} placeholder="Email" /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default UserForm;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3554" data-end="3572"><strong data-start="3554" data-end="3570">Explanation:</strong></p>
<ul data-start="3573" data-end="3707">
<li data-start="3573" data-end="3646">
<p data-start="3575" data-end="3646">The <strong data-start="3579" data-end="3598">spread operator</strong> (<code data-start="3600" data-end="3609">...user</code>) preserves other state properties.</p>
</li>
<li data-start="3647" data-end="3707">
<p data-start="3649" data-end="3707">Inputs are <strong data-start="3660" data-end="3685">controlled components</strong> connected to state.</p>
</li>
</ul>
<hr data-start="3709" data-end="3712" />
<h2 data-start="3714" data-end="3770"><strong data-start="3717" data-end="3770">4. Best Practices for State Management with Hooks</strong></h2>
<ol data-start="3771" data-end="4129">
<li data-start="3771" data-end="3823">
<p data-start="3774" data-end="3823">Use <code data-start="3778" data-end="3788">useState</code> for <strong data-start="3793" data-end="3820">simple or single values</strong>.</p>
</li>
<li data-start="3824" data-end="3888">
<p data-start="3827" data-end="3888">Use <code data-start="3831" data-end="3843">useReducer</code> for <strong data-start="3848" data-end="3885">complex or multiple state updates</strong>.</p>
</li>
<li data-start="3889" data-end="3929">
<p data-start="3892" data-end="3929">Keep state <strong data-start="3903" data-end="3926">minimal and focused</strong>.</p>
</li>
<li data-start="3930" data-end="3981">
<p data-start="3933" data-end="3981">Use <strong data-start="3937" data-end="3962">controlled components</strong> for form inputs.</p>
</li>
<li data-start="3982" data-end="4052">
<p data-start="3985" data-end="4052">Avoid <strong data-start="3991" data-end="4018">mutating state directly</strong>; always use setter or dispatch.</p>
</li>
<li data-start="4053" data-end="4129">
<p data-start="4056" data-end="4129">Combine <code data-start="4064" data-end="4075">useEffect</code> with state to <strong data-start="4090" data-end="4113">handle side effects</strong> like API calls.</p>
</li>
</ol>
<hr data-start="4131" data-end="4134" />
<h2 data-start="4136" data-end="4153"><strong data-start="4139" data-end="4153">5. Summary</strong></h2>
<ul data-start="4154" data-end="4470">
<li data-start="4154" data-end="4222">
<p data-start="4156" data-end="4222"><strong data-start="4156" data-end="4168">useState</strong>: simple state management for functional components.</p>
</li>
<li data-start="4223" data-end="4289">
<p data-start="4225" data-end="4289"><strong data-start="4225" data-end="4239">useReducer</strong>: complex state logic with actions and reducers.</p>
</li>
<li data-start="4290" data-end="4370">
<p data-start="4292" data-end="4370">Hooks allow <strong data-start="4304" data-end="4329">functional components</strong> to handle state like class components.</p>
</li>
<li data-start="4371" data-end="4470">
<p data-start="4373" data-end="4470">Proper state management ensures <strong data-start="4405" data-end="4467">interactive, reusable, and maintainable React applications</strong>.</p>
</li>
</ul>

Web Technology View More