using-context-api

Avoid prop drilling by using React's Context API with the use() hook. Create a context, wrap your component tree with a provider, and access the context conditionally inside components using use() instead of passing props through multiple levels.

The use() hook lets you read context inside conditional blocks without breaking the rules of hooks. Call use(YourContext) inside an if statement or other conditional logic within your component to retrieve context values when needed.

Conditional context access using use() retrieves values directly where needed without passing them through intermediate components. Prop drilling requires passing props through every component in the tree, creating unnecessary dependencies and making refactoring harder.

Split your contexts by concern—separate UserContext from ThemeContext, for example—so components only subscribe to the values they actually need. This isolates updates and prevents the entire tree from re-rendering when unrelated context values change.

Yes. React 19 supports the use() hook, which enables conditional context access. Wrap your app with providers, create contexts with createContext, and call use(YourContext) inside conditionals to safely read context values where needed.

Split contexts when different parts of your component tree need different values. Splitting prevents components subscribing to one value from re-rendering when unrelated values in a combined context change, improving performance and keeping concerns isolated.