What are custom hooks in React with TypeScript?

What are custom hooks in React with TypeScript?

Custom hooks in React are functions that allow you to reuse stateful logic. When using TypeScript, you can define types for the hook's parameters and return values, enhancing 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 };
}

This hook initializes a counter and provides functions to increment and decrement the count.

How do I use this custom hook in a component?

You can use the custom hook in a functional component 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 component displays the count and buttons to modify it.

What are the benefits of using TypeScript with custom hooks?

Using TypeScript with custom hooks provides type safety, which helps catch errors during development. It also improves code readability and maintainability by clearly defining the expected types for inputs and outputs.