useActionData() always return undefined

[hungtcs]

Hello everyone!

I started using the useActionData() hook for the first time,
this is my code, it always returns undefined, the action function has been executed when click submit,
but the useActionData() did not get the value returned by the action function.

May I ask where I did wrong? Thanks for your answer.

https://codesandbox.io/s/relaxed-blackwell-g7qjky?file=/src/my-component.tsx

import {
  ActionFunctionArgs,
  json,
  useActionData,
  useFetcher
} from "react-router-dom";

export function Component() {
  const fetcher = useFetcher();
  const actionData = useActionData(); // undefined

  console.log(actionData);

  return (
    <div>
      <button
        onClick={() => {
          fetcher.submit(
            { msg: "this is submit data" },
            { method: "POST", encType: "application/json" }
          );
        }}
      >
        Submit
      </button>
    </div>
  );
}

export async function action({ request }: ActionFunctionArgs) {
  const data = await request.json();

  console.log(`action function run`, { ...data, method: request.method });

  return json(
    {
      msg: "this is action result"
    },
    { status: 200 }
  );
}

[hungtcs]

I should use const submit = useSubmit() instead of fetcher.submit, but I still don't understand the difference.

[kiliman]

When you useFetcher the returned data is on the fetcher instance.

const fetcher = useFetcher()
fetcher.submit()
fetcher.data // <- data is here

useActionData() only returns the data when you use <Form method="post"> or useSubmit()

[kiliman]

P.S. The reason for the difference is that you can have multiple fetchers at a time, so each instance manages its own data and lifecycle. Whereas a form POST is a navigation, and there can only be one at a time so that data is accessed via the useActionData hook.

[alexweberk]

@kiliman your answer saved my day! honestly had such a hard time figuring this out; would love to see this as an example somewhere in the docs! (maybe I just couldn't find it.)

[kiliman]

Yes, it can be kind of confusing since a fetcher can call your action too. Perhaps if they named it useFormActionData() instead.

I think this could be a little more explicit:

useActionData
Returns the serialized data from the most recent route action or undefined if there isn't one.

I think it should at least mention that fetchers maintain their own data.

https://remix.run/docs/en/main/hooks/use-action-data

[matjaeck]

Thank you, please let me ask another question: How can we use the type of the data when using fetcher.data? How can I make https://remix.run/docs/en/main/guides/form-validation#form-validation work with fetcher.Form without losing type safety? Thanks!

Edit: Is const data = fetcher.data as ReturnType<typeof useActionData<typeof action>>; horrible or a ok solution?

[kwabe007]

I just came across the same problem. The more confusing thing is that it works on one of my routes in which the form is being submitted via a button, but on the other route (which has the same setup) it just constantly returns undefined even though the form is clearly being submitted (action function is also running).

Any more info on this?

[kiliman]

When you useFetcher the returned data is on the fetcher instance.

const fetcher = useFetcher()
fetcher.submit()
fetcher.data // <- data is here

useActionData() only returns the data when you use <Form method="post"> or useSubmit()

[kwabe007]

I realized now that the other form I used uses a wrapper component which internally uses useFetcher and given what you're saying it now makes sense why there is no data from useActionData().

Thanks for the helpful insight!

[sleepless000]

It would be nice if this is added to React Router 6 Data API docs

[elmeerr]

@kiliman could you explain why I can see data inside action then? basically I am submitting data from nested route to a parent

parent

• action
  - I see from child here

patent/child-route
submit data using fetcher.submit

the data is visible inside the action but it can't be retrieved using useActionData ...that's a bit weird

[kiliman]

Interesting. First, you're using fetcher.Form/fetcher.submit, so the returned data is actually on fetcher.data, not useActionData(). But you are POSTing to your parent's action. That is why it sees the data from request.formData(). After all, you're sending the data directly to the parent route.

As for the UI, since you're using fetchers, the parent route doesn't render; it simply returns the data from your action to the caller. It will revalidate your routes, but you'll only have access to your loaders' data.

[kiliman]

I guess I do not understand your use case. If you submit to the parent action, are you saving the data somewhere? If so, then your parent route's loader should fetch that data and return it so your parent layout can render the updated data during revalidation.

[elmeerr]

I am not saving the data just yet...I just started checking how it would be to work with local state in Remix. The information I am POSTing to parent would be in a redux store for example.

My first thought was to use the useActionData like we use on form submission, where we have access to what comes from the action like validation errors. The confusion is because I am able to see data on my action, I return that data but still the data is not available on useActionData...

it simply returns the data from your action to the caller

so I guess the data will be inside of fetcher.data, right? but that would be in the same instance I called fetch.submit which it won't be helpful. I changed to use Cookies and now it works as I expect...following what you just said about "saving somewhere".

The main doubt here was why the data I am able to see and return from an action is not available on useActionData but I believe now is clear...the fact is inside an action it does not necessarily means it will be available on useActionData

Thanks for taking the time to answer that.

[alexanderhorner]

I have a similar problem and I don't see a straight forward answer:

I have a parent route that loads data that is used for multiple child routes. On that same parent route I also have a save action.

When I want to save/submit that data from a child route, I can do so by submitting the parents action. The loader revalidates like expected.

But now I want to make it a bit more efficient: Instead of refetching again, I want to just use the new data returned by the POST request of the action. For that I could just check use the result of useActionData, but that is undefined because I'm technically in the child route, even if the useActionData is used in the Component of the Parent route (with the outlet)

function ParentRoute() {
    const dataFromLoader = useLoaderData()
    const dataFromAction = useActionData()
    return (
        <ContextProvider value={dataFromAction ?? dataFromLoader}>
            <Outlet/>
        </ContextProvider>
    )
}

[Sergi17138]

I have the same problem, I submit a form in a component rendered in the outlet, then the useActionData captures the data in the Parent Route.
The parent Route validates that data.
How can I send the validation result to my rendered child form component in Outlet? to show the validation result.
Thanks!!!