Introduction

React provides a powerful way to encapsulate and reuse logic through Custom Hooks. Custom Hooks allow you to extract component logic into reusable functions, improving code readability and maintainability.

This guide will cover:

• What Custom Hooks are
• Why they are useful
• How to create and use them
• Best practices and real-world examples

What Are Custom Hooks?

A Custom Hook is a JavaScript function that follows the rules of React Hooks and allows stateful logic to be reused across multiple components. Custom Hooks use built-in React Hooks (like useState, useEffect, etc.) internally but provide an abstraction over complex logic.

Naming Convention

• Custom Hooks must start with use (e.g., useFetchData, useOnlineStatus).
• This convention allows React to identify them as Hooks and enforce Hook rules.
• If a function does not start with use, React will not recognize it as a Hook, and Hook rules will not be enforced.

Why Use Custom Hooks?

1. Reusability: Extract repeated logic into a single function to use across multiple components. Instead of writing the same logic in multiple components, Custom Hooks allow you to centralize the logic and use it anywhere with just a function call.
2. Separation of Concerns: Keep components clean by moving logic to a separate function. This improves code organization and makes components more readable and maintainable.
3. Encapsulation: Manage state and effects without affecting the main component logic. Custom Hooks ensure that logic is encapsulated in a way that doesn’t interfere with the component’s core functionality.
4. Testability: Custom Hooks are easier to test as standalone functions. Since they are independent of UI rendering, they can be tested in isolation using unit tests.

How to Create a Custom Hook

A Custom Hook is simply a function that:

• Uses built-in Hooks inside it.
• Returns state, values, or functions for the component to use.

Example 1: useOnlineStatus Hook

This Hook tracks whether the user is online or offline and updates automatically when the network status changes.

import { useState, useEffect } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    function handleStatusChange() {
      setIsOnline(navigator.onLine);
    }

    window.addEventListener('online', handleStatusChange);
    window.addEventListener('offline', handleStatusChange);

    return () => {
      window.removeEventListener('online', handleStatusChange);
      window.removeEventListener('offline', handleStatusChange);
    };
  }, []);

  return isOnline;
}

Using the Hook in a Component

function StatusIndicator() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? "Online" : "Offline"}</h1>;
}

Rules of Custom Hooks

To ensure proper behavior, follow these rules:

• Must start with use: This ensures compliance with React’s Hook rules. React expects hooks to follow this naming convention, and breaking it can lead to unintended behavior.
• Only call Hooks at the top level: Do not use Hooks inside loops, conditions, or nested functions. Hooks should always be called in the same order on every render.
• Use Hooks inside React function components or other Hooks: Do not use them inside class components. Hooks are designed specifically for functional components, and they do not work in class-based components.

Passing Arguments to Custom Hooks

Custom Hooks can accept parameters to make them dynamic and adaptable to different use cases.

Example 2: useFetchData Hook

Fetches data from an API and returns it along with the loading state.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

Using useFetchData

function UserList() {
  const { data, loading, error } = useFetchData('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

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

Best Practices for Custom Hooks

1. Keep Hooks focused: Each Hook should do one thing well. If a Hook does too many things, it becomes difficult to reuse and maintain.
2. Use meaningful names: useAuth, useTheme, useLocalStorage, etc. Naming should clearly indicate the purpose of the Hook.
3. Return only necessary values: Avoid returning unnecessary variables to keep the Hook efficient.
4. Encapsulate side effects: Use useEffect inside Custom Hooks when needed. Side effects such as API calls or event listeners should be handled properly.
5. Ensure proper cleanup: If your Hook sets up an event listener or subscription, always clean it up in the return function of useEffect to avoid memory leaks.

Conclusion

Custom Hooks are a great way to reuse logic in React applications. They help maintain clean, modular, and efficient code. By following best practices, you can build scalable and maintainable applications with ease. They promote code reusability, improve the separation of concerns, and make components easier to test and manage. Whether you are managing state, handling API calls, or working with event listeners, Custom Hooks can make your code more efficient and maintainable.