17.useContext()Hook.md

Passing Data through Context API

The React Context API allows you to share state and data between components without having to pass props down through multiple levels of the component tree. This can be particularly useful for situations where you have deeply nested components and you want to avoid the prop drilling that would be required to pass the data down through each level.

Why we need the react context API?

The React Context API is a way to share data that is required by multiple components in a React application, without the need to pass props down through the component tree manually. This can be especially useful for data that is needed by many components, but is not directly related to the rendering of a specific component, such as the currently authenticated user or the current locale.

Using the Context API can help improve the separation of concerns in a React application, as components do not need to be aware of the specific parent component that is providing the required data. It can also make the component tree more concise, as data that needs to be passed down through multiple levels of components can be provided directly through the context, rather than being passed down as props at each level.

Overall, the React Context API can be a useful tool for managing data in a React application, particularly when that data is needed by many components and is not directly related to the rendering of specific components.

How to use them ?

To use the Context API, you'll need to create a context object and provide a default value for the context. You can then use the <Provider> component to provide the context value to the components that need it, and the useContext hook to consume the context value in those components.

Here's an example of how you might use the Context API to pass a theme value down to a set of nested components:

import React, { createContext, useContext } from "react";

// Create the context object and specify a default value
const ThemeContext = createContext("light");

// Create a provider component that will wrap the components that need the context value
const ThemeProvider = ({ value, children }) => (
  <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);

// Create a component that consumes the context value
const ThemeButton = () => {
  const theme = useContext(ThemeContext);
  return <button className={`theme-${theme}`}>Click me!</button>;
};

// Use the provider component to wrap the component tree and provide the context value
const App = () => (
  <ThemeProvider value="dark">
    <div>
      <ThemeButton />
    </div>
  </ThemeProvider>
);

In this example, the ThemeButton component consumes the theme context value and applies it as a classname. The ThemeProvider component provides the context value, which can be changed by updating the value prop of the provider. This allows you to control the theme of the entire component tree by simply changing the value of the context provider at the root level.

Limitation of useContext API

If you are continously changing the state in every second thean you have not to use the useContext(), beacuse it can cause effects to change every component on every seconds. But if your useContext() data states are changing on after a some time than you hav e must prefer to use them.

Another limitation of useContext is that it does not support the propagation of context updates to components higher up in the tree. If a context value changes, only the components that directly consume that value using useContext will be re-rendered. This can make it difficult to manage updates to context values that are used by multiple components.