What is unidirectional data flow in React?

Question

Accepted Answer

Unidirectional data flow means data in React moves one way only — from parent components down to children via props . Children cannot directly modify their parent's data; they communicate back by calling callbacks the parent passed in. Predictable — you can trace where any piece of data came from by following the tree upward. Easier debugging — only one place can change a piece of state; bugs are easier to localize. Source of truth — state lives at one level; lower components are pure functions of props. Callbacks bubble up — child events trigger parent-supplied functions; the parent decides what to update. Lift state up — if siblings need shared data, hoist it to the closest common ancestor. Contrast with two-way binding — AngularJS-style two-way binding lets children mutate parent data directly; harder to reason about at scale. Explain the flow: state -> props -> render -> callback -> state update -> re-render. Compare with two-way binding to show you understand the trade-off: predictability vs convenience.