Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 15, 2021 09:00 am GMT

What is React Prop Drilling and Context API

Before starting this blog, I assume that you all should have basic knowledge about React.
In this blog we are going to learn one of the best concept of React - Prop Drilling and Context API.

react

Introduction

Prop drilling is a method where we pass a props with another component with the help of all the components that come between them.
Drill

Let us understand with a real life example.

Imagine you are in school and you are sitting on the last bench and your best friend is sitting on the first bench. Suddenly your best friend needs a pen and you have a spare pen and you want to give that pen to your best friend. For this, ask your friend sitting on your next bench to take the pen and forward it to the next one and said that repeat this until the pen reaches your friend.
Class
Here you can see how he gives a pen to his best friend with the help of another bench.
In React also if we want to pass props to any other component then we have to pass props to all the components which come between them and This whole process is known as React Prop Drilling.

Now come and understand all these things with the help of code.

import React, { useState } from "react";//FIRST COMPONENTconst LastBench = () => {  const [penName, setPenName] = useState("Blue Gel Pen");  return (    <>      <h1>Hello I am Last Bench</h1>    </>  );};//SECOND COMPONENTconst NextBench = () => {  return (    <>      <h1>Hello I am Next Bench.</h1>    </>  );};//THIRD COMPONENTconst FirstBench = () => {  return (    <>      <h1>Hey I am First Bench</h1>    </>  );};export default LastBench;

In the above code you see that we create 3 components. In the first component we declare a pen name with the help of useState hook. Now we have to pass the pen name to the last component with the help of second component

import React, { useState } from "react";//FIRST COMPONENTconst LastBench = () => {  const [penName, setPenName] = useState("Blue Gel Pen");  return (    <>      <h1>Hello I am Last Bench</h1>      <br />      <NextBench penName={penName} />    </>  );};//SECOND COMPONENTconst NextBench = ({ penName }) => {  return (    <>      <h1>Hello I am Next Bench.</h1>      <FirstBench penName={penName} />    </>  );};//THIRD COMPONENTconst FirstBench = () => {  return (    <>      <h1>Hey I am First Bench</h1>    </>  );};export default LastBench;

We call second component in first component then we pass props with penName And then we repeat all these things in second component. We call the last component, then we pass the props named penName.

import React, { useState } from "react";//FIRST COMPONENTconst LastBench = () => {  const [penName, setPenName] = useState("Blue Gel Pen");  return (    <>      <h1>Hello I am Last Bench</h1>      <br />      <NextBench penName={penName} />    </>  );};//SECOND COMPONENTconst NextBench = ({ penName }) => {  return (    <>      <h1>Hello I am Next Bench.</h1>      <FirstBench penName={penName} />    </>  );};//THIRD COMPONENTconst FirstBench = ({ penName }) => {  return (    <>      <h1>Hey I am First Bench</h1>      <h4>{penName} Here i got My Pen</h4>    </>  );};export default LastBench;

Now You can see Above code we Finally use props in last component which we declared in first component. In second component we have passed props now we can use that props in third component.

This is how React Prop Drilling Work.

But you can see in the code that the props we use in second components are useless. They don't need that props, but we pass that props for use in the third component.

It's just like you bother the next bench to pass the pen to the first bench.

To avoid all this, we use the Context API. It works like you called the teacher and requested him/her to give this pen to his friend who are sitting on the first bench.
Api

Now let's refactor the above code with the Context API and the useContext hook.

We have to create an object with React.createContext() in global. Each context object comes with a provider component that assigns a value to the context object. To add that value we have to pass "value" attribute with them

import React, { useState, useContext } from "react";//FIRST COMPONENTconst TeacherContext = React.createContext();const LastBench = () => {  const [penName, setPenName] = useState("Blue Gel Pen");  return (    <>      <h1>Hello I am Last Bench</h1>      <br />      <TeacherContext.Provider value={{ penName }}>        <NextBench />      </TeacherContext.Provider>    </>  );};//SECOND COMPONENTconst NextBench = () => {  return (    <>      <h1>Hello I am Next Bench.</h1>      <FirstBench />    </>  );};//THIRD COMPONENTconst FirstBench = () => {  return (    <>      <h1>Hey I am First Bench</h1>      <h4>Here i got My Pen</h4>    </>  );};export default LastBench;

In above code you see that we create an object named TeacherContext with the help of React.createContext() and use that object with Provider component with value attribute in first component, where we create a props with name PenName.
Now we need to pass the props to our last component directly. For that we need "useContext" keyword.

context

import React, { useState, useContext } from "react";//FIRST COMPONENTconst TeacherContext = React.createContext();const LastBench = () => {  const [penName, setPenName] = useState("Blue Gel Pen");  return (    <>      <h1>Hello I am Last Bench</h1>      <br />      <TeacherContext.Provider value={{ penName }}>        <NextBench />      </TeacherContext.Provider>    </>  );};//SECOND COMPONENTconst NextBench = () => {  return (    <>      <h1>Hello I am Next Bench.</h1>      <FirstBench />    </>  );};//THIRD COMPONENTconst FirstBench = () => {  const { penName } = useContext(TeacherContext);  return (    <>      <h1>Hey I am First Bench</h1>      <h4>{penName} Here i got My Pen</h4>    </>  );};export default LastBench;

We can see in the above code that the useContext keyword will make the first component props available to the last component and in last we use that prop in our component.

Conclusion

done
We pass the value of the first component to the last component without disturbing the other components with using useContext hook.

Let's Connect With Me

connect

Thank You for reading this blog
I hope all of you have benefited after reading this blog
Do Share it with your friends and family and get them benefit from it too
Here You Connect with me https://connect.rishavraj.codes/


Original Link: https://dev.to/iamrishavraj1/what-is-react-prop-drilling-and-context-api-cjl

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To