Prop Drilling and useContext()

What actually prop drilling is ?

It is a process when we pass the data /value form parent to children in React Components.

In a very primitive way the value can be passed in hierarchical manner with the step by step approach. Let’s explore some code towards it ;

import “./styles.css”;

import { ComponentA } from “./Component-A”;

const App = () => {

return (

<div className=”App”>

<ComponentA />

</div>

);

};

export default App;

import { ComponentB } from “./Component-B”;

export const ComponentA = () => <ComponentB />;

import { ComponentC } from “./Component-C”;

export const ComponentB = () => <ComponentC />;

export const ComponentC = () => <h1> My name is Sandeep </h1>;

Link for the code : https://codesandbox.io/s/serverless-bird-991x0?file=/src/Component-C.js

Hence, what we can conclude from the code is that the data rendered in Component-C is rendered due to hierarchical approach of rendering the code.

Now we will pass on value to be rendered to Component-C from parent component :

import { ComponentB } from “./Component-B”;

export const ComponentA = () => <ComponentB name={“Sandeep”}/>;

import { ComponentC } from “./Component-C”;

export const ComponentB = () => <ComponentC />;

export const ComponentC = ({name}) => <h1> My name is {name}</h1>;

Link for the code : https://codesandbox.io/s/stoic-chatterjee-uhzpg?file=/src/Component-C.js

Here, we can conclude that the prop name can’t be directly access by the child Component-C.

Now we will move towards the solution of the problem occurred :

import { ComponentB } from “./Component-B”;

export const ComponentA = () => <ComponentB name={“Sandeep”}/>;

import { ComponentC } from “./Component-C”;

export const ComponentB = ({ name }) => <ComponentC name={name} />;

export const ComponentC = ({name}) => <h1> My name is {name}</h1>;

Hence; we can observe that each and every component in order need to access the prop name so that it can be provided to Component-C. Is this a prior when we have hundreds of Components and the base Component need to access value from parent one, obviously no.

How useContext() hook made our life easy ?

What things are needed to pass the value from higher hierarchy to base components ;

  • context : creating a context so that react can be aware of passing the value
  • provider : for serving the value / for passing the value
  • consumer : where the values are being used

import { createContext } from “react”;

import { ComponentB } from “./Component-B”;

const UserContext = createContext();

export const ComponentA = () => {

return (

<>

<UserContext.Provider value=”Sandeep”>

<ComponentB />

</UserContext.Provider>

</>

);

};

export { UserContext };

import { ComponentC } from “./Component-C”;

export const ComponentB = () => <ComponentC />;

import { useContext } from “react”;

import { UserContext } from “./Component-A”;

export const ComponentC = () => {

const context = useContext(UserContext);

return <h1> My name is {context} </h1>;

};

Link for the code : https://codesandbox.io/s/pensive-star-zpbmf?file=/src/Component-C.js:0-204

Hence, we can see that props from Component-A can directly be provided to Component-C without any intervention of the intermediate Components.

documenting my thoughts