Creating Custom Hooks in React for Reusable Logic

React, as a JavaScript library for building user interfaces, offers powerful tools and patterns to help you build maintainable and efficient applications. One of these tools is custom hooks, which allow you to encapsulate and reuse logic across multiple components. In this blog post, we'll explore the concept of custom hooks, how to create them, and provide a detailed explanation
along with a code example to demonstrate their utility.
Follow me on X

What Are Custom Hooks?

In React, hooks are functions that let you "hook into" state and other React features in functional components. Custom hooks are your way of creating reusable logic that can be shared among multiple components. They are just JavaScript functions, but they follow a specific naming convention by starting with "use" to indicate that they might use some of the built-in React hooks.

Why Use Custom Hooks?

Custom hooks provide several benefits:

1. Reusability: You can encapsulate and reuse complex logic, making your codebase more maintainable and reducing duplication.

2. Readability: By isolating logic in custom hooks, your components become more focused on rendering, improving code readability.

3. Testing: Custom hooks are easy to test independently, ensuring your logic is working correctly.

4. Sharing Logic: Custom hooks can be shared among different projects or with the open-source community, fostering collaboration and innovation.

Creating a Custom Hook

Creating a custom hook is a straightforward process. Let's go through the steps using an example of a custom hook for managing a dark mode theme.

Step 1: Create a New File

Start by creating a new JavaScript file for your custom hook. Name it something like useDarkMode.js.

Step 2: Define the Hook

Inside your new file, define your custom hook using the use prefix and write your logic. Here's an example of a useDarkMode hook:

// useDarkMode.js
import { useState, useEffect } from 'react';

const useDarkMode = () => {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    // Access local storage to check if dark mode is enabled
    const isDarkModeEnabled = localStorage.getItem('darkMode') === 'true';
    setDarkMode(isDarkModeEnabled);
  }, []);

  useEffect(() => {
    // Update local storage when dark mode changes
    localStorage.setItem('darkMode', darkMode);
    // You can also apply your dark mode styles here
    // For instance, add a class to the body tag
    if (darkMode) {
      document.body.classList.add('dark-mode');
    } else {
      document.body.classList.remove('dark-mode');
    }
  }, [darkMode]);

  return [darkMode, setDarkMode];
};

export default useDarkMode;

In this example, our useDarkMode hook manages a darkMode state and persists it in local storage. It also toggles a dark-mode class on the body element for styling.

Step 3: Using the Custom Hook

Now that you've created your custom hook, you can use it in your components. Here's how you can use the useDarkMode hook in a component:

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

function App() {
  const [darkMode, setDarkMode] = useDarkMode();

  return (
    <div className={`App ${darkMode ? 'dark-mode' : ''}`}>
      <h1>Dark Mode Toggle</h1>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Dark Mode
      </button>
    </div>
  );
}

export default App;

In this example, the useDarkMode hook manages the state and logic for dark mode, and the App component uses it to toggle the mode.

Conclusion

Custom hooks in React empower you to encapsulate and reuse logic across your application. By following the "use" prefix naming convention, you can create custom hooks that are intuitive to other developers. This practice improves the maintainability, readability, and testability of your code, making it a powerful tool for building efficient and scalable React applications. So, next time you find yourself duplicating logic across components, consider creating a custom hook to streamline your code and make your development process more efficient.