What Are Custom Hooks and Why Use Them

🧩 What Are Custom Hooks?

Custom Hooks in React are JavaScript functions that start with the word use and allow you to extract and reuse stateful logic across multiple components. They are built on top of React’s built-in hooks like useState, useEffect, useContext, and others. 🛠️

Instead of repeating the same hook logic in several components, you can encapsulate it in a custom hook — keeping your components clean, readable, and DRY (Don’t Repeat Yourself). ✨

🎯 Why Use Custom Hooks?

Custom Hooks are used to:

• ♻️ Reuse logic across multiple components
• 🧼 Clean up large components by separating concerns
• 🧠 Improve readability and maintainability
• 🚀 Promote modular, testable code

📦 Basic Structure of a Custom Hook

A custom hook is just a function that may use other hooks inside. Here's a simple example:

// useCounter.js
import { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

export default useCounter;

📍 How to Use This Custom Hook

import useCounter from './useCounter';

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

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

✅ Now multiple components can use this counter logic without duplicating code.

📡 Real-World Example: useFetch Hook

A common custom hook is for data fetching:

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

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

  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Use it in your component like this:

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

🔄 Rules for Custom Hooks

Custom hooks follow the same rules as React hooks:

• 🔁 Only call hooks at the top level
• 📌 Only call hooks from React functions or other hooks
• 🧪 They must start with use (like useSomething)

🧠 Best Practices

• ✅ Name them clearly (e.g., useForm, useAuth)
• ✅ Return only what’s needed (avoid bloating the return object)
• ✅ Keep hooks focused — one purpose per hook
• ✅ Use other hooks like useEffect, useRef, or useCallback inside them as needed

🧵 Combining Multiple Hooks

You can combine several hooks to create powerful abstractions:

// useFormInput.js
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => setValue(e.target.value);
  return { value, onChange };
}

Now in your form:

const name = useFormInput("");
const email = useFormInput("");

<input {...name} placeholder="Name" />
<input {...email} placeholder="Email" />

🚀 Final Thoughts

Custom Hooks empower you to write cleaner, reusable, and modular React code. They help separate logic from UI, promote best practices, and make your components smaller and easier to manage. Once you get comfortable with built-in hooks, creating custom hooks is the natural next step to scale your codebase like a pro! 💪🧠

---