What are custom React hooks and how do I create one?

What are custom React hooks and how do I create one?

Custom React hooks are functions that allow you to reuse stateful logic across components. To create one, define a function that starts with 'use' and can call other hooks inside it.

Can you give me an example of a custom hook?

Sure! Here's a simple 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);
    return { count, increment, decrement };
}

How do I use this custom hook in a component?

You can use the custom hook in a functional component like this:

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>
    );
}

Are there any best practices for creating custom hooks?

Yes! Some best practices include: naming your hooks with 'use' prefix, keeping them reusable, and ensuring they manage their own state.