React Rx Hook Audit

Refactor

Reproduce the useValuePreview shape:

1. Name the identity inputs: the inputs whose change must render initialValue again. In useValuePreview these are enabled, schemaType and the previewed document id. Everything else is a streamed input.

2. Put the streamed inputs in one typed record (PreviewInputs) and useMemo it on its fields. Resolve overrides first, so the record carries the effective perspective and variant rather than both the caller's and the context's; a context change the caller overrides then never reaches the stream. One record, not one subject per input: two fields that change in the same render arrive together, so switchMap never subscribes an intermediate source.

3. Hold the record in a BehaviorSubject fed from a useEffect. Replace the subject whenever any identity input changes, enabled included, seeded with the current render's inputs, with the "adjust state during render" pattern. A replacement observable must never read the inputs of an earlier render, and react-rx 6 subscribed it during render. This is useInputsSubject in useValuePreview.ts:

   function useInputsSubject(
     enabled: boolean,
     schemaType: SchemaType | undefined,
     inputs: PreviewInputs,
   ): BehaviorSubject<PreviewInputs> {
     const documentKey = getPreviewDocumentKey(inputs.value)
     const [current, setCurrent] = useState(() => ({
       enabled,
       schemaType,
       documentKey,
       inputs$: new BehaviorSubject(inputs),
     }))
   
     let {inputs$} = current
     if (
       current.enabled !== enabled ||
       current.schemaType !== schemaType ||
       current.documentKey !== documentKey
     ) {
       inputs$ = new BehaviorSubject(inputs)
       setCurrent({enabled, schemaType, documentKey, inputs$})
     }
   
     useEffect(() => {
       inputs$.next(inputs)
     }, [inputs$, inputs])
   
     return inputs$
   }

4. Build the observable in a useMemo whose dependencies are the identity inputs, the subject and the store function only. Pipe inputs$ through distinctUntilChanged(dequal), switchMap into the source, then distinctUntilChanged with an output comparator (isSameState in useValuePreview.ts) that compares the value with react-fast-compare and errors by identity.

5. Hoist constant observables to module scope, as in IDLE_STATE_OBSERVABLE = of(IDLE_STATE), so returning one from the memo keeps a single identity and store.

6. Keep useSyncObservable(observable, INITIAL_STATE) when consumers read the first frame synchronously. Use useObservable otherwise.

Cost the pattern accepts: a change that alters the output takes one extra render (render with the previous snapshot, the effect pushes, the store notifies, render again). A change that leaves the output equal costs no extra render.

Do not apply the pattern when the observable has no value-shaped inputs (ids, strings and stores only) or when consumers need the render-time synchronous update on every change. Do not reach for the deprecated useUnique to stabilize an input.

Test

Copy the harness pattern from useValuePreview.test.tsx and assert on literal frames and counts:

• A Harness component pushes every rendered frame ({isLoading, title, error}) into an array.
• The mocked source is an Observable that counts subscriptions.active and subscriptions.total in its subscribe function and teardown.
• flush() awaits one macrotask inside act, so react-rx's share({resetOnRefCountZero: () => timer(0, asapScheduler)}) releases the old source before you assert counts.

Write these three tests. They catch the regressions the refactor guards against:

1. Same target, edited twice: frames.slice(settled).filter((frame) => frame.isLoading) is [] and, after flush(), subscriptions is {active: 1, total: 3}.
2. Equal inputs rebuilt every render (a new [] prop or an equal object): {active: 1, total: 1}.
3. Identity change (another document or schema type): every frame since the switch is the loading frame, the previous target's title never renders, then the new title renders.

At this commit useValuePreview.test.tsx (23 tests) passes on the installed react-rx 7.0.0, and main's previous hook fails 7 of them there: loading frames on same-document edits and perspective changes, a second render for an edit that leaves the preview unchanged, three previews for equal inline inputs, a resubscribe on an overridden context change, and StrictMode. To see which of those the react-rx 6 warm-up masked, run the file against the 6.0.1 dist. The installed dist files are hard links into the pnpm store, so never write into them in place; unlink first:

RX=packages/sanity/node_modules/react-rx/dist
cp -a $RX /tmp/react-rx7-dist
(cd /tmp && npm pack react-rx@6.0.1 --silent && tar xzf react-rx-6.0.1.tgz)
rm $RX/index.js $RX/index.d.ts && cp /tmp/package/dist/index.js /tmp/package/dist/index.d.ts $RX/
pnpm vitest run --project=sanity <the test file>
rm $RX/index.js $RX/index.d.ts && cp /tmp/react-rx7-dist/index.js /tmp/react-rx7-dist/index.d.ts $RX/