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

Ouverte
  • Quelque chose ne va pas ?
#130 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@tannerlinsley y travaille déjà.

Depuis le 2/11/2026.

  • #133 par @tannerlinsley — ouverte

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
18/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript
Domaine
frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

🤖 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.

Langage dominant
TypeScript
Étoiles
565
Forks
27
Merge moyen
10 h 27 min
PR mergées (30 j)
40

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/redact

Toutes les issues de TanStack/redact

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.