search

zth / rescript-relay-router

MIT License
16 stars 3 forks source link

changeRoute in RelayRouter__Link should start a transition #100

Closed Kingdutch closed 2 years ago

Kingdutch commented 2 years ago

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 2 years ago

Good point! There's a dedicated useTransition binding we can use from rescript-relay, in ReactExperimental.