Avoiding prop drilling in React

Introduction

Prop drilling means passing data through many layers of components just to reach the one that needs it. Avoiding it makes your code cleaner and easier to manage.

You have deeply nested components and need to share data between distant components.

You want to avoid passing props through components that don't use the data themselves.

You want to make your components more reusable and less dependent on parent props.

You want to simplify your component tree and reduce clutter in props.

You want to share state or functions across many components without extra props.

Syntax

React

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

function Parent() {
  const [value, setValue] = useState('Hello');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('Hi!')}>Change</button>
    </div>
  );
}

createContext creates a context object to hold shared data.

useContext lets components access the shared data without passing props.

Examples

This example shares a theme value without passing it through Toolbar explicitly.

React

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button>{theme}</button>;
}

User data is shared directly to Profile without prop drilling.

React

import React, { createContext, useContext } from 'react';

const UserContext = createContext(null);

function App() {
  const user = { name: 'Anna' };

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);
  return <h1>Hello, {user.name}</h1>;
}

Sample Program

This React app shares the language state across components without passing props through Page. Header shows the current language, and Content has buttons to change it.

React

import React, { createContext, useContext, useState } from 'react';

const LanguageContext = createContext();

function App() {
  const [language, setLanguage] = useState('English');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      <Page />
    </LanguageContext.Provider>
  );
}

function Page() {
  return (
    <div>
      <Header />
      <Content />
    </div>
  );
}

function Header() {
  const { language } = useContext(LanguageContext);
  return <h1>Current Language: {language}</h1>;
}

function Content() {
  const { setLanguage } = useContext(LanguageContext);
  return (
    <div>
      <button onClick={() => setLanguage('Spanish')}>Spanish</button>
      <button onClick={() => setLanguage('French')}>French</button>
    </div>
  );
}

export default App;

Important Notes

Context is great for avoiding prop drilling but avoid overusing it for every small piece of data.

Remember to wrap components that need shared data inside the Provider.

Using context makes your app easier to maintain and understand.

Summary

Prop drilling means passing props through many layers unnecessarily.

React Context helps share data directly to components that need it.

Use createContext and useContext to avoid prop drilling and keep code clean.