How do you share stateful logic with custom hooks?

Sharing stateful logic in React can be efficiently handled through the use of custom hooks. Custom hooks allow developers to encapsulate stateful logic and reuse it across multiple components, promoting cleaner code and better separation of concerns. This approach is particularly useful when you have logic that needs to be shared between different components without duplicating code.

To create a custom hook, you simply define a function that starts with the word "use" and can call other hooks within it. This function can return any values or functions that you want to share with the components that use this hook.

Creating a Custom Hook

Here’s a practical example of a custom hook that manages a counter:

import { useState } from 'react';

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

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

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

In this example, the `useCounter` hook manages a counter's state and provides functions to increment, decrement, and reset the counter. You can now use this hook in any component:

import React from 'react';
import useCounter from './useCounter';

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

    return (
        

            
Count: {count}
            Increment
            Decrement
            Reset
        
    );
}

Best Practices

• Naming Convention: Always start your custom hook names with "use" to adhere to React's conventions. This helps in identifying hooks easily and ensures that React can apply the rules of hooks correctly.
• Encapsulation: Keep your hooks focused on a single piece of logic. If a hook is doing too much, consider breaking it down into smaller, more manageable hooks.
• Return Values: Return an object or an array from your custom hook to provide a clear API for the components that use it. This makes it easier to destructure and understand what is available.

Common Mistakes

• Not Using Hooks Properly: Ensure that custom hooks are called at the top level of your functional components. Calling them conditionally can lead to unpredictable behavior.
• State Management: Avoid using local state in your custom hooks if the state needs to be shared across multiple components. Instead, consider using context or a state management library.
• Overcomplicating Logic: If your custom hook is becoming too complex, it may be a sign that it needs to be split into multiple hooks or that the logic should be handled differently.

By following these guidelines, you can effectively share stateful logic across your React components using custom hooks, leading to more maintainable and reusable code.