Use useEffect to avoid unsafe side effects for useAccount callbacks #1679
Conversation
…disconnect callbacks
🦋 Changeset detectedLatest commit: 7e16062 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
@aj-may is attempting to deploy a commit to the wagmi Team on Vercel. A member of the Team first needs to authorize it. |
|
Very excited to not need to remove strict mode from projects where rainbow kit is used |
|
Appreciate the patience! Will have some time to take a look soon. |
|
@aj-may spent some time looking into this and it doesn't seem like anything is wrong here. The dev playground has used strict mode since April 2022. Can you describe some more what you mean by "app state to become unstable"? I'm seeing (Side note: The issues you linked for RainbowKit are definitely issues, but quickly poked around there and they seem unrelated to wagmi.) |
|
@tmm Ahh, I don't think this bug will rear its head unless there is a component that is using these callbacks to modify its own state. in that case the dependent components state becomes unstable, or reverts to its previous state on the second render under react strict mode. Let me see if I can make a quick branch to add something to the playground that can replicate the bug. |
|
@tmm I was able to add an example to reproduce here: https://github.com/aj-may/wagmi/tree/side-effect-playground |
|
@tmm Have you had a chance to pull down the branch I created that reproduces the issue? Would love if we can revisit this and potentially merge this in. |
tmm
force-pushed
the
fix-unsafe-side-effects
branch
from
9b063db
to
a1d14dd
Compare
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
tmm
force-pushed
the
fix-unsafe-side-effects
branch
2 times, most recently
from
7ea71b2
to
a1d14dd
Compare
|
@tmm The changes you pushed cause the connect and disconnect callbacks to be called twice in dev mode with react strict mode on and still shows some state fluctuations over the multiple renders in the console.
|
|
Prior to that the console looked like this: These logs are from my test branch here: https://github.com/aj-may/wagmi/tree/side-effect-playground |
|
@aj-may thanks for the feedback! made some updates. try it out and lmk what you think. |
|
👍 I'll take this for a spin in a couple hours |
|
Looking good!
|
fixes wevm#1998 fix is mostly re-doing wevm@3cef111 in a more simple way. Have confirmed that: * The problem fixed in wevm#1679 is still fixed * The problem in wevm#1998 is fixed (tested example repo working after change) Also fixes stale closure issue with setting `const config = getConfig()` inside the callback (this will cause the hook to be subscribed to the wrong config if the config changes e.g. lazy-loaded config)
…2664) * fix: `useAccount` should not unsubscribe from zustand when re-render fixes #1998 fix is mostly re-doing 3cef111 in a more simple way. Have confirmed that: * The problem fixed in #1679 is still fixed * The problem in #1998 is fixed (tested example repo working after change) Also fixes stale closure issue with setting `const config = getConfig()` inside the callback (this will cause the hook to be subscribed to the wrong config if the config changes e.g. lazy-loaded config) * refactor --------- Co-authored-by: moxey.eth <jakemoxey@gmail.com>
Description
When using the
onConnectandonDisconnectcallbacks in an app with react strict mode on, the current implementation ends up causing the app state to become unstable. This has something to do with the double rendering of components when a react app, in strict mode, is running the dev server.Additional Information
Your ENS/address:
ajmay.eth
Related Issues
I believe these issues are related to this fix:
As these issues usually occur after an
onConnectoronDisconnectcallback is called and when logging the state, you can see that it reverts on the second render.