Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix useActionData so it only returns the contextual route action data #11023

Merged
merged 1 commit into from
Nov 14, 2023

Conversation

brophdawg11
Copy link
Contributor

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.

Copy link

changeset-bot bot commented Nov 14, 2023

🦋 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

@brophdawg11 brophdawg11 linked an issue Nov 14, 2023 that may be closed by this pull request
1 task
@brophdawg11 brophdawg11 merged commit 39854ce into dev Nov 14, 2023
3 checks passed
@brophdawg11 brophdawg11 deleted the brophdawg11/fix-action-data branch November 14, 2023 14:07
Copy link
Contributor

🤖 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!

Copy link
Contributor

🤖 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
Copy link

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
Copy link

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

image

@lpsinger
Copy link

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

@lildesert
Copy link

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

@brophdawg11
Copy link
Contributor Author

@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
Copy link

Neat, thank you!

jonathanpruvost pushed a commit to concordnow/react-router that referenced this pull request Nov 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

useActionData receives data from wrong action
4 participants