Props, State & One-Way Data Flow

Props are inputs supplied by a parent. State is data owned by a component that can change over time. A component receives a new render whenever its relevant inputs or state change.

React encourages one-way data flow: data generally moves from parent to child through props. When a child needs to cause a parent-owned state change, the parent passes a callback. This makes ownership explicit and helps prevent multiple components from independently maintaining contradictory copies of the same data.

A common design mistake is duplicating derived data in state. If filteredProducts can be calculated from products and query, storing both creates synchronization problems. Store the source of truth and derive the rest during rendering when the calculation is cheap.

One-Way Data Flow

Lifting state up

function SearchPage() {
  const [query, setQuery] = useState("");

  return (
    <>
      <SearchBox query={query} onQueryChange={setQuery} />
      <Results query={query} />
    </>
  );
}

💡 The parent owns the shared query because both SearchBox and Results need the same source of truth.

Key Takeaways

Props flow downward; events/callbacks communicate upward.
Keep one source of truth for shared state.
Prefer deriving data over duplicating it in state.

Knowledge Check

Where should shared state usually live?

Props, State & One-Way Data Flow

STAY UPDATED WITH BYTES!