fix: react #467 crash in useValueRef on suspense replay

[guanbinrui]

Problem

Production crash (v2.37.0) on the Mask Network entrance in the X sidebar:

Error: Minified React error #467 (Update hook called on initial render)
    at updateSyncExternalStore
    at useValueRef
    at useGuideStepState
    at ToolboxHintForWallet
    at renderWithHooksAgain / replaySuspendedUnitOfWork

Root cause

useValueRef called use(readyPromise) only while !ref.ready. useGuideStepState reads two refs in a row. If the second ref isn't ready, the component suspends. When React replays it after the promise resolves, ready is already true, so use is skipped. React only switches from the update dispatcher back to the mount dispatcher inside use, so the next useSyncExternalStore hits updateWorkInProgressHook with no current fiber and throws #467.

Fix

• useValueRef: always call use(readyPromise) for ValueRefWithReady, so the hook order is the same on every render and replay.
• ValueRefWithReady: once readyPromise resolves, mark it with status: 'fulfilled' and value (React's thenable protocol). That way use returns synchronously for refs that are already ready instead of suspending briefly.

Testing

• eslint clean on the changed files; the changed files type-check
• Manual: load x.com with a fresh profile and confirm the sidebar entrance renders without the crash screen

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
book	Ready	Preview	Sep 30, 2026 5:06am UTC

[Jack-Works]

This is strange, since react document (https://react.dev/reference/react/use#use-promise) states:

Call use with a Promise to read its resolved value. The component calling use suspends while the Promise is pending. Despite its name, use is not a Hook. Unlike Hooks, it can be called inside loops and conditional statements like if.