CodeParkProp drilling is passing a prop through several components that do not use it, only so a deeply nested child can receive it. Context solves it by letting a parent provide a value to its whole subtree directly.
Drilling makes components noisy and refactoring painful. Every layer in between must accept and pass on a prop it does not care about.
Context works in three steps:
- Create it with
createContext(defaultValue). - Wrap the tree in a provider. In React 19 you can render
<ThemeContext value={theme}>directly. - Read it anywhere below with
useContext(ThemeContext).
A component reads the value from the nearest provider above it.
Context is a good fit for things many components need, like theme, current user, locale or routing. Don't use it as the first fix for drilling. First try passing props explicitly, or composition. Composition means passing JSX as children, which often removes the layers in between.
- Prop drilling means passing props through components that do not use them.
- Context provides a value to an entire subtree.
- You use
createContext, a provider, anduseContext. - A component reads the nearest provider. Without one, it gets the default value.
- Try composition with
childrenbefore reaching for context.