changeRoute in RelayRouter__Link should start a transition
Kingdutch opened this issue · 1 comments
Kingdutch commented
changeRoute will cause a React state change and rerender. Suspense dictates that this means its effect must be placed in a startTransition. Not doing so will cause the following error.
Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
updateDehydratedSuspenseComponent http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:14887
updateSuspenseComponent http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:14673
beginWork http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:15472
beginWork$1 http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:19248
performUnitOfWork http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18693
workLoopSync http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18632
renderRootSync http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18611
performSyncWorkOnRoot http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18370
flushSyncCallbacks http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:8776
ensureRootIsScheduled http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18124
ensureRootIsScheduled http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18122
scheduleUpdateOnFiber http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18067
dispatchSetState http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:12607
startTransition http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:12461
useTransition2 http://localhost:9999/node_modules/.vite/deps/rescript-relay_src_ReactExperimental__mjs.js?v=005419a4:16
_1 http://localhost:9999/node_modules/.vite/deps/chunk-NFXT3JGM.js?v=2d4dd272:43
RouteRenderer http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelayRouter.mjs:215
_1 http://localhost:9999/node_modules/.vite/deps/chunk-NFXT3JGM.js?v=2d4dd272:43
cleanup http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelayRouter.mjs:107
forEachU http://localhost:9999/node_modules/.vite/deps/chunk-C44JOA6I.js?v=2d4dd272:288
forEach http://localhost:9999/node_modules/.vite/deps/chunk-C44JOA6I.js?v=2d4dd272:292
cleanup http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelayRouter.mjs:106
call http://localhost:9999/node_modules/.vite/deps/chunk-7NVC23EC.js?v=2d4dd272:533
call http://localhost:9999/node_modules/.vite/deps/chunk-7NVC23EC.js?v=2d4dd272:532
applyTx http://localhost:9999/node_modules/.vite/deps/chunk-7NVC23EC.js?v=2d4dd272:137
push http://localhost:9999/node_modules/.vite/deps/chunk-7NVC23EC.js?v=2d4dd272:155
changeRoute http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelayRouter__Link.mjs:70
_1 http://localhost:9999/node_modules/.vite/deps/chunk-NFXT3JGM.js?v=2d4dd272:43
onClick http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelayRouter__Link.mjs:193
callCallback2 http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:3575
invokeGuardedCallbackDev http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:3600
invokeGuardedCallback http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:3634
invokeGuardedCallbackAndCatchFirstError http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:3637
executeDispatch http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6672
processDispatchQueueItemsInOrder http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6692
processDispatchQueue http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6701
dispatchEventsForPlugins http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6709
dispatchEventForPluginEventSystem http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6833
batchedUpdates$1 http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:18409
batchedUpdates http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:3480
dispatchEventForPluginEventSystem http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6832
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:5163
dispatchEvent http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:5157
dispatchDiscreteEvent http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:5134
addEventBubbleListener http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:5320
addTrappedEventListener http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6778
listenToNativeEvent http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6735
listenToAllSupportedEvents http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6744
listenToAllSupportedEvents http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:6741
hydrateRoot http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:20700
hydrateRoot$1 http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:20990
hydrateRoot http://localhost:9999/node_modules/.vite/deps/react-dom_client.js?v=43eb51f4:21070
boot http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelaySSRUtils.mjs:56
bootOnClient http://localhost:9999/@fs/Users/alexander/Projects/rescript-relay-router/packages/rescript-relay-router/src/RelaySSRUtils.mjs:61
boot http://localhost:9999/src/EntryClient.mjs:15
<anonymous>
This is reproducible by loading / and quickly clicking on "Todos" before the page has finished hydrating.
Note: The current used ReScript React bindings have the return order of React.useTransition reversed. We may need a custom binding.
zth commented
Good point! There's a dedicated useTransition binding we can use from rescript-relay, in ReactExperimental.