Why reloading in network chain change?

[Glitch.txs]

Hi, can someone provide a list of the things that developers should take into account when handling network changes?

I see in MetaMask and Ethers.js a strong recommendation on reloading the page when a network change occurs. Why is this so important and why not proposing another way to handle this? What are all the problems that not reloading the page would generate?

Thanks in advance.

[nakedwinnie]

Hey @Glitch.txs, welcome to the MetaMask community!

To clarify, are you referring to the wallet_switchEthereumChain method?

[Glitch.txs]

For example, when the event ‘chainChange’ is triggered

The docs says:
“We strongly recommend reloading the page on chain changes, unless you have good reason not to.”

[snwlprd.eth]

Hello @Glitch.txs !

If you changed the network and did not reload the page, in some cases your application may receive an outdated store state. This entails incorrect display of the user interface.

[Glitch.txs]

is there a way to check this store state in dapp? or a way to restart the provided internally (like rerendering a component) without needing to refreash the site? Thanks

[snwlprd.eth]

@Glitch.txs

Yes, of course, you may use hooks (if you are using React on the client side)

Here you can take a look at an example:

But it’s still a good practice to do a full re-render when changing the network, for example, listen to this event in the global web3 provider:

  const setListener = provider => {
    provider.on("chainChanged", _ => window.location.reload());
  };