Welcome back to the “Let’s Master React Hooks Together” series.

So far in this series, we’ve explored several important React Hooks and understood how they help manage state, side effects, performance optimization, references, and more inside React applications.

Now we’ve reached one of the most practical and powerful topics in React development — Custom Hooks.

This is the point where React applications start becoming cleaner, smarter, and more reusable.

As applications grow, developers often notice the same logic repeating in multiple components:

• Fetching API data


• Managing forms


• Handling authentication


• Tracking screen size


• Working with local storage


• Managing counters and timers

Instead of rewriting the same logic again and again, React allows us to extract that logic into reusable functions called Custom Hooks.

In this episode, we’ll deeply understand:

• What Custom Hooks are


• The official React definition


• Why they are important


• When to use them


• How to create them


• Real-world examples


• Best practices


• Common mistakes to avoid

Let’s get started.

Custom Hooks in React: Reusing Logic the Smart Way

When building React applications, one thing becomes obvious very quickly: the same logic appears again and again.

You fetch data in multiple components.

You track window size in several places.

You handle form inputs repeatedly.

You manage loading states everywhere.

At first, copying and pasting feels fast. But after a while, your code becomes difficult to maintain.

That’s exactly where Custom Hooks become useful.

Custom Hooks are one of the most powerful patterns in React because they allow you to extract reusable logic into a clean and reusable function.

In this article, we’ll understand:

• What Custom Hooks are


• The official React definition


• Why they exist


• When to use them


• How to create them


• Where they are useful in real projects


• Best practices and common mistakes


• Real-world examples

What Is a Custom Hook?

According to the official React documentation:

“A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks.”

At first glance, this definition feels simple. But there’s more behind it.

A Custom Hook is basically:

• A reusable function


• That contains React logic


• And can internally use hooks like useState, useEffect, useContext, etc.

Instead of duplicating logic across components, you move that logic into a reusable hook.

Why Custom Hooks Exist

To understand why Custom Hooks matter, let’s first look at a common problem.

Imagine you have multiple components fetching data from an API.

import { useState, useEffect } from "react";



function Users() {

  const [users, setUsers] = useState([]);



  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/users")

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

      .then((data) => setUsers(data));

  }, []);



  return (

    <div>

      {users.map((user) => (

        <p key={user.id}>{user.name}</p>

      ))}

    </div>

  );

}

Now another component needs similar fetching logic.

import { useState, useEffect } from "react";



function Posts() {

  const [posts, setPosts] = useState([]);



  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/posts")

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

      .then((data) => setPosts(data));

  }, []);



  return (

    <div>

      {posts.map((post) => (

        <p key={post.id}>{post.title}</p>

      ))}

    </div>

  );

}

Notice something?

The fetching logic is almost identical.

This creates problems:

• Duplicate code


• Harder maintenance


• Repeated bug fixes


• Larger components


• Poor readability

Custom Hooks solve this by extracting reusable behavior.

Understanding the Real Purpose of Custom Hooks

A lot of developers think Custom Hooks are only for reducing code duplication.

That’s true — but not the full picture.

The real purpose is:

1. Reusability

Write logic once and use it anywhere.

2. Separation of Concerns

Your component focuses on UI while the hook handles logic.

3. Cleaner Components

Components become smaller and easier to read.

4. Better Maintainability

Updating logic in one place updates it everywhere.

5. Easier Testing

You can test business logic separately from UI.

The Rules of Custom Hooks

Custom Hooks follow the same rules as React Hooks.

Rule 1: The function name must start with use

Correct:

useFetchData()

Wrong:

fetchData()

React relies on this naming convention internally.

Rule 2: Hooks must be called at the top level

Do not call hooks inside:

• loops


• conditions


• nested functions

Wrong:

if (show) {

  useEffect(() => {});

}

Correct:

useEffect(() => {

  if (show) {

    // logic here

  }

}, [show]);

How to Create a Custom Hook

