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

Add useFetcher(key) and <Form navigate={false}> #10960

Merged
merged 4 commits into from Oct 26, 2023

Conversation

brophdawg11
Copy link
Contributor

@brophdawg11 brophdawg11 commented Oct 25, 2023

Add useFetcher({ key }) and <Form navigate={false} fetcherKey={key}> APIs

@changeset-bot
Copy link

changeset-bot bot commented Oct 25, 2023

🦋 Changeset detected

Latest commit: 2c6b70a

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

This PR includes changesets to release 5 packages
Name Type
react-router-dom Minor
@remix-run/router Patch
react-router Minor
react-router-dom-v5-compat Minor
react-router-native Minor

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

*/
export const Form = React.forwardRef<HTMLFormElement, FormProps>(
(props, ref) => {
let submit = useSubmit();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we're back to one useSubmit method, we don't need this abstraction anymore - a fetcher can just use <Form navigate={false} fetcherKey={fetcherKey}> internally 😍

/**
* Returns the implementation for fetcher.submit
*/
function useSubmitFetcher(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved back into useSubmit with the new navigate:false option

let submit = useSubmitFetcher(fetcherKey, routeId);
let [fetcherKey, setFetcherKey] = React.useState<string>(key || "");
if (!fetcherKey) {
setFetcherKey(getUniqueFetcherId());
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be a more concurrent-mode resilient way to assign ids

return [...state.fetchers.values()];
return Array.from(state.fetchers.entries()).map(([key, fetcher]) => ({
...fetcher,
key,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expose the key on useFetchers for easier lookups

@brophdawg11 brophdawg11 merged commit c0dbcd2 into dev Oct 26, 2023
3 checks passed
@brophdawg11 brophdawg11 deleted the brophdawg11/1-fetcher-key branch October 26, 2023 19:10
@github-actions
Copy link
Contributor

🤖 Hello there,

We just published version 6.18.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.18.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!

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.

None yet

1 participant