`fetcher.data` is undefined in `then` of `submit` promise

[Arichy]

I'm using React Router as a...

framework

Reproduction

Create an action and use fetcher.submit to submit to the api action, but the fetcher.data in then is undefined.
It's very common to handle the response data from api, but now I cannot get the data in then, and we should avoid useEffect if possible.

In action:

In console:

System Info

System:
    OS: macOS 15.1.1
    CPU: (14) arm64 Apple M4 Pro
    Memory: 4.86 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.8.0 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.12.1 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
    bun: 1.1.22 - ~/.bun/bin/bun
  Browsers:
    Chrome: 132.0.6834.160
    Edge: 132.0.2957.127
    Firefox Nightly: 135.0a1
    Safari: 18.1.1

Used Package Manager

yarn

Expected Behavior

fetcher.data should be {name: "action"} as returned from action.

Actual Behavior

fetcher.data is undefined

[timdorr]

This is expected behavior. Because you're still within the closure of the same initial useFetcher call, you're referencing the same instance of fetcher.data. You have to wait for the entire component to be re-rendered so that the useFetcher hook will return fresh data. You should use something like a useEffect to handle this.