The structure is very simple.

function useSomething() {

  // hook logic



  return something;

}

That’s it.

Now let’s build a real example.

Example 1: Creating a useFetch Hook

Step 1: Create the Hook

import { useEffect, useState } from "react";



function useFetch(url) {

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

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

  const [error, setError] = useState(null);



  useEffect(() => {

    async function fetchData() {

      try {

        setLoading(true);



        const response = await fetch(url);



        if (!response.ok) {

          throw new Error("Failed to fetch data");

        }



        const result = await response.json();



        setData(result);

      } catch (err) {

        setError(err.message);

      } finally {

        setLoading(false);

      }

    }



    fetchData();

  }, [url]);



  return { data, loading, error };

}



export default useFetch;

Step 2: Use the Hook

import useFetch from "./useFetch";



function Users() {

  const { data, loading, error } = useFetch(

    "https://jsonplaceholder.typicode.com/users"

  );



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



  if (error) return <p>{error}</p>;



  return (

    <div>

      {data.map((user) => (

        <p key={user.id}>{user.name}</p>

      ))}

    </div>

  );

}

Now the component is much cleaner.

The fetching logic lives in one reusable place.

Example 2: Creating a useCounter Hook

One of the simplest and most common examples of a Custom Hook is a counter.

Instead of managing counter logic separately in every component, we can create a reusable hook.

Step 1: Create the Hook

import { useState } from "react";



function useCounter(initialValue = 0) {

  const [count, setCount] = useState(initialValue);



  const increment = () => {

    setCount((prev) => prev + 1);

  };



  const decrement = () => {

    setCount((prev) => prev - 1);

  };



  const reset = () => {

    setCount(initialValue);

  };



  return {

    count,

    increment,

    decrement,

    reset,

  };

}



export default useCounter;

Step 2: Use the Hook

import useCounter from "./useCounter";



function Counter() {

  const {

    count,

    increment,

    decrement,

    reset,

  } = useCounter(10);



  return (

    <div>

      <h2>{count}</h2>



      <button onClick={increment}>

        Increment

      </button>



      <button onClick={decrement}>

        Decrement

      </button>



      <button onClick={reset}>

        Reset

      </button>

    </div>

  );

}

Now the counter logic is reusable across multiple components.

You can use the same hook anywhere in your application without rewriting the logic again.

When Should You Create a Custom Hook?

Not every repeated line of code needs a Custom Hook.

A good Custom Hook usually appears when:

You repeat logic across multiple components

Example:

• API fetching


• Authentication


• Form handling


• Pagination


• Debouncing


• Local storage access

Your component becomes too large

If a component contains too much logic, extracting it into hooks improves readability.

Logic is unrelated to UI

UI belongs inside components.

Reusable behavior belongs inside hooks.

Where Custom Hooks Are Commonly Used

Custom Hooks are everywhere in modern React applications.

1. API Requests

useFetch()

useUsers()

useProducts()

2. Authentication

useAuth()

3. Theme Handling

useTheme()

4. Form Management

useForm()

5. Window Resize Detection

useWindowSize()

6. Dark Mode

useDarkMode()

7. Local Storage

useLocalStorage()

Example 3: useLocalStorage Hook

Saving values in local storage is common.

Instead of rewriting the logic everywhere, create a reusable hook.

import { useState } from "react";



function useLocalStorage(key, initialValue) {

  const [value, setValue] = useState(() => {

    const storedValue = localStorage.getItem(key);



    return storedValue

      ? JSON.parse(storedValue)

      : initialValue;

  });



  const saveValue = (newValue) => {

    setValue(newValue);



    localStorage.setItem(

      key,

      JSON.stringify(newValue)

    );

  };



  return [value, saveValue];

}



export default useLocalStorage;

Usage:

function App() {

  const [name, setName] = useLocalStorage(

    "username",

    ""

  );



  return (

    <input

      value={name}

      onChange={(e) => setName(e.target.value)}

    />

  );

}

