Why: the goal or problem

Several controls reflect the same changing data. Updating each label separately risks showing contradictory states.

How: work toward a solution

Two Field notes cards start unsaved. Save on A17 changes only its label to Saved; B04 stays unsaved. Saving B04 changes the shared count from one to two. Repeating Save leaves two records: each ID counts once. The diagram traces event, state update, and rendering. Reset or reload clears both cards. There is no persistent storage here.

React: concept simulation

Concept simulation

React

Save either card. Each ID counts once; the other card stays unchanged.

Shared owner · saved IDs

Title props ↓ · state belongs to each ID

A17

Field notes

B04

Field notes

  1. Save event
  2. State setter requests rendering
  3. Render labels and total

Saved count: 0 / 2

A17: 0 · B04: 0

Waiting

A fictional demo within this article. Reset or reload restores its initial state.

What: the concept

React components receive props and describe UI from state. A state setter requests rendering; changing an ordinary variable does not provide that mechanism.

Add persistence separately.

Source