provider-pattern

You can eliminate prop drilling by implementing React Context providers and consumer hooks. This pattern wraps your component tree in a Provider that supplies shared values, letting deeply nested components access data directly without threading props through intermediate layers.

To avoid unnecessary re-renders with React Context, split your contexts by concern. Grouping unrelated values into separate context providers ensures that an update to one value, like auth status, does not trigger re-renders in components consuming a different value, like the UI theme.

Create a custom hook, such as useThemeContext, that wraps the useContext call to centralize access and improve safety. This custom hook can throw an error if used outside its Provider, ensuring your components always consume the context with the expected value and dataflow.

Use the React Context API for app-wide UI concerns where many components need the same value in a consistent dataflow, such as themes, authentication status, or localization. Avoid overusing context for frequently changing values to prevent widespread performance issues.

React Context replaces prop drilling specifically for shared application state like themes, auth, and locale. However, it is not ideal for highly dynamic, frequently changing state because a single context value update forces all consuming components to re-render, so split contexts by concern.