How do I use custom hooks in React?

How do I use custom hooks in React?

Custom hooks in React allow you to extract component logic into reusable functions. You can create a custom hook by defining 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(count + 1);
    const decrement = () => setCount(count - 1);
    return { count, increment, decrement };
}

You can use this hook in your components to manage a counter.

How do I use this custom hook in a component?

You can use the custom hook like this:

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

function CounterComponent() {
    const { count, increment, decrement } = useCounter(0);
    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    );
}

What are some best practices for creating custom hooks?

Some best practices include: 1) Keep hooks focused on a single responsibility, 2) Use descriptive names, 3) Avoid using hooks conditionally, and 4) Ensure hooks are reusable across different components.