Learning on Web Dev Open is free for all.

Framework Internals > Components as contractsProps down, events up, and where that stops working
Phase 04Components as contracts192 of 434

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.

Concept13 minAI pair

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
Ask the community

Loading…