ReactJS Custom Hooks

Last modified on: September 7, 2025

<h1 data-start="402" data-end="428"><strong data-start="404" data-end="428">ReactJS Custom Hooks</strong></h1>
<p data-start="430" data-end="537"><strong data-start="430" data-end="446">Custom Hooks</strong> allow you to <strong data-start="460" data-end="484">reuse stateful logic</strong> between components in React functional components.</p>
<p data-start="539" data-end="657">They are functions that <strong data-start="563" data-end="583">start with <code data-start="576" data-end="581">use</code></strong> and can call other hooks like <code data-start="614" data-end="624">useState</code>, <code data-start="626" data-end="637">useEffect</code>, or <code data-start="642" data-end="654">useReducer</code>.</p>
<hr data-start="659" data-end="662" />
<h2 data-start="664" data-end="695"><strong data-start="667" data-end="695">1. Why Use Custom Hooks?</strong></h2>
<ul data-start="697" data-end="930">
<li data-start="697" data-end="751">
<p data-start="699" data-end="751">Avoid <strong data-start="705" data-end="725">duplicating code</strong> in multiple components.</p>
</li>
<li data-start="752" data-end="808">
<p data-start="754" data-end="808">Encapsulate <strong data-start="766" data-end="783">complex logic</strong> in reusable functions.</p>
</li>
<li data-start="809" data-end="861">
<p data-start="811" data-end="861">Improve <strong data-start="819" data-end="834">readability</strong> and <strong data-start="839" data-end="858">maintainability</strong>.</p>
</li>
<li data-start="862" data-end="930">
<p data-start="864" data-end="930">Can handle <strong data-start="875" data-end="927">state, side effects, API calls, timers, or forms</strong>.</p>
</li>
</ul>
<hr data-start="932" data-end="935" />
<h2 data-start="937" data-end="969"><strong data-start="940" data-end="969">2. Creating a Custom 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 { useState, useEffect } from "react";

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

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

return { data, loading };
}

export default useFetch;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1367" data-end="1444">✅ This custom hook <strong data-start="1386" data-end="1414">fetches data from an API</strong> and can be reused anywhere.</p>
<hr data-start="1446" data-end="1449" />
<h2 data-start="1451" data-end="1480"><strong data-start="1454" data-end="1480">3. Using a Custom 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 from "react";
import useFetch from "./useFetch";

