Custom Hooks in React

Introduction

As React applications grow, developers often repeat the same logic across multiple components. This leads to duplicated code and makes maintenance difficult.

Custom Hooks solve this problem by allowing developers to extract reusable logic from components and share it across the application.

This article explains what Custom Hooks are, why they are used, how to create them, practical examples, best practices, and interview questions, suitable for beginners and professionals.

What Are Custom Hooks?

Custom Hooks are JavaScript functions that use one or more built-in React Hooks to share reusable logic between components.

A Custom Hook:

• Starts with the word use
• Can use other Hooks inside it
• Returns data or functions
• Does not return JSX

Example name:

useFetch
useCounter
useAuth

Why Use Custom Hooks?

Without Custom Hooks:

• Logic is repeated in multiple components
• Components become large and hard to read
• Maintenance becomes difficult

With Custom Hooks:

• Logic is reusable
• Components stay clean
• Code becomes easier to test and maintain

Rules of Custom Hooks

Custom Hooks follow the same rules as React Hooks:

• Must start with use
• Must be called at the top level
• Must not be called inside loops or conditions
• Must be used inside React components or other hooks

Simple Custom Hook Example

Problem Without Custom Hook

function CounterOne() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

function CounterTwo() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

The logic is duplicated.

Solution Using Custom Hook

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 };
}

Using the Custom Hook

function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Custom Hook with useEffect Example

useFetch Custom Hook

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(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

Using useFetch Hook

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>
  );
}

Custom Hooks vs Components

When to Create a Custom Hook

Create a Custom Hook when:

• Logic is reused in multiple components
• Component code becomes large
• You want better separation of concerns
• You want to improve readability

Common Mistakes with Custom Hooks

• Forgetting to prefix with use
• Returning JSX from a hook
• Overusing hooks unnecessarily
• Putting UI logic inside hooks

Best Practices

• Keep hooks focused on one responsibility
• Name hooks clearly
• Avoid side effects unless necessary
• Reuse hooks instead of copying logic

Interview Questions and Answers

What are Custom Hooks in React?

Custom Hooks are reusable functions that allow sharing stateful logic between components.

Why should Custom Hooks start with use?

React uses the use prefix to identify hooks and apply hook rules correctly.

Can Custom Hooks use other hooks?

Yes, Custom Hooks can use built-in hooks like useState, useEffect, and useContext.

Do Custom Hooks replace components?

No, Custom Hooks replace repeated logic, not UI components.