Prop Drilling
Passing data down through layers of components that don't care about it, just so one component at the bottom can use it.
See it
What it is
The parent has the data, a grandchild needs it, so every component in between takes a prop it never reads and forwards it along. Two or three levels of this is fine and honest: you can trace the data by eye. It earns the name (and the eye-roll) around four or five layers, or when adding one field means editing six files that don't care.
Fixes, cheapest first. Move the state down closer to where it's actually used. Then composition: hand the finished element in as children so the middle layers never see the data at all, as in Layout wrapping a pre-built Profile instead of taking a user prop. Then Context for a genuine subtree-wide value. Then a store, last.
Gotcha: Context is not the automatic cure. Every consumer re-renders whenever the context value changes, and a fresh object literal passed as that value changes identity on every single parent render. Trading a boring, traceable prop chain for a stealth re-render cascade is a downgrade, not a refactor.
Ask AI for it
Refactor this component tree to kill the prop drilling. First try composition: hoist the element that actually consumes the data up to where the data lives and pass it down as children, so the intermediate components stop receiving the prop entirely. For values genuinely needed across the whole subtree, add a typed React Context with a provider and a useX() hook that throws a clear error when called outside the provider, and wrap the context value in useMemo so consumers don't re-render on every parent render. Show before and after, and name which layers stopped taking props.