useLoaderData returns undefined when used in root.tsx

[npapagna]

Reproduction

1. Go to https://stackblitz.com/edit/remix-run-remix-cuwoyi?file=app%2Froutes%2F_index.tsx
2. Notice that both root.tsx and _index.tsx render undefined as the output of the useActionData hook (see rendered messages on the page.
3. Click the Click to submit button to call the clientAction form the _index.tsx route.
4. Notice that useActionData returns {toast: "foo"} in the _index.tsx route, but returns undefined in root.tsx (see rendered messages on the page.

System Info

System:
    OS: macOS 13.6.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 25.92 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  Browsers:
    Brave Browser: 124.1.65.126
    Chrome: 126.0.6478.127
    Safari: 16.6
  npmPackages:
    @remix-run/dev: ^2.9.2 => 2.9.2 
    @remix-run/node: ^2.9.2 => 2.9.2 
    @remix-run/react: ^2.9.2 => 2.9.2 
    vite: ^5.1.0 => 5.2.12

Used Package Manager

npm

Expected Behavior

I was expecting to access the (the serialized data from the most recent route action)[https://remix.run/docs/en/main/hooks/use-action-data] in root.tsx to implement an Toasts component.

The clientAction on _index.tsx would do stuff and return {toast: "message"} as part of the response (other routes do this as well) and in root.tsx I wanted to render the toasts (when present).

This is a Remix SPA project (that's why we use a clientAction instead of action).

Actual Behavior

useActionData returns the clientAction response only in the route where the client action is defined.

[kiliman]

In Remix, the actual behavior is the correct behavior. useActionData only returns the action response from the route it's defined in.

Typically things like toast messages would be set via session.flash that the root loader would access.

Since you're creating a SPA, you may want to use something like react-hot-toast where you can call the toast function from anywhere, including the clientAction

export async function clientAction() {
  // call the toast function directly
  toast('hello remix');
  return null;
}

https://stackblitz.com/edit/remix-run-remix-bt6c8m?file=app%2Froot.tsx,app%2Froutes%2F_index.tsx

[brophdawg11]

@kiliman is correct here - useActionData (like useLoaderData) returns the action data for the contextual route - not for any route.

[npapagna]

Thanks for the suggestion @kiliman!

@brophdawg11 in that case I feel the docs are a bit unclear, since they mention that:

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

That made me think I could useActionData in root.tsx initially.
Maybe it can be updated to clarify that it only returns the action response from the route it's defined in?

[brophdawg11]

PRs are always welcome to clarify the docs! Would you like to push a PR with a proposed clearer wording?

[npapagna]

PRs are always welcome to clarify the docs! Would you like to push a PR with a proposed clearer wording?

@brophdawg11 sure thing! #9744