function Users() {
  const { data: users, loading } = useFetch("https://jsonplaceholder.typicode.com/users");

if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;

return (
    &lt;div style={{ textAlign: "center" }}&gt;
      &lt;h2&gt;User List&lt;/h2&gt;
      &lt;ul&gt;
        {users.map(user =&gt; (
          &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}

export default Users;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1938" data-end="2032">✅ The <strong data-start="1944" data-end="1966">logic is separated</strong>, and <code data-start="1972" data-end="1982">useFetch</code> can be used in any component without rewriting.</p>
<hr data-start="2034" data-end="2037" />
<h2 data-start="2039" data-end="2087"><strong data-start="2042" data-end="2087">4. Example: Custom Hook for Form Handling</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 } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

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

const resetForm = () =&gt; setValues(initialValues);

return { values, handleChange, resetForm };
}

export default useForm;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2473" data-end="2479">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 useForm from "./useForm";

function UserForm() {
  const { values, handleChange, resetForm } = useForm({ name: "", email: "" });

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Name: ${values.name}, Email: ${values.email}`);
    resetForm();
  };

return (
    &lt;form onSubmit={handleSubmit} style={{ textAlign: "center", marginTop: "50px" }}&gt;
      &lt;input name="name" placeholder="Name" value={values.name} onChange={handleChange} /&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;input name="email" placeholder="Email" value={values.email} onChange={handleChange} /&gt;
      &lt;br /&gt;&lt;br /&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="3204" data-end="3288">✅ This custom hook <strong data-start="3223" data-end="3245">manages form state</strong> and can be reused across multiple forms.</p>
<p data-start="3204" data-end="3288">&nbsp;</p>
<h2 data-start="472" data-end="511"><strong data-start="475" data-end="511">Creating a Simple Custom Hook</strong></h2>
<h3 data-start="513" data-end="541">Example: useCounter Hook</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 { useState } from "react";

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

const increment = () =&gt; setCount(c =&gt; c + 1);
  const decrement = () =&gt; setCount(c =&gt; c - 1);
  const reset = () =&gt; setCount(initialValue);

return { count, increment, decrement, reset };
}

export default useCounter;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="905" data-end="911">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 useCounter from "./useCounter";

function CounterApp() {
  const { count, increment, decrement, reset } = useCounter(5);

return (
    &lt;div style={{ textAlign: "center", marginTop: "50px" }}&gt;
      &lt;h2&gt;Count: {count}&lt;/h2&gt;
      &lt;button onClick={increment}&gt;+&lt;/button&gt;
      &lt;button onClick={decrement} style={{ marginLeft: "10px" }}&gt;-&lt;/button&gt;
      &lt;button onClick={reset} style={{ marginLeft: "10px" }}&gt;Reset&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default CounterApp;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1426" data-end="1484">✅ Encapsulates counter logic, reusable in any component.</p>
<hr data-start="1486" data-end="1489" />
<h2 data-start="1491" data-end="1526"><strong data-start="1494" data-end="1526">3. Custom Hook for API Calls</strong></h2>
<h3 data-start="1528" data-end="1545">useFetch Hook</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 { useState, useEffect } from "react";

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

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

return { data, loading };
}

export default useFetch;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1939" data-end="1945">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 UserList() {
  const { data: users, loading } = useFetch("https://jsonplaceholder.typicode.com/users");

if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;

return (
    &lt;ul&gt;
      {users.map(user =&gt; (
        &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;
      ))}
    &lt;/ul&gt;
  );
}

export default UserList;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2321" data-end="2353">✅ Reusable API fetching logic.</p>
<hr data-start="2355" data-end="2358" />
<h2 data-start="2360" data-end="2399"><strong data-start="2363" data-end="2399">4. Custom Hook for Form Handling</strong></h2>
<h3 data-start="2401" data-end="2417">useForm Hook</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 { useState } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

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

const resetForm = () =&gt; setValues(initialValues);

return { values, handleChange, resetForm };
}

export default useForm;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2803" data-end="2809">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 useForm from "./useForm";

function RegistrationForm() {
  const { values, handleChange, resetForm } = useForm({ name: "", email: "" });

const handleSubmit = (e) =&gt; {
    e.preventDefault();
    alert(`Name: ${values.name}, Email: ${values.email}`);
    resetForm();
  };

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

export default RegistrationForm;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="3461" data-end="3513">✅ Reusable form state logic across multiple forms.</p>
<hr data-start="3515" data-end="3518" />
<h2 data-start="3520" data-end="3559"><strong data-start="3523" data-end="3559">5. Custom Hook for Local Storage</strong></h2>
<h3 data-start="3561" data-end="3585">useLocalStorage Hook</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 { useState } from "react";

const setValue = (value) =&gt; {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

return [storedValue, setValue];
}

export default useLocalStorage;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="4110" data-end="4116">Usage:</p>
<pre class="language-javascript"><code>import React from "react";
import useLocalStorage from "./useLocalStorage";

function DarkModeToggle() {
  const [theme, setTheme] = useLocalStorage("theme", "light");

const toggleTheme = () =&gt; setTheme(theme === "light" ? "dark" : "light");

return (
    &lt;div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff", minHeight: "100vh", textAlign: "center" }}&gt;
      &lt;h2&gt;Current Theme: {theme}&lt;/h2&gt;
      &lt;button onClick={toggleTheme}&gt;Toggle Theme&lt;/button&gt;
    &lt;/div&gt;
  );
}

export default DarkModeToggle;
</code></pre>
<p data-start="4688" data-end="4743">✅ Reusable hook for <strong data-start="4708" data-end="4740">persistent theme or settings</strong>.</p>
<p data-start="4688" data-end="4743">&nbsp;</p>
<hr data-start="3290" data-end="3293" />
<h2 data-start="3295" data-end="3319"><strong data-start="3298" data-end="3319">5. Best Practices</strong></h2>
<ul data-start="3321" data-end="3598">
<li data-start="3321" data-end="3397">
<p data-start="3323" data-end="3397">Name custom hooks starting with <strong data-start="3355" data-end="3364"><code data-start="3357" data-end="3362">use</code></strong> (e.g., <code data-start="3372" data-end="3382">useFetch</code>, <code data-start="3384" data-end="3393">useForm</code>).</p>
</li>
<li data-start="3398" data-end="3452">
<p data-start="3400" data-end="3452">Keep hooks <strong data-start="3411" data-end="3449">focused on a single responsibility</strong>.</p>
</li>
<li data-start="3453" data-end="3524">
<p data-start="3455" data-end="3524">Reuse <strong data-start="3461" data-end="3479">existing hooks</strong> inside custom hooks for better modularity.</p>
</li>
<li data-start="3525" data-end="3598">
<p data-start="3527" data-end="3598">Return only <strong data-start="3539" data-end="3573">necessary values and functions</strong> to keep the API clean.</p>
</li>
</ul>
<hr data-start="3600" data-end="3603" />
<h2 data-start="3605" data-end="3622"><strong data-start="3608" data-end="3622">6. Summary</strong></h2>
<ul data-start="3624" data-end="3936">
<li data-start="3624" data-end="3706">
<p data-start="3626" data-end="3706">Custom Hooks allow <strong data-start="3645" data-end="3677">reusable, encapsulated logic</strong> for functional components.</p>
</li>
<li data-start="3707" data-end="3780">
<p data-start="3709" data-end="3780">They can manage <strong data-start="3725" data-end="3777">state, side effects, timers, API calls, or forms</strong>.</p>
</li>
<li data-start="3781" data-end="3851">
<p data-start="3783" data-end="3851">Follow <strong data-start="3790" data-end="3838">naming conventions and single responsibility</strong> principle.</p>
</li>
<li data-start="3852" data-end="3936">
<p data-start="3854" data-end="3936">Improve <strong data-start="3862" data-end="3910">readability, maintainability, and code reuse</strong> across your React apps.</p>
</li>
</ul>

Web Technology View More