Custom Hooks

In React, Custom Hooks are JavaScript functions that let you extract and reuse component logic in a clean and organized way. They start with the word use and behave just like built-in hooks such as useState, useEffect, and useContext.

Custom Hooks are useful when you want to share logic between multiple components without repeating code.

Why Use Custom Hooks?

React components often use the same logic across different parts of an app—for example, form handling, fetching data, or toggling UI elements. Writing the same logic over and over makes the code messy and hard to maintain.

Custom Hooks help you:

• Reuse logic easily
• Keep components clean
• Separate concerns (logic vs UI)

How to Create a Custom Hook

A Custom Hook is just a normal JavaScript function, but it:

1. Starts with use
2. Can call other hooks (like useState, useEffect)
3. Returns some data or functions

Example: A useToggle Hook

Let’s create a custom hook called useToggle to toggle a boolean value:

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => {
    setValue(prev => !prev);
  };

  return [value, toggle];
}

You can use this in any component like this:

function ToggleButton() {
  const [isOn, toggleIsOn] = useToggle();

  return (
    <button onClick={toggleIsOn}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

Another Example: useFetch Hook

Want to fetch data from an API? Instead of repeating useEffect and fetch logic, use a 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(json => {
        setData(json);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

Then use it like this:

function UsersList() {
  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>
  );
}

Best Practices for Custom Hooks

• Always start your custom hook name with use (like useForm, useLocalStorage)
• Keep it focused on one specific task
• Return only what’s necessary (data, state, or handlers)
• Use other React hooks inside, like useState, useEffect, useRef, etc.

When Should You Use Custom Hooks?

Use custom hooks when:

• You repeat the same logic in multiple components
• You want cleaner and more readable code
• You want to make logic more testable and maintainable

Conclusion

Custom Hooks are a powerful feature in React that help you write clean, reusable, and maintainable code. Instead of repeating logic in many components, you can wrap that logic in a hook and use it wherever needed.

By using custom hooks, your code becomes more organized, and your components can focus on rendering UI instead of managing logic.