DEV Community

Cover image for React Hooks - useContext
Mysterio
Mysterio

Posted on

React Hooks - useContext

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

Image description

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

As you can see we have simply passed our context in useContext hook , stored in a variable named user and directly rendered in the jsx using the variable name user. Simple isn't it?

Both the method produce the same result.

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Discussion (0)