What is the React Context API and how do I use it with TypeScript?

What is the React Context API and how do I use it with TypeScript?

The React Context API is a way to manage state globally in a React application. It allows you to share values between components without having to pass props down manually at every level. When using it with TypeScript, you can define types for your context values to ensure type safety.

Can you show me a simple example of how to implement it?

Sure! First, create a context using React.createContext(). Then, wrap your components with a Provider and pass the value you want to share. Here's a basic example:

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext<{ count: number; increment: () => void } | undefined>(undefined);

const MyProvider: React.FC = ({ children }) => {
    const [count, setCount] = useState(0);
    const increment = () => setCount(count + 1);

    return (
        <MyContext.Provider value={{ count, increment }}>
            {children}
        </MyContext.Provider>
    );
};

const MyComponent: React.FC = () => {
    const context = useContext(MyContext);
    if (!context) throw new Error('MyComponent must be used within a MyProvider');

    return <button onClick={context.increment}>Count: {context.count}</button>;
};

What are the benefits of using Context API over prop drilling?

Using the Context API helps avoid prop drilling, which can make your component tree cleaner and easier to manage. It allows you to share state across deeply nested components without having to pass props through every level, leading to better separation of concerns and improved maintainability.