S5.02Lab · crystalline↑ Ascend to FIRS

State propagation

This is the FIRS replica's own store, wired to six components that each read a few fields. Change the role, period, state or unit and every component that commits flashes and counts.

Switch the subscription strategy to see the same action wake two components or all six. The FIRS dashboards kept their filters in React Context, so the third strategy is the shape the production code took.

Starting as a National user. Arrive from the FIRS case study to carry over the role you picked there.

subscription strategy
useStore(store, useShallow(s => ({ period: s.period })))

Each component subscribes to the fields it reads. A change wakes only the components that read the changed field.

role
period
coverage (filtered by role)

Changing the state also changes its unit, so that one action touches two fields. Watch which nodes wake up.

Store · createFirsStore()the replica's own store
{"role":"NATIONAL_USER", "dashboard":"national", "period":"MONTH", "state":"LA", "unit":"U7", "coverage":"NATIONAL"}
Sidebar0commits
reads: role, dashboardselector + shallow comparerole=NATIONAL_USER · dashboard=national
PeriodFilter0commits
reads: periodselector + shallow compareperiod=MONTH
KpiStrip0commits
reads: state, periodselector + shallow comparestate=LA · period=MONTH
TaxMap0commits
reads: unit, periodselector + shallow compareunit=U7 · period=MONTH
ReportScope0commits
reads: role, coverageselector + shallow comparerole=NATIONAL_USER · coverage=NATIONAL
OfficeTable0commits
reads: stateselector + shallow comparestate=LA

Commit log · measured

Make a change on the left. Each action is listed with the components that actually committed.

Reading it

What the numbers are

Commits are counted from a layout effect with no dependency list, which runs once after every commit in which that component rendered. The count is written straight to the DOM, so displaying it causes no render of its own.

The log lists the components that committed between an action and the next task, after React has flushed the update. If a component did not commit, it is not listed.

Context is not wrong. It is simple and it was enough for a filter bar and a few widgets. The cost is breadth: every consumer re-renders on every change, and that grows as a dashboard grows. Selectors trade a little wiring for precision.

Render durations are not shown. React reports them only in its profiling build, which this production site does not ship.