React Custom Hooks

🧩 React Custom Hooks

Custom Hooks are JavaScript functions that start with use and allow you to reuse stateful logic across multiple components.
They let you extract common logic from components into reusable functions, keeping your code clean and organized.

🧠 Why Custom Hooks?

In React, multiple components often need similar logic, e.g.:

Fetching API data
Handling form input
Timer/interval logic
Local storage management

Instead of duplicating code in every component, we create a Custom Hook.

🛠 Syntax

Must start with use (so React can track Hook calls)
Can use other hooks (useState, useEffect, etc.) inside

🧪 Example 1: Custom Hook for Window Width

import { useState, useEffect } from "react";

function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);

window.addEventListener("resize", handleResize);

return () => window.removeEventListener("resize", handleResize);
}, []);

return width;
}

export default useWindowWidth;

import { useState, useEffect } from "react";

function useWindowWidth() {

const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {

const handleResize = () => setWidth(window.innerWidth);

window.addEventListener("resize", handleResize);

return () => window.removeEventListener("resize", handleResize);

}, []);

return width;

}

export default useWindowWidth;

Using the Custom Hook

✅ Logic is reusable and clean.

🧪 Example 2: Custom Hook for Form Input

import { useState } from "react";

function useInput(initialValue) {
const [value, setValue] = useState(initialValue);

const handleChange = (e) => setValue(e.target.value);

return [value, handleChange];
}

export default useInput;

import { useState } from "react";

function useInput(initialValue) {

const [value, setValue] = useState(initialValue);

const handleChange = (e) => setValue(e.target.value);

return [value, handleChange];

}

export default useInput;

Using the Custom Hook

import useInput from "./useInput";

function Form() {
const [name, setName] = useInput("");
const [email, setEmail] = useInput("");

return (
<form>
<input placeholder="Name" value={name} onChange={setName} />
<input placeholder="Email" value={email} onChange={setEmail} />
<p>Name: {name}</p>
<p>Email: {email}</p>
</form>
);
}

import useInput from "./useInput";

function Form() {

const [name, setName] = useInput("");

const [email, setEmail] = useInput("");

return (

<form>

<p>Email: {email}</p>

</form>

);

}

✅ Multiple inputs handled without duplicating logic.

🧪 Example 3: Custom Hook for Fetching Data

import { useState, useEffect } from "react";

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

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

return { data, loading };
}

export default useFetch;

import { useState, useEffect } from "react";

function useFetch(url) {

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

const [loading, setLoading] = useState(true);

useEffect(() => {

fetch(url)

.then((res) => res.json())

.then((json) => {

setData(json);

setLoading(false);

});

}, [url]);

return { data, loading };

}

export default useFetch;

Using the Custom Hook

import useFetch from "./useFetch";

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

if (loading) return <p>Loading...</p>;

return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

import useFetch from "./useFetch";

function Users() {

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

if (loading) return <p>Loading...</p>;

return (

<ul>

{data.map((user) => (

))}

</ul>

);

}

✅ Reusable logic for any API.

🎯 Rules for Custom Hooks

Must start with use
Can call other hooks (useState, useEffect, useReducer, etc.)
Must follow Hooks rules (top-level calls, no loops/conditions)
Can return any type: value, object, array, or function

🔹 Benefits

Benefit	Description
Reusable logic	Write once, use anywhere
Cleaner code	Reduces duplication
Composable	Combine multiple hooks
Encapsulates side-effects	Makes components simpler

🎉 Summary

Custom Hooks extract and reuse logic
Can manage state, effects, timers, API calls
Keeps components clean and readable
Essential for modern React apps

React Custom Hooks