Prop drilling in React Js

Prop drilling in React Js

In this post, we will discuss about Prop drilling in React Js. In order to understand useContext hooks in react js, first we should know Prop drilling.

Basically, props are passed to component via HTML attribute. Passing props within a tree of a components is known to be Prop drilling.

Prop drilling

The above image describe the problem of prop drilling. The top component "ComponentA" and bottom component "ComponentD" are accessing the actual state but both middle components "ComponentB" and "ComponentC" are just passing state. This is actually problem of Prop-Drilling.

Sample code:

import React, { useState } from 'react';

export default function App() {

  return (

    <>

      <h1>Prop Drilling</h1>

      <ComponentA />

    </>

  );

}

function ComponentA() {

  const [name, setName] = useState('vijay');

  return <ComponentB name={name} />;

}

function ComponentB({ name }) {

  return <ComponentC name={name} />;

}

function ComponentC({ name }) {

  return <ComponentD name={name} />;

}

function ComponentD({ name }) {

  return <h2>{`Hello ${name}`}</h2>;

}

How to avoid prop drilling?

It is clear that there should be a global value which must be accessed wherever we wanted. React provide solution to this problem - Context API.

Context API helps us to provide and consume the context.

We will discuss Context API in next post.

 

Happy Learning!! Happy Coding!!