DEV Community

Devangi Bhutiya
Devangi Bhutiya

Posted on

2

Problem solving for props drilling using React context api

Here, we are little bit understand of react context api and how to resolve issue of props drilling.

React hooks provide a concept called context.

Basically Context api allows us to pass down and use (consume) data in whatever component we need in our React app without using props.

Props drilling:

React context helps us avoid the problem of props drilling.

Props drilling is a term to describe when you pass props down multiple levels to a nested component, through components that don't need it.
For example, we have access to name data that we want to pass as a prop to all of our app's components.

export default function App({ name }) {
  return (
    <>
      <Header name={name} />
      <Main name={name} />
      <Sidebar name={name} />
      <Footer name={name} />
    </>
  );
}

function Header({ name }) {
  return (
    <>
      <User name={name} />
      <Login name={name} />
      <Menu name={name} />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

What is the issue??
The issue is that we are drilling the name prop through multiple components that don't immediately need it.

The Header component doesn't need name other than to pass it down to its child component.

How i use React context to avoid the issue of props drilling.

Basically, React context is an api that introduced from React version 16.

Steps to using React context:

  1. Create context using the createContext method.
  2. Take your created context and wrap the context provider around your component tree.
  3. Put any value you like on your context provider using the value prop.
  4. Read that value within any component by using the context consumer.

For example, in our App, pass down our own name using Context and read it in a nested component:User.

import React from 'react';

export const FormContext = React.createContext();

export default function App() {
  return (
    <FormContext.Provider value="DevangiBhutiya">
      <User />
    </FormContext.Provider>
  )
}

function User() {
  return (
    <FormContext.Consumer>
      {value => <h1>{value}</h1>} 
      {/* prints: DevangiBhutiya */}
    </FormContext.Consumer>
  )
}
Enter fullscreen mode Exit fullscreen mode

Now, we are understand step-by-step above example:

  1. Above our App component, we are creating context with React.createContext() and putting the result in a variable, FormContext. In almost every case, you will want to export it as we are doing here because your component will be in another file. Note that we can pass an initial value to our value prop when we call React.createContext().

  2. In our App component, we are using FormContext. Specifically FormContext.Provider. The created context is an object with two properties: Provider and Consumer, both of which are components. To pass our value down to every component in our App, we wrap our Provider component around it (in this case, User).

  3. On FormContext.Provider, we put the value that we want to pass down our entire component tree. We set that equal to the value prop to do so. In this case, it is our name (here, DevangiBhutiya).

  4. In User, or wherever we want to consume (or use) what was provided on our context, we use the consumer component: FormContext.Consumer. To use our passed down value, we use what is called the render props pattern. It is just a function that the consumer component gives us as a prop. And in the return of that function, we can return and use value.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay