React Magical trick with useCotext and understand prop drilling.

This content originally appeared on DEV Community and was authored by Sayyed Asad Ullah

What is prop drilling?

Prop drilling refers to the practice of passing data or props through multiple levels of components in a component tree, even when intermediate components do not directly need that data. It occurs when a component needs to pass props down to its child components, which in turn pass them down to their child components, and so on.

This can lead to code redundancy and reduced maintainability, as props have to be passed through components that do not actually use them. Additionally, it can make it harder to understand the flow of data and can become cumbersome when dealing with deeply nested components.

Let’s demonstrate this. Code Example

// Assuming FourthComp.js is our Parent component

//FourhComp.js
import React from 'react';
import ThirdComp from './ThirdComp';

const FourthComp = () => {
  const packageData = {
    content: 'gift items',
    recipient: '3rd Component',
  };

  return <ThirdComp packageData={packageData} />;
};

export default FourthComp;

// ThirdFloor.js
import React from 'react';
import SecondComp from './SecondComp';

const ThirdComp = ({ packageData }) => {
  return <SecondComp packageData={packageData} />;
};

export default ThirdComp;

// SecondComp.js
import React from 'react';

const SecondComp = ({ packageData }) => {
  const packageDataContent = packageData.content;


  return <p>{`package content : ${packageDataContent}`}</p>;
};

export default SecondComp;

In the example above, the packages were being passed from the parent component, FourthComp, down to the ThirdComp and then to the SecondComp. However, since the SecondComp component doesn’t actually need the package data, this leads to unnecessary prop passing through intermediate components. Now these are four components as we know that we are working with many components. Let suppose if we working with hundred components and there is we need to pass data FirstComp to LastComp. So this is very ugly to pass prop first to second, second to third and so on and so far. So useContext help to us how can we pass data directly.

What is useContext hook in React.

Prop drilling can be mitigated by the use of the useContext hook along with React context API. These approaches allow data to be accessed by components directly from a centralized source without the need for prop passing through intermediate components resulting in cleaner and more efficient code. To use this hook! I was understand this topic in two stages. First where we define prop and second where we use prop.

Code Example

// PackageDataContext.js
import React, { createContext } from 'react';

const PackageDataContext = createContext();

export default PackageDataContext;

// FourthComp.js
import React from 'react';
import ThirdComp from './ThirdComp';
import PackageDataContext from './PackageDataContext';

const FourthComp = () => {
    const packageData = {
        content: 'gift items',
        recipient: '2nd Component',
    };

  return (
    <PackageDataContext.Provider value={packageData}>
      <ThirdComp/>
    </PackageDataContext.Provider>
  );
};

export default FourthComp;

// ThirdComp.js
import React from 'react';
import SecondComp from './SecondComp';

const ThirdComp = () => {
  return <SecondComp />;
};

export default ThirdComp;

// SecondComp.js
import React, { useContext } from 'react';
import PackageDataContext from './PackageDataContext';

const SecondComp = () => {
  const packageData = useContext(PackageDataContext);
  const packageDataContent = packageData.content;

  return <p>{`package content : ${packageDataContent}`}</p>;
};

export default SecondComp;

In the demonstration above, The PackageDataContext file creates a new context object, which is essentially a container for data that can be shared between components. The packageData object is passed to the packageDataContext.Provider component in the FourthComp component. The ThirdComp and SecondComp components can then use the useContext hook to access the packageData from the packageDataContext. This eliminates the need to pass the packageData down through multiple levels of components, which makes the code more readable and maintainable.

You can see more readable example via an image. Its help to understand how it work

With a solid understanding of how to utilize the useContext hook, you now have the tools to tackle complex state management challenges with confidence. Remember to apply best practices such as organizing your context providers, considering performance optimizations, and embracing modular design principles. As you continue your React journey, keep exploring and experimenting with the useContext hook, as it will undoubtedly play a pivotal role in your development toolkit.
This hook will be very help you in your coding career.
Thank for your read!
Contact Email Address
My Site Sayyed Asad Ullah

This content originally appeared on DEV Community and was authored by Sayyed Asad Ullah