Props down, events up, and where that stops working
The default data flow is one directional and it is right until you are passing a callback through four layers that do not care.
Data goes down as props, changes go up as callbacks. It is verbose and it is legible: given a value on screen you can walk up and find where it came from, which is worth more than it sounds when you are new to a codebase. Three levels of drilling is not a problem, it is just typing.
It becomes a problem when the intermediate components have no interest in what they are passing, so a change to the leaf requires editing four files that do not care. That is the signal, not the depth. The instinct is to reach for context; the better first move is usually composition: pass the finished element down as children so the intermediate layers hold something opaque and never mention its props.
Context is for genuinely ambient things: theme, locale, the current user, a store handle. It is a poor fit for values that change often, because every consumer re-renders on every change with no way to subscribe to part of it. That limitation is the reason state libraries exist, and it is worth knowing before you reach for context to solve a drilling problem it does not really solve.
You should now be able to
- Recognise prop drilling and judge whether it is actually a problem
- Choose between lifting state, context and composition
Loading…