Why the components are called twice? about web3-react HOT 8 CLOSED

Yeah I noticed this earlier and am working on a fix as we speak :) should be out today or tomorrow! Once it lands, happy to explain how the mechanism works

from web3-react.

Got it. I updated your code to use useRef instead useState since it's still trigger re-rendering:

  const signer = useRef();

  useEffect(() => {
    if (context.library) {
      signer.current = context.library.getSigner(context.account);
    }
  }, [context.library]);

and confirmed that it works as what I expected with 4.0.3. Thanks a lot for your help!!

from web3-react.

Thank you so much!!

from web3-react.

Ok @jinserk should be fixed in 4.0.3 (@latest), please let me know if you're still having issues! Sorry about the problem, it's because I was memoizing some of the manager functions, which were causing a re-render after certain state transitions.

from web3-react.

I tested 4.0.3 and have still the same issue. When I check the context.active, it changes from false at the first console msg to true at the second one. However, when I get a log from MyComponent, the myContext.active = true at the both msgs. I guess the context.setConnector call is behind the first rendering in MetaMaskComponent, and this triggers second useEffect() call since context has been changed. So what my question is, do we have any hook before rendering in a component?

from web3-react.

that shouldn't be happening, sorry :/

i will take a look at this tomorrow. by the way, reproductions in a codesandbox are far easier for me to work with than copy-pasted code.

from web3-react.

I added my code snippets in codesandbox (https://codesandbox.io/s/rjwjmronr4).

And as testing, when unset connector after logout in MetaMask, I couldn't re-connect even though I logged in MetaMask again.

from web3-react.

Ok, this isn't happening because of web3-react. You're using a useEffect that takes the context in the dependency array, so <MyComponent> gets called twice, once on the initial context update, and once after the useEffect triggers to update the signer state variable. I've also pasted code below which is a clearer way of doing what you're trying to do.

  const [signer, setSigner] = useState();

  useEffect(() => {
    if (context.library) {
      setSigner(context.library.getSigner(context.account))
    }
  }, [context.library])

Re. MetaMask, after logging out and logging back in, if you want to spam your users it can be as simple as:

  useEffect(() => {
    if (!context.active) {
      context.setConnector('metaMask')
    }
  }, [context.active])

If they reject the connection attempt though then your app will hang, which is maybe why you should consider other patterns like a re-connect button, or something like that.

from web3-react.