Fix hydration mismatch in the dev strategy switcher#47
Conversation
StrategySwitcher initialised `current` from getOrderStrategy() during render, which reads localStorage on the client but not during SSR — so the highlighted strategy differed between server and client HTML and React regenerated the subtree (the visible "can't see the strategy" symptom). Read the active strategy via useSyncExternalStore: server snapshot = the build-time default (matches SSR + first client render → no mismatch), client snapshot resolves the real value after hydration, and a new subscribeOrderStrategy lets the badge re-render when the strategy changes (cycling). Dev-only component; no production behaviour change.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Your plan includes 1 review of capacity. Refill in 15 minutes and 4 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
On
/playin dev, React reported a hydration mismatch inStrategySwitcher("the server rendered text didn't match the client … this tree will be regenerated"), which is also why the strategy badge/selection wasn't showing reliably.Cause:
currentwas initialised fromgetOrderStrategy()during render. That readslocalStorage(the persisted strategy override), which exists on the client but not during SSR — so the highlighted<li>differed between the server and client HTML.Fix: read the active strategy with
useSyncExternalStore:DEFAULT_STRATEGY(so SSR and the first client render agree → no mismatch),getOrderStrategy().name(resolves the localStorage override after hydration),subscribeOrderStrategy(notified bysetOrderStrategy) re-renders the badge when cycling.Dev-only component — no production behaviour change. Verified locally: switcher renders cleanly with the default and with a
localStorageoverride (the case that previously mismatched), no error overlay.lint/type-check/vitest(106) /buildgreen.Not merged — opening for review.