🗺 Add flushSync option

[brophdawg11]

Currently, with future.v7_startTransiton enabled, all React Router internal state updates are wrapped in React.startTransition (per remix-run/remix#5763). This ensures that updates work properly with Suspense and other features.

However, sometimes you need to do something synchronously so you can immediately set focus or scroll position or something related. Normally you would do this with flushSync:

function handleClick() {
  ReactDOM.flushSync(() => {
    setState(newState);
  });
  setFocusAndOrScrollToNewlyAddedThing()
}

However, this doesn't work if you're using a React Router API such as submit because the internal update is wrapped in startTransition which is inherently asynchronous:

function handleClick() {
  ReactDOM.flushSync(() => {
    fetcher.submit(data);
  });
  // ❌ The submission hasn't been flushed through yet due to startTransition!
  setFocusAndOrScrollToNewlyAddedThing()
}

Therefore, we need a way to opt-out of startTransition, which we can do by giving them a way to opt-into flushSync:

function handleClick() {
  fetcher.submit(data, { flushSync: true });
  setFocusAndOrScrollToNewlyAddedThing(); ✅
}

This will be a new option on Link/Form/navigate/submit/fetcher.load/fetcher.submit. It's worth noting that this will impact all updates for that navigation/fetch but in reality the only one that is sort of useful to you is the first one since you'll likely be doing scrolling/focus setting right after that. You won't have a way to hook into the internal updates in the middle. I.e., when you submit you'll be able to do something right after the idle->submitting update. But then eventual submitting->?loading will not be in the same event loop so you will still ned to use an effect to do something after that update.

[brophdawg11]

Closed by #11005

[github-actions]

🤖 Hello there,

We just published version 6.19.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.19.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!