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

enhance: Experimental fetcher resolves before react render #1046

Merged
merged 1 commit into from
Jul 17, 2021

Conversation

ntucker
Copy link
Collaborator

@ntucker ntucker commented Jul 17, 2021

Motivation

Part of #760

This makes little difference in React 18 since renders are batched; however in React < 18, this means that code after promise resolution will be executed before react renders - allowing actions that need to take place as a result of successful fetch. For example navigating off a deleted page after delete.

Solution

Using promise chaining allows us to order microtasks so the resolution of useFetcher()'s promise happens before dispatch of receive.

This has many consequences for existing behaviors so we are opting in via the new fetch mechanism.

It's now recommended to wrap all fetches in act when testing like so:

    await act(async () => {
      await result.current.fetch(ComplexResource.detail(), {
        id: '5',
      });
    });

@ntucker ntucker requested a review from ljharb July 17, 2021 04:04
@ntucker
Copy link
Collaborator Author

ntucker commented Jul 17, 2021

@sweetro

@ntucker ntucker merged commit 1ec90e5 into master Jul 17, 2021
@ntucker ntucker deleted the enhance/fetch-order branch July 17, 2021 14:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants