🔁 How Do I Share Logic Between Components with Hooks?

In traditional React (class components), shared logic often led to messy patterns like higher-order components (HOCs) and render props. But in the world of functional components, React gives us a better way:

🎉 Custom Hooks

✅ What Are Custom Hooks?

A custom hook is just a function that uses built-in React hooks (useState, useEffect, etc.) and can be reused across components.

By naming it with a use prefix (e.g. useAuth, useForm, useFetch), it follows React's Rules of Hooks.

🧠 Why Use Custom Hooks?

🧰 Real Example: useFetch Custom Hook

📦 Custom Hook (logic)

import { useState, useEffect } from "react";

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

    useEffect(() => {
        async function fetchData() {
            const res = await fetch(url);
            const json = await res.json();
            setData(json);
            setLoading(false);
        }
        fetchData();
    }, [url]);

    return { data, loading };
}

🧩 Component A

const Users = () => {
    const { data: users, loading } = useFetch('/api/users');
    return loading ? <p>Loading...</p> : <ul>{users.map(...)} </ul>;
};

🧩 Component B

const Posts = () => {
    const { data: posts, loading } = useFetch('/api/posts');
    return loading ? <p>Loading...</p> : <ul>{posts.map(...)} </ul>;
};

Boom 💥 — logic reused, no duplication, both components stay focused on UI.

🔐 Another Example: useAuth

function useAuth() {
    const [user, setUser] = useState(null);

    const login = (credentials) => {
        /* login logic */
    };

    const logout = () => {
        setUser(null);
    };

    return { user, login, logout };
}

Use this in any component that needs access to the user or auth actions!

📌 Best Practices for Custom Hooks

Tip Description
Prefix with use So React knows it's a hook
Keep them pure No JSX inside hooks
Return only what’s needed Make API simple and clear
Use other hooks inside them useState, useEffect, etc.
Don't call hooks conditionally Follow the Rules of Hooks

✅ Conclusion

Custom hooks are a powerful way to share logic between components while keeping your code clean, reusable, and testable.