fix(native): subscribe a component's rule effect once it commits

[YevheniiKotyrlo]

Problem

updateRules cleans the rule effect up and subscribes it to everything the rule pass reads - each class's rule list and the media, pseudo-class and container observables testRule reads through state.ruleEffectGetter - while a render runs. When React throws that render away (a class change rendered in a transition that suspends), the mounted element is left on the discarded render's rules and off the ones it still shows, so a media query on the committed class stops applying when the viewport changes.

The initializer then cleans the rule effect up, and the mount effect resubscribes it to a snapshot of what the initializer read (#466), running the pass again on a replay or when a snapshot moved.

Solution

The rule pass reads through recordReads(), the getter #485 adds, and the state it returns carries what it read (ruleReads). A layout effect makes the rule effect observe exactly those reads once the state commits: observeReads subscribes them, releases what the committed state no longer read, and answers moved when a read changed since the pass, which runs the pass again. The unmount releases both effects. A pass that keeps the same rules still returns the same state unless it read other observables. testRule takes the element's key beside the getter, since the recording getter does not identify the element.

That replaces the mount effect's catch-up: a first commit, StrictMode's replay and an <Activity> that shows the element again all observe the reads the state carries, so the dependency snapshots cleanupEffect takes, hasChangedDependencies and the committed flag go. #466's reactivity-activity.test.tsx passes unchanged.

The rule effect computes its update from the committed state and sets it as a value. An updater would be computed eagerly from the queue's lastRenderedState, which a render-phase update writes even in a render React then discards: after the discarded class change, the update was computed from the discarded state, compared equal to it and bailed out. A pass that changes nothing sets nothing, so a resize that moves no media query renders nothing.

Tests

src/__tests__/native/reactivity-lifecycle.test.tsx:

• a class change React discards leaves the committed element following its rules - on main the committed class's media query stops applying;
• a class change React discards leaves no subscription to the discarded rules - on main the discarded class's rule list keeps 1 observer;
• mounting an element runs its rule pass once, a viewport change between render and commit, a pass that reads more after a change, StrictMode, and an element Activity hid while its rules changed - these pass on main and on fix(native): subscribe a component's style effect once it commits #485 too, and hold the new path to its behaviour;
• fix(native): subscribe a component's style effect once it commits #485's viewport change that moves no rule, on an element mounted once, after StrictMode's replay and after <Activity> showed it again, holds this path too: without fix(native): subscribe a component's style effect once it commits #485's getOrInsert the last two render here as well.

Verification

On Ubuntu with the workflow's steps - build, lint, typecheck, yarn test, node --test node/__tests__/*.mjs, both library builds, the web export, the unstaged-changes checks and commitlint - everything passes.

Not run: the iOS and Android example builds.

Merge order

• This builds on fix(native): subscribe a component's style effect once it commits #485, whose recording getter and versioned observables the rule pass reads through, so fix(native): subscribe a component's style effect once it commits #485 lands first and this carries its commits until it does.

It also shares lines with #412 (native/reactivity.ts), #434 (native/react/useNativeCss.ts, native/reactivity.ts), #436 (__tests__/native/reactivity-dependencies.test.tsx, native/react/useNativeCss.ts, native/reactivity.ts, native/styles/index.ts), #463 (native/react/rules.ts), #482 (native/react/rules.ts), #484 (native/react/rules.ts, native/react/useNativeCss.ts); whichever lands second rebases.