How do you share logic using custom hooks?

Custom hooks in React are a powerful way to encapsulate and share logic across components. They allow developers to extract component logic into reusable functions, making code cleaner and more maintainable. By following best practices and understanding common pitfalls, you can effectively utilize custom hooks in your projects.

Creating a Custom Hook

To create a custom hook, you simply define a function that starts with the word "use". This convention is important as it allows React to identify the function as a hook. For example, let's create a custom hook that manages a counter.

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

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    
    return { count, increment, decrement };
}

Using the Custom Hook

Once the custom hook is created, it can be used in any functional component. Here’s how you can implement the `useCounter` hook in a component:

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

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

Best Practices

• Naming Convention: Always start your custom hook names with "use" to follow React's conventions.
• Single Responsibility: Ensure that your custom hook does one thing well. This makes it easier to reuse and test.
• Return Values: Return an object or array from your custom hook to provide a clear API for the components that use it.
• Encapsulate State Logic: Use custom hooks to encapsulate state management logic, making components cleaner and more focused on rendering.

Common Mistakes

• Not Using the "use" Prefix: Failing to prefix your custom hook with "use" can lead to confusion and potential issues with React's rules of hooks.
• Overcomplicating Hooks: Avoid making hooks too complex. If a hook is doing too much, consider breaking it down into smaller hooks.
• Not Handling Dependencies Properly: When using hooks like `useEffect` within your custom hook, ensure that you manage dependencies correctly to avoid infinite loops or stale closures.

Practical Example: Fetching Data

Another common use case for custom hooks is fetching data. Here’s an example of a custom hook that fetches data from an API:

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [url]);

    return { data, loading, error };
}

This custom hook can be used in any component that needs to fetch data, making it reusable and efficient.