Store update that suspends behind an unchanged memo is lost: the boundary retry bails out and the UI never updates (0.2.4)

Abierto
  • ¿Algo no está bien?
#130 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
18/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Start with the suspense path in packages/redact/src/dom/features/suspense/full.ts, around realHandleSuspended, where RenderSuspenseCapture is thrown without the thenable. Then read renderUpdates and the memo bailout in packages/redact/src/dom/features/memo/full.ts to see why a pending useSyncExternalStore subscriber is skipped on retry. Reproduce with the snippet in the issue, using the ?control flag as the baseline. Done means the store update appears after the promise resolves under memo, matching React 19.3.1.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

🤖 Issue drafted with Claude Code. Reproduced and verified before posting.

Version: @tanstack/redact 0.2.4 (also 0.2.3). Baseline: react/react-dom 19.3.1. Chromium, production build with vite 8.3.5, @vitejs/plugin-react 6.2.1 and the redact() plugin.

A component subscribed with useSyncExternalStore sits behind a memo wrapper with unchanged props. When the store changes and the component suspends, Redact never shows the new content: the screen keeps the old UI after the promise has resolved, with no error. React shows the new content once the promise resolves.

Reproduction

Vite app with react() + redact(), then call go() from the console:

import { Suspense, memo, use, useSyncExternalStore } from "react"
import { createRoot } from "react-dom/client"

let user = null
const listeners = new Set()
const subscribe = (l) => (listeners.add(l), () => listeners.delete(l))
const getUser = () => user
let orders
const loadOrders = () => (orders ??= new Promise((resolve) => setTimeout(() => resolve("orders"), 100)))

function Account() {
  const current = useSyncExternalStore(subscribe, getUser)
  return <p>{current ? `${current}: ${use(loadOrders())}` : "logged out"}</p>
}
const Wrapper = memo(() => <Account />)
const control = new URLSearchParams(location.search).has("control")
createRoot(document.getElementById("root")).render(
  <Suspense fallback="loading">{control ? <Account /> : <Wrapper />}</Suspense>,
)

window.go = () => { user = "alice"; listeners.forEach((l) => l()) }

Result 2 s after go(), 10 runs each:

React 19.3.1 Redact 0.2.4
As written (behind memo) 10/10 alice: orders 10/10 logged out
?control (no memo) 10/10 alice: orders 10/10 alice: orders

The Redact page still shows logged out 11 s after go(), so the update is lost, not delayed.

Real-world impact

On a TanStack Start storefront running 0.2.3, a successful sign-up (a useActionState action, then queryClient.invalidateQueries() and router.invalidate()) left the sign-up form on screen. The session was created, and a reload showed the account page. With React the account page appears right away.

Likely cause

Tracing the repro:

  1. The store notification schedules Account, which renders on its own in renderUpdates and suspends.
  2. realHandleSuspended throws RenderSuspenseCapture(boundary), which carries the boundary but not the thenable.
  3. renderUpdates rewinds and reschedules the boundary. Account's pending flag was cleared by rerenderFiber before it suspended.
  4. The boundary re-renders its children. The memo sees equal props and bails out (memo/full.ts#L21-L36), so Account is not rendered, nothing suspends, and nothing waits for the promise.

The update is dropped. In React it stays pending on the fiber until it commits, and the boundary retries when the promise resolves.

The React 19.3 audit already fixed the context version of this ("equal-prop memo wrappers do not need to render to reach their consumers. Suspended primary content can retry when its context changes"). External-store subscribers seem to need the same treatment.

Restoring fiber.g = true after the rewind was not enough in my test on 0.2.4, because the boundary's retry still stops at the memo. The fix probably needs the retry to reach pending descendants, like the context propagation path does.

Related: #129, where a pending subscriber under the same suspended boundary renders with rewound props.

Lenguaje dominante
TypeScript
Estrellas
537
Forks
22
Merge medio
2 h 19 min
PR fusionados (30 d)
24

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/redact

Todos los issues de TanStack/redact

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.