Mastering Custom Hooks in React – A Beginner’s Guide 🪝

📌 Table of Contents

1. What Are Custom Hooks?
2. Why Use Custom Hooks?
3. How to Create One – Example
4. Best Practices & Common Mistakes

🧠 What Are Custom Hooks?

Custom Hooks are JavaScript functions that start with the word use and allow you to extract component logic into reusable functions. They use React’s built-in hooks (like useState, useEffect) under the hood and follow the same rules.

🔍 Why Use Custom Hooks?
Here’s what you gain:

• ♻️ Reusability: Share logic across multiple components
• 🧼 Cleaner Code: Keep your components focused on UI
• 🧩 Composability: Combine multiple hooks into one

💡 How to Create One – Example

Let’s create a custom hook called useLocalStorage.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

✅ Usage:

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

✨ Final Thoughts

That’s a wrap on custom hooks! They’re powerful, reusable, and help keep your code clean and modular. I hope this guide helps you create your own and apply them confidently in your React projects.

This was my first blog—if you liked it or found it helpful, feel free to connect or share your feedback!