Custom Hook – React

Creating a custom Hook in React allows you to encapsulate logic that can be reused across multiple components. Custom Hooks are JavaScript functions whose names start with “use” and they can call other Hooks.

When creating and using custom Hooks in React, it’s important to follow certain rules to ensure they work correctly and integrate seamlessly with React’s hooks system. Here are the key rules for custom Hooks:

1. Start with “use”

The name of a custom Hook should always start with “use”. This is not just a convention but a rule that React uses to automatically check for violations of rules of Hooks.

// Correct
const useCustomHook = () => {
  // Hook logic
};

// Incorrect
const customHook = () => {
  // Hook logic
};

2. Call Hooks at the Top Level

Do not call Hooks inside loops, conditions, or nested functions. Always call them at the top level of your custom Hook or component. This ensures that Hooks are called in the same order each time a component renders.

const useCustomHook = () => {
  // Correct
  const [state, setState] = useState(initialState);

  // Incorrect
  if (someCondition) {
    const [state, setState] = useState(initialState);
  }
};

3. Only Call Hooks from React Functions

Hooks can only be called from React function components or custom Hooks. They cannot be called from regular JavaScript functions.

// Correct
const useCustomHook = () => {
  const [state, setState] = useState(initialState);
  // More Hook logic
};

// Incorrect
function regularFunction() {
  const [state, setState] = useState(initialState); // This will cause an error
}

4. Dependency Array in useEffect and Similar Hooks

When using useEffect, useCallback, useMemo, etc., provide a dependency array to optimize performance and prevent unnecessary re-renders or re-executions.

const useCustomHook = () => {
  useEffect(() => {
    // Effect logic
  }, [/* dependencies */]);
};

5. Custom Hooks Can Call Other Hooks

Custom Hooks can call other Hooks, allowing you to build more complex logic by combining simpler custom Hooks.

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, loading };
};

const useCustomHook = (url) => {
  const { data, loading } = useFetch(url);
  // Additional custom logic

  return { data, loading };
};

Here’s a step-by-step guide to creating a custom Hook with an example.

Example: Creating a Custom Hook to Fetch Data

Step 1: Create the Custom Hook

1. Create a new file called useFetch.js.
2. Define the custom Hook. In this example, the Hook will fetch data from an API.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

Step 2: Use the Custom Hook in a Component

1. Create a new file called App.js (or any other component file).
2. Import and use the custom Hook.

import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

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

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default App;

Explanation

1. useFetch Hook:
   • Parameters: Takes a url parameter to know where to fetch data from.
   • State Management: Uses useState to manage data, loading, and error states.
   • Side Effects: Uses useEffect to perform the data fetching when the component mounts or when the url changes.
   • Fetching Data: An asynchronous function fetchData is created within useEffect to fetch data, handle errors, and update the state accordingly.
2. App Component:
   • Usage: Calls the useFetch Hook with a specific API URL.
   • Conditional Rendering: Renders different UI elements based on the loading, error, and data states.

Benefits of Custom Hooks

• Reusability: Encapsulates logic that can be reused across multiple components.
• Readability: Separates concerns and makes components cleaner and more readable.
• Testability: Easier to test the logic within custom Hooks in isolation.

By following this pattern, you can create and use custom Hooks to manage various kinds of logic, such as form handling, data fetching, subscriptions, and more, making your React codebase more modular and maintainable.