useFetcher data inconsistency when implementing optimistic UI on an action that redirects

[davidhousedev]

Reproduction

https://github.com/davidhousedev/remix-redirect-after-you-post-reproduction

Context and reproduction steps are included

System Info

System:
    OS: macOS 14.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 4.62 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Brave Browser: 107.1.45.133
    Chrome: 121.0.6167.139
    Safari: 17.2
  npmPackages:
    @remix-run/css-bundle: ^2.6.0 => 2.6.0
    @remix-run/dev: ^2.6.0 => 2.6.0
    @remix-run/node: ^2.6.0 => 2.6.0
    @remix-run/react: ^2.6.0 => 2.6.0
    @remix-run/serve: ^2.6.0 => 2.6.0

Used Package Manager

npm

Expected Behavior

I should have access to either fetcher.formData or fetcher.data even when my action redirects so that my optimistic UI can be consistent until revalidation.

(Note: this screenshot was taken when the action returned a 200 response, not a redirect)

Actual Behavior

There is a brief time, when using useFetcher to submit to an action that redirects, when fetcher.state === "idle", fetcher.data is null, and fetcher.formData is null. This occurs prior to the resolution of loader revalidation, which can lead to "flicker"s as components re-render.