[Bug]: useActionData return wrong data after redirection from action

[jrakotoharisoa]

What version of React Router are you using?

6.4.1

Steps to Reproduce

Pull this repository: https://github.com/jrakotoharisoa/react-router-sandbox

1. Submit form with empty value to trigger error from action
2. Enter a value in input and submit form

Expected Behavior

On the redirecting page, action data should be null

Actual Behavior

Action data on the redirecting page correspond to old action data returned when the form on previous page was in error.

[jrakotoharisoa]

actionData in router state seems to not being reset when redirection is trigger from an action.

[brophdawg11]

Merged and should be available in 6.4.2 - hopefully released this week 👍

[jrakotoharisoa]

👍 Thanks @brophdawg11 !

[BaggioGiacomo]

Looks like that #9334 hasn't completely fixed this issue 🤔

Context

I have an action that returns an error if there's an error or return a redirect if everything is fine:

export const action = async ({ request }: ActionFunctionArgs) => {
  const formData = await request.formData();
  const myData = formData.getAll("input-name")

  const { validation } = await validateData(myData); //This return a VerificationState enum (valid or invalid)
 
  if (validation === VerificationState.invalid) {
    return {
      error: "not valid",
    };
  }
  return redirect(".");
};

If we submit invalid data, useActionData() hook will return error: "not valid" as expected. Then, if we submit valid data, we still get error: "not valid" by useActionData() hook instead of getting undefined

What version of React Router are you using?

6.4.3

[brophdawg11]

@BaggioGiacomo Can I ask why you're doing a redirect if the intention is to stay at the same location? I think return null would keep the same behavior in your app and fix the issue you're seeing?

[BaggioGiacomo]

@brophdawg11 We're trying to stick with the same approach that we'd use in Remix. To enable progressive enhancement aren't we supposed to redirect after a post request? I know this doesn't really matter on a client side app, but if we want to move to Remix later, shouldn't we redirect in order to render fresh data on the page?

[brophdawg11]

Ah, ok - yeah generally that's the recommended approach, but I don't think you technically need to do that if it's to the current location, because that's what the browser would do without JS in the first place (reload the entire page at the form action location). That being said, I do think it's probably a bug and actionData should be cleared on redirect regardless of the new location. I'll re-open and take a look at a fix 👍

[brophdawg11]

This should have been fixed by the above PR :)

[BaggioGiacomo]

Thanks! @brophdawg11 💪🏻