Fix useActionData so it only returns the contextual route action data

[brophdawg11]

Closes #11022

This has been a bug since the move from TransitionManager (https://github.com/remix-run/remix/blob/%40remix-run/vercel%401.7.6/packages/remix-react/components.tsx#L1421). useActionData should behave the same as useLoaderData in this regard.

[changeset-bot]

🦋 Changeset detected

Latest commit: c5670d0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
react-router	Patch
react-router-dom	Patch
react-router-dom-v5-compat	Patch
react-router-native	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🤖 Hello there,

We just published version 6.19.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 6.19.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[lildesert]

Hey @brophdawg11,

We just bumped our remix version to 2.3.0 which includes this PR. The fix you did in this PR was unfortunately a feature for us.
We use useActionData in a global hook to display toast messages and include this hook in our Root component. Here's an example of the code:

export const useGlobalToastMessage = () => {
  const actionData = useActionData();

  useEffect(() => {
    if (!actionData || !isObject(actionData)) {
      return;
    }
    const { globalToastMessage } = actionData;
    displayToast(globalToastMessage);
  }, [actionData]);
}

Do you know how to re-create a hook allowing us to "listen" to any route action?
Thanks

[hi-ogawa]

Though this relies on UNSAFE API, I think you can still get back old useActionData by implementing it on your own:

import { useContext } from 'react';
import { UNSAFE_DataRouterStateContext } from 'react-router';

function useAnyActionData() {
  const state = useContext(UNSAFE_DataRouterStateContext);
  return Object.values(state?.actionData || {})[0];
}

I tested it based on the reproduction from #11022 (comment)

https://stackblitz.com/edit/remix-run-remix-wab4bq?file=app%2Froutes%2Fparent.tsx

screenshot after /parent/child route submission

[lpsinger]

Darn! Looks like we were relying on this "bug", and fixing it broke nasa-gcn/gcn.nasa.gov#1699.

[lildesert]

Thanks @hi-ogawa, it's nice to be able to choose between the two implementations.

[brophdawg11]

@lildesert I would recommend using a flashed session value for toast messages like that: https://remix.run/docs/en/main/utils/sessions#sessionflashkey-value

[lpsinger]

Neat, thank you!