Custom Hooks

Custom Hooks in React allow you to extract reusable logic from components into separate functions.

They are built using existing React Hooks like useState and useEffect, enabling cleaner and more maintainable code.

What are Custom Hooks?

A Custom Hook is a JavaScript function whose name starts with 'use' and that can call other Hooks inside it.

Custom Hooks help you reuse stateful logic across multiple components without repeating code.

Why Use Custom Hooks?

Custom Hooks help you separate logic from UI, making components easier to read and maintain.

They also improve reusability by allowing shared logic across different parts of an application.

Rules of Custom Hooks

Custom Hooks must start with the word 'use' to follow React conventions.

They can only be called inside React components or other Custom Hooks, not regular JavaScript functions.

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
}

Using a Custom Hook

Once created, Custom Hooks can be used inside functional components like any built-in Hook.

function Counter() {
  const { count, increment, decrement } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Extracting Fetch Logic

Custom Hooks are especially useful for handling API calls and data fetching logic.

Instead of repeating fetch logic in multiple components, you can centralize it in one Hook.

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

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

Using useFetch Hook

You can reuse the same logic in different components by calling the Custom Hook.

function Users() {
  const { data, loading } = useFetch('https://api.example.com/users');

  if (loading) return <p>Loading...</p>;

  return <div>{data.length} users loaded</div>;
}

Benefits of Custom Hooks

Custom Hooks make your code cleaner by separating logic from UI components.

They improve reusability, reduce duplication, and make testing easier.

Common Use Cases

Custom Hooks are used for form handling, authentication, API requests, local storage, and event listeners.

They are widely used in real-world React applications for shared logic.

Best Practices

Keep Custom Hooks focused on a single responsibility.

Avoid adding UI logic inside hooks; they should only handle logic.

Common Mistakes

A common mistake is not following the naming convention starting with 'use'.

Another mistake is trying to use hooks outside of React components.

Real-World Importance

Custom Hooks are heavily used in production-grade React applications for scalability.

They help teams share logic efficiently across large codebases.

Summary

Custom Hooks are a powerful feature in React that enable reusable logic across components.

Mastering them helps you write cleaner, scalable, and maintainable React applications.