-
Notifications
You must be signed in to change notification settings - Fork 2.5k
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
useFetcher return value changes on every render #5113
Labels
bug
Something isn't working
Comments
brophdawg11
added
bug
Something isn't working
awaiting release
This issue has been fixed and will be released soon
and removed
bug:unverified
labels
Jan 17, 2023
This should be available in |
Released in 1.11.0 |
brophdawg11
removed
the
awaiting release
This issue has been fixed and will be released soon
label
Jan 18, 2023
After upgrading to 1.11.0 I believe this issue still persists. Something with the fetchers is not consistent between 1.9.0 and 1.11.0. I'll need to do more investigating. |
@krall12 please provide some reproduce case in a new issue 🙏🏼 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of Remix are you using?
1.10.1
Steps to Reproduce
https://github.com/remix-run/remix/blob/main/packages/remix-react/components.tsx#L1149
As of 1.10, Remix's
useFetcher
wrapper now returns a new object every time it's called. The means that using it in a hook's dependency array (likeuseEffect
) causes the effect to re-run for every render, even when the fetcher's actual state hasn't changed.Before 1.10, I could use it in
useEffect
and check for something likeif (fetcher.type === "done") { ... }
inside the effect. I was able to rely on the fetcher only causing the effect to re-run if something actually changed with the fetcher. But now, if the callback inside thatuseEffect
does anything to cause a re-render, the useEffect falls into an infinite loop. Upgrading to 1.10 broke many pages on our site due to this. Unfortunately, because there are no success/error callbacks withuseFetcher
(yet?), I don't know any way other thanuseEffect
to deal with the results of a fetcher.For now, I can change all of my callbacks (unfortunately there are hundreds of them) to use
fetcher.type
in the dependency array instead of the whole fetcher object, but it would be nice ifuseFetcher
wrapped its return object in auseMemo
. I can send a PR for this if needed, but wanted to make sure there wasn't a specific reason this isn't being done already?Some other functions (such as
useTransition
) do wrap their return values inuseMemo
, and before the upgrade to the new router, Remix returned auseMemo
fromuseFetcher
: https://github.com/remix-run/remix/blob/v1.6.4/packages/remix-react/components.tsx#L1389Expected Behavior
useFetcher
should not return a new object every render when nothing related to the fetcher has actually changed.Actual Behavior
useFetcher
returns a new object every render.The text was updated successfully, but these errors were encountered: