state-lifting

Prop drilling occurs when state passes through many intermediate components that don't use it. Lift state to the closest common ancestor of components that need it, then pass data directly to consumers. For deep hierarchies, use React Context API or composition patterns like render props to avoid intermediate prop chains.

Place state as close as possible to where it's used—local to a single component if only that component needs it, lifted to a common parent for shared state, or in Context for global data. Colocating state reduces re-renders, improves performance, and makes dependencies explicit.

Use Context API when state is consumed by many distant descendants and lifting it would create prop drilling across many intermediate levels. Context works best for global app state like themes or auth. For frequently changing state, pair Context with performance optimizations like memoization to prevent excessive re-renders.

Analyze your form state to determine if it belongs with the root form component or in a shared Context. Use composition patterns to group related fields, separate state and dispatch logic, and apply render props or compound components to pass handlers without intermediate props.

Local state lives in a single component and is never shared. Lifted state moves to a common ancestor when multiple children need it, keeping data flow explicit. Context API stores global state accessible anywhere, bypassing intermediate components entirely—suited for theme, auth, or feature flags.

Yes. Composition and render props reduce prop drilling by letting parent components control rendering logic instead of passing props through intermediate layers. These patterns work alongside lifted state and Context to create flexible, maintainable state management without explicit prop chains.