Learn React context API | React Props Drilling

Why we use React context API?

First of all we will understand the problem and then will understand how react context api solve this issue.

Problem (What is props drilling)

Sometime we need to transfer data from one component to another.

So, if our hierarchy is only two levels deep, we can easily transfer data from parent to child.

However, if we have a nth level hierarchy and need to send data to a nth child, we will send data From parent to first level child, then first level to second level child, then second level to third level child, then last child or nth child, this is called props drilling it will become not only complex, but extremely complex.

Context API is used to avoid from props drilling. We stored data on a global level with the help of the context API, which we can easily access in every component of the project. and Redux also offer the same solution.

What is React Context API ?

context api is built-in api that was introduced in 16.3 version of React. it is used to pass data from one component to other. now we have

no need to make the chain of passing props from parent to child then child to super child then super child to next child (props drilling), with context api we can store Data on Global place and can easily access in any component where we want.

Redux vs Context

React Redux

React Redux is an external library.
we Need to install Redux to use in our React Project
if You will use Redux your all component will be under the redux
we can use Redux with both class and functional component

React Context Api

Context API in inbuilt in React
We have no need to install it.
You no need to take all project/ component under the context, You keep all project ,10 component, 20 component or as per your requirement its totally up to you.
we can use context with both class and functional component.

Code of Context api Example

Now I am going to solve example according to above hierarchy and I will use Data in Super Child

(last component)

First I Created Parent Component

import React, { createContext } from 'react' //import createContext from react
import Child from "./Child";

const Students=["Rizwan","Ahsan","Zaman","Hamza","Fizan"]  
// we will use this Student array in Super Child

export const GlobalData = createContext();
export default function Parent() {
    return (
        /* Wrap child Components in Provider Wrapper and set
           the value that u want to receive in any component
         */
        <GlobalData.Provider value={Students}>
            <div>
                <h1>i am parent Component</h1>
                <Child /> 
            </div>
        </GlobalData.Provider>
    )
}

Now I am creating Child component

import React from 'react'
import SuperChild from "./SuperChild"

export default function Child() {
    return (
        <div>
            <h2> I am Child Component</h2>
            <SuperChild />
        </div>
    )
}

Now I am creating Super Child component

import React, { useContext } from 'react'//import useContext from React
//import GlobalData that  created and exported in Parent Component
import { GlobalData } from"./Parent"

export default function SuperChild() {
    const Data = useContext(GlobalData)// pass Global Data iin useContext function
    return (
        <div>
            <h3>i am SuperChild Component </h3>
        
            {Data ? Data.map((item, index) => {
               return (<p key={index}>{item}</p>)
            }) : "Not Found"}
        </div>
    )
}