How can I create custom hooks in TypeScript with React?

How can I create custom hooks in TypeScript with React?

Creating custom hooks in TypeScript with React involves defining a function that uses built-in hooks. You can type the return value for better type safety.

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: number = 0) {
    const [count, setCount] = useState(initialValue);
    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 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';

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

This will display the counter and buttons to increment and decrement the value.

What are some best practices for creating custom hooks?

Some best practices include:

1. Keep hooks focused on a single responsibility.
2. Use TypeScript for type safety.
3. Avoid using hooks conditionally.
4. Name your hooks with the use prefix to follow React conventions.