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

Aberta
  • Algo errado?
#144 1 comentário 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
55/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
react, typescript, vite
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
537
Forks
22
Merge médio
10h 27min
PRs com merge (30d)
40

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/redact

Todas as issues de TanStack/redact

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.