The useContext is used to consume values from the React Context. It provides a way to pass the data through the tree components without having to pass the props manually at every level.

React Context to Avoid Prop-Drilling

React’s Context API provides a way to pass data through the component tree without having to manually pass props at every level. Here’s a simple example to illustrate its usage.

First, we create a Context object using the createContext() function:

javascriptCopy codeimport React, { createContext } from "react";

const Context = createContext();

To make the context available throughout the component tree, we wrap the parent component with the Context provider. In this case, our parent component is <App />:

javascriptCopy codeimport React, { createContext } from "react";

const Context = createContext();

const App = () => {
  return <Context.Provider>/* ... */</Context.Provider>;
};

Next, we specify the context value using the value prop of <Context.Provider>. This value will be accessible by any component within the tree:

javascriptCopy codeimport React, { createContext } from "react";

const Context = createContext();

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      {/* ... */}
    </Context.Provider>
  );
};

Suppose <App /> renders a child component named <Child />:

javascriptCopy codeimport React, { createContext } from "react";

const Context = createContext();

const Child = () => {
  return <div>This is the child component!</div>;
};

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      <Child />
    </Context.Provider>
  );
};

To access the context value within the <Child /> component, we use the useContext hook:

javascriptCopy codeimport React, { createContext, useContext } from "react";

const Context = createContext();

const Child = () => {
  const context = useContext(Context);
  return <div>{context.data}</div>;
};

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      <Child />
    </Context.Provider>
  );
};

With these changes, the data from the parent <App /> component is rendered in the <Child /> component using the Context API.

Example with Multiple Nested Components

Context’s benefits become more apparent when dealing with deeply nested components. Let’s assume we have multiple child components nested within each other:

javascriptCopy codeimport React, { createContext, useContext } from "react";

const Context = createContext();

const Child5 = () => {
  const context = useContext(Context);
  return <div>{context.data}</div>;
};

const Child4 = () => {
  return <Child5 />;
};

const Child3 = () => {
  return <Child4 />;
};

const Child2 = () => {
  return <Child3 />;
};

const Child = () => {
  return <Child2 />;
};

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      <Child />
    </Context.Provider>
  );
};

In this example, the <Child5 /> component, which is the deepest in the hierarchy, accesses and renders the context data value. This demonstrates how Context eliminates the need for prop-drilling, as the context data is available to any component within the provider’s tree.

By using Context, data from the parent <App /> component is seamlessly accessed in the <Child5 /> component, showcasing the power and convenience of React’s Context API.

Leave a Reply

Your email address will not be published. Required fields are marked *