bug: Field `data` from `useSigner` changes on subsequent calls of `useSigner`

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.6.7

Current Behavior

Given a component that is always rendered and is performing side effects based on the data field from useSigner, I expect the side effects to run only when that field changes, however it seems that data is changing every time other components that also call userSigner are mounted.

Expected Behavior

It’s expected that useSigner().data remains the same object across renders until it actually changes, so that it can be used in the dependencies array of react hooks like useEffect and useCallback.

Steps To Reproduce

1. Download the project from codesanbox;
2. Run yarn to install dependencies, followed by yarn start;
3. A browser tab will open (if not visit http://localhost:3000/), open the developer console, notice that every time the show button is clicked the component listening for changes on useSigner().data is triggered.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/s/wagmi-usesigner-bug-1gkexf

Anything else?

Codesandbox doesn’t support the sample code because it needs to be connect to an actual wallet to be reproducible, the project needs to be downloaded and run locally. The project has 2 components:

• UseSignerLogger that is always rendered and contains a useEffect hook that logs a message to the console every time useSigner().data changes.
• DummyUseSignerCaller that also calls useSigner(), and is mounted or unmounted when a button is clicked.

DummyUseSignerCaller being mounted causes UseSignerLogger to detect a signer change everytime.

Maybe issue #919 is related and the “looping re-renders” are a consequence of this field changing.

[jxom]

Published 0.6.8 that includes this fix!

[madmarko]

@jxom - I’ve only been able to make it happen one extra time on CodeSandbox, though in our app it’s happening once or twice more as it’s being used way more: https://codesandbox.io/s/confident-babbage-4cvv1z (please also check the console output for useWhyDidYouUpdate)

For context: Our scenario is that on page load (or on request), we’d be making an Api call that would give us back the string content of the message that subsequently needs to be signed.

We need the signer as a dependency in the effect that would ultimately call the functions that fetches data from the Api, in order to know if the signer’s been initialized. (we also have other dependencies that must be truthy.)

For the record I’ve also seen useSignMessage but I’m unable to pass it to my external service that makes the Api calls as it’s a hook, and the Api calls are being made outside of React context.

So what happens now is, we get the Api call fired multiple time because of the signer update, where all other dependencies are fine. We’re currently working around it with useState, but that’s messy.

EDIT: Before making the switch to wagmi, we were using web3-react and getting the signer from the provider context. Here it doesn’t look like it’s accessible via the provider.