How Custom Hooks Improve Project Structure

Without hooks, components often become messy.

Example of a bad structure:

components/

 ├── Users.jsx

 ├── Products.jsx

 ├── Dashboard.jsx

Each component contains repeated logic.

With hooks:

src/

 ├── components/

 ├── hooks/

 │    ├── useFetch.js

 │    ├── useAuth.js

 │    ├── useLocalStorage.js

Now logic is centralized and reusable.

Important Difference: Component vs Custom Hook

A lot of developers confuse them.

React Component

• Returns JSX


• Handles UI rendering
  

function Button() {

  return <button>Click</button>;

}

Custom Hook

• Returns logic/data/functions


• Does NOT return JSX
  

function useCounter() {

  return { count, increment };

}

Common Mistakes with Custom Hooks

1. Returning JSX from Hooks

Wrong:

function useModal() {

  return <div>Modal</div>;

}

Hooks should return:

• state


• functions


• values


• logic

Not UI.

2. Creating Hooks Too Early

Not every logic deserves a hook.

If logic is used only once, keep it inside the component.

3. Massive Hooks

Avoid creating giant hooks that do everything.

Bad:

useDashboardEverything()

Keep hooks focused.

4. Ignoring Dependency Arrays

Hooks using useEffect still require proper dependencies.

Wrong dependencies can create bugs.

Advanced Pattern: Hooks Calling Hooks

One powerful feature is that hooks can use other hooks.

Example:

function useAuth() {

  const [user, setUser] = useState(null);



  useEffect(() => {

    // auth logic

  }, []);



  return user;

}

Another hook can reuse it:

function useAdmin() {

  const user = useAuth();



  return user?.role === "admin";

}

This creates highly modular logic.

Real-World Example

Imagine an e-commerce application.

Without hooks:

• Every page handles fetching


• Every component manages loading


• Authentication logic repeats


• Cart logic duplicates

With hooks:

useProducts()

useCart()

useAuth()

useOrders()

useWishlist()

Everything becomes organized and reusable.

Are Custom Hooks Required?

No.

React applications can work without them.

But as projects grow, Custom Hooks become one of the best ways to keep code maintainable and scalable.

Most modern React applications use them heavily.

Best Practices for Writing Custom Hooks

Keep One Responsibility

Good:

useFetch()

Bad:

useFetchAndThemeAndAuth()

Use Clear Names

Hook names should describe behavior.

Good:

useWindowSize()

useDarkMode()

Return Useful Data

Hooks should expose only what components need.

Handle Errors Properly

Especially in API hooks.

Avoid Unnecessary Re-renders

Use optimization carefully when needed.

Final Thoughts

Custom Hooks are one of React’s cleanest and most practical features.

They help you:

• Reuse logic


• Reduce duplication


• Keep components clean


• Improve maintainability


• Build scalable applications

The best way to understand Custom Hooks is to start noticing repeated logic in your own components.

Whenever you find yourself copying the same state management or effect logic multiple times, that’s usually a sign that a Custom Hook could help.

And once you start using them properly, your React code becomes significantly cleaner, easier to manage, and far more reusable.

Conclusion

That’s it for Episode 9 of the “Let’s Master React Hooks Together” series.

In this episode, we explored one of the most practical concepts in React — Custom Hooks — and understood how they help create reusable, clean, and maintainable applications.

We learned:

• What Custom Hooks are


• Why React introduced them


• How to create them


• When to use them


• Real-world use cases


• Best practices and mistakes to avoid

More importantly, we saw how Custom Hooks help separate logic from UI, making React applications much easier to scale and maintain.

As you continue building React projects, you’ll start noticing repeated patterns everywhere. That’s the perfect opportunity to create your own hooks and make your codebase cleaner and smarter.

In the next episode, we’ll continue exploring more advanced React concepts and patterns to strengthen your React development skills step by step.

See you in the next episode of

“Let’s Master React Hooks Together.”