React Hooks - useContext

#html #javascript #react #productivity

Hello Guyz today i am going to show you the useContext hook in react
which helps in passing down the data to the root child which can be many levels down the heirarchy tree component.
So lets get started...

Problem -

Suppose we want to pass down the data from parent component to child C component as in the image shown below

So using props we have to pass down the props through every level of the tree to provide the data to last component which is Child C.

So, Here React Context comes into play which can directly provide the data from Parent to Child C directly without passing down the data through every component in between.

Example -

Creating Context -

App.js

import React from 'react';
import ChildA from from './ChildA';

//here we are creating the context and exporting it
export const UserContext = React.createContext();

const App = () => {
  return (
    <div>
      <UserContext.Provider value={'Example Data'}>
        <ChildA />
      </UserContext.Provider>
    </div>
    )
}

We have used the 'Provider' to provide the value to all the components inside the UserContext Tag.

NOTE - ChildA component contains the ChildB component and ChildB component Contains the ChildC component.

Using Context without useContext hook -

So, we are going to provide the data to ChildC component which is at the bottom level in the Hierarchy tree.

ChildC.js

import React from 'react';
import {UserContext} from from './App.js';

const ChildC = () => {
  return (
    <div>
      <UserContext.Consumer>
        {
          user => {
            return (
            <div>{user}</div>
            )
          }
        }
      </UserContext.Consumer>
    </div>
    )
}

export default ChildC

As you can see we have used the Consumer to consume the value provided by the context in the Parent component , but it is a lengthy process and code readability is also not good and also when we have 2 provider which is one inside the other the code complexity also increases, So to solve this we have the useContext hook

Using Context with useContext hook -

ChildC.js -

import React,{useContext} from 'react';
import {UserContext} from from './App.js';

const ChildC = () => {
  const user = useContext(useContext);

  return (
    <div>
     {user}
    </div>
    )
}

export default ChildC