DEV Community

Cover image for Solving prop drilling in React with ContextAPI
Gustavo
Gustavo

Posted on • Updated on

Solving prop drilling in React with ContextAPI

Prop Drilling

The most simple way to pass data between components is using props, but it can lead to a messy code and probably making it unmaintainable, specially with prop drilling, where a props have to be passed to multiple layers of components:

Five blue blocks stacked vertically and with arrows representing props being passed to the next block below

Solving this (and maybe others) issue(s) with Context

| Context lets you write components that “adapt to their surroundings and display themselves differently depending on where (or, in other words, in which context) they are being rendered. - react.dev

Basically, Context enables us to pass data through the component tree without having to pass props down manually at every level (prop drilling for example).

How to use it?

  • First, we need to create a Context using React.createContext and then we can use it in our components
  import { createContext } from 'react';

  export const MyContext = createContext()

  // If you'se using TypeScript, you can also pass a default value to the context with the type of the value you're going to pass
  export const MyContext = createContext({} as MyContextType)
Enter fullscreen mode Exit fullscreen mode
  • then we need to wrap all the components we want to use the context in a Provider component
  import { MyContext } from './MyContext';

  export function App() {
    return (
      <MyContext.Provider value={/* value of your context */}>
        <ComponentA />
        <ComponentB />
        <ComponentC />
      </MyContext.Provider>
    );
  }
Enter fullscreen mode Exit fullscreen mode
  • now you can access the data from your context in any component that is wrapped in the Provider component using useContext:
  import { MyContext } from './MyContext';

  export function ComponentA() {
    const value = useContext(MyContext);
    return <div>{value}</div>;
  }
Enter fullscreen mode Exit fullscreen mode

Conclusion

  • That's it! I honestly believe that the best way to learn anything is trying for yourself, so I encourage you to try to create a simple counter app using Context.
  • Also, if you want to see it in action, check this simple timer app on my Github
    • In this app I used Context to share the state of the timer between the Home, Countdown and NewCycleForm components

Reference

Top comments (1)

Collapse
 
lianapolar profile image
LiHypnos

Muito interessante! Grato pelo compartilhamento de informação :)