Creating Custom Hooks in React for Reusable Logic
Tags: webdev, javascript, react, node
Published: 2023-10-31 18:16:08

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](https://bit.ly/3SinH8E)


## 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:

```javascript
// 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:

```javascript
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.