Use Context Hook in ReactJs

UseContext Hook

Normally in a react application data is passed from parent to child through props, But this effect passed is complex when the size of the application is large enough to read data from it.

To prevent this UseContext comes to roles to play. UseContext in react passes data to the tree without passing manually at every label. It allows sharing the of data between components that are not directly linked to each other in a component tree.

Let us understand through an example

In a given tree we want our information to directly pass to the leaf node(A->j). Now, the trivial solution would be to pass from a->b->e->j which is quite complex, and the code becomes difficult to debug, So to prevent it UseContext Hooks help the data to directly pass from the A->J without actually passing through the components.

Let Us understand through example the normal trivial approach to the problem

Without UseContext

 

import React from "react";

// Without useContext
function Parent() {
  const data = { message: "Hey ,I got the output" };

  return <Child data={data} />;
}

function Child(props) {
  return <Grandchild data={props.data} />;
}

function Grandchild(props) {
  return <div>{props.data.message}</div>;
}

// With useContext

function App() {
  return (
    <div>
      <h2>Without useContext</h2>
      <Parent />
    </div>
  );
}

export default App;

In this example the parent component passes it to the child component through props,the child then passes the data to the grandChild and then the grandChild read the data provided by the parent. This approach is true for small component tree but can become complex and error-prone as the component tree grows in size.

Now, Let us understand through the example the use of UseContext Hooks.

To understand this we need to have know some function in UseContext.

UseContext hook has been created using the function CreateContext(),It provides the data to share between component without having the props pass through every component tree.

CreateContext()-It stores the data that you want to share between the component. Next, we create a provider context that will wrap the component that need access to the context data. After wrapping with the Provider ,now any child can access the data through the use of useContext. This topic will become by looking at the example. 

With useContext

 

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



// With useContext
const MyContext = createContext();

function MyProvider(props) {
  const myData = { message: "hey, i got the output" };

  return (
    <MyContext.Provider value={myData}>
      {props.children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const myData = useContext(MyContext);

  return (
    <div>{myData.message}</div>
  );
}

function App() {
  return (
    <div>
      <h2>With useContext</h2>
      <MyProvider>
        <MyComponent />
      </MyProvider>
    </div>
  );
}

export default App;

Here in this example We have created a Context Object 'createContext' function. We then created a provider component that will wrap the component that needs, access to the context data. The provider will use the value prop to pass data to the component tree. The child component will use the useContext hook to acc the directly from the contex, instead of passing through the intermediate child.

By using the UseContext,we can simplify the data flow and avoid prop drilling which makes, your code easier to understand, read and maintain.

Thats it for the blog if you it please share. Thank You😊