useSyncExternalStore does not bail out when the snapshot returns to the committed value: inline ref writing to a store loops forever (0.2.6)

Offen
  • Stimmt etwas nicht?
#144 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
55/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript, vite
Bereich
frontend

Rechercherichtung

Start with the reproduction in app.jsx and build it with and without the Redact plugin using vite build. Trace how Redact handles useSyncExternalStore when a render returns to the committed snapshot; done means the inline ref no longer causes repeated commits and the render bails out when the snapshot is unchanged.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

What happens

A component that reads a value with useSyncExternalStore and passes an inline ref callback that writes its node into the same store never settles under Redact. On every commit the old ref is called with null and the new ref with the node, so the store goes node → null → node and ends where it started. React re-renders, sees the snapshot equals the committed value, bails out (the new output and its new inline ref are discarded) and stops. Redact re-renders, commits the new inline ref, and the cycle repeats.

  • React 19: 3 renders, input mounted, no errors.
  • Redact 0.2.6, production build, Chromium 151 (Playwright, bundled headless): the main thread never yields; page.goto times out after 30 s.
  • Redact 0.2.6 in Vitest/jsdom (dev build): flushPending exceeded 50 iterations — suspected infinite update loop.

Inline ref callbacks are allowed in React, and this store-plus-ref shape is common in component libraries. We first hit it through Base UI's Combobox input (its setInputElement writes the input into the component store), where a parent passed an inline ref.

Reproduction

index.html

<!doctype html><html><body><div id="root"></div><script type="module" src="./app.jsx"></script></body></html>

app.jsx

import { useSyncExternalStore } from 'react';
import { createRoot } from 'react-dom/client';

let value = null;
const listeners = new Set();
window.renders = 0;
const store = {
  get: () => value,
  set(next) { if (next !== value) { value = next; listeners.forEach((l) => l()); } },
  subscribe(l) { listeners.add(l); return () => listeners.delete(l); },
};

function Field() {
  window.renders++;
  const el = useSyncExternalStore(store.subscribe, store.get);
  return <input data-has-el={String(el != null)} ref={(node) => store.set(node)} />;
}

createRoot(document.getElementById('root')).render(<Field />);

Build with vite build with and without the redact() plugin (plus @vitejs/plugin-react) and open the result.

Expected

Like React: when a useSyncExternalStore re-render produces a snapshot equal to the one already committed (Object.is) and nothing else changed, bail out of that render instead of committing it.

Workaround on our side: give the input a stable useCallback ref.

Vorherrschende Sprache
TypeScript
Sterne
565
Forks
27
Ø Merge
10 Std. 27 Min.
Gemergte PRs (30 T.)
40

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/redact

Alle Issues in TanStack/redact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.