Overview

Props and state are at the center of React's data flow. Props pass data into a component, while state stores data that can change over time inside a component or a feature boundary.

Detailed explanation

The simplest rule is:

• props are inputs
• state is changeable local memory

React applications are easier to understand when data flows downward from parent to child. This is often described as unidirectional data flow. A parent owns state, passes values and callbacks as props, and children report user interactions back upward.

This pattern matters because it keeps component relationships explicit. Instead of hidden dependencies, you can trace where data comes from and who is allowed to change it.

Atomic Design helps you decide where behavior belongs. Atoms usually stay simple and presentational. Molecules and organisms often receive props from a container component that owns state. DDD helps you name the data according to the domain, such as selectedProductId or cartItems, rather than generic names like value1.

When teaching this chapter, it helps to contrast a "bad" example where many components manage overlapping state with a "good" example where state has one clear owner.

Example suggestion

Build a parent CounterPanel that owns a counter state and passes the current count and button handlers down to a presentational child component. This demonstrates both state ownership and prop-based communication.

Example files

• CounterPanel.jsx - local state plus prop passing