No Longer Reloading Pages on Network Change

Erik Marks
Nov 4, 2019 · 3 min read

This article is outdated. The page reload only affects users of window.web3, which we are removing. Click here for more details.

At long last, in early 2020, MetaMask will no longer reload web pages when the selected network changes. This will be a breaking change for dapps that have yet to support EIP 1193-compatible providers. We expect this to enable UX improvements for all dapps that use MetaMask.

Image for post
Image for post

If you are a MetaMask user, you should not have to do anything. If, however, you interact with unmaintained legacy dapps, you will have to reload the dapp in the browser whenever you change networks in MetaMask. If you are a dapp developer, we encourage you to continue reading.

If you want to learn more about our reasoning for doing this, you can check out previous post on this topic, from 2018. Note that the example code in that article is outdated.

Inside MetaMask, the user can change the selected Ethereum network or change at any time. Currently, whenever the user changes the network, MetaMask asks the browser to reload the open pages of any connected dapps. In Q1 2020, MetaMask will no longer ask the browser to do this. Instead, the dapp will have to listen for events emitted from the MetaMask inpage provider at window.ethereum.

If your dapp does not handle the network changing at any time after initialization, this will be a breaking change. To handle this, you need to listen for one of the events specified by EIP 1193, and handle the network change:

// you should use chainId for network identity, and listen for
// 'chainChanged'
ethereum.on('chainChanged', chainId => {
// handle the new network
})
// if you want to expose yourself to the problems associated
// with networkId, listen for 'networkChanged' instead
ethereum.on('networkChanged', networkId => {
// handle the new network
})
// if you want to do as little as possible, these three lines
// will emulate existing behavior
ethereum.on('chainChanged', () => {
document.location.reload()
})

To understand why you should only use chainId, check out this article by the inimitable Pedro Gomes. For the authoritative chainId and networkId list, check out chainId.network.

Dapp developers have asked us to stop forcing reload for a very long time. By asking the browser to reload the page, we’re taking away the dapp’s power to manage its own UX. Worse, reloading the webpage is usually terrible UX. To get a complete account of our reasoning, check out Dan Finlay’s post on this from 2018 (but don’t follow any of the example code).

In early 2020, MetaMask will finally stop reloading pages on network change. As a dapp developer, you should listen for the chainChanged event per EIP 1193. As a user, you should not have to do anything. We are excited to see the UX improvements that this will enable for the Ethereum ecosystem!

MetaMask

MetaMask is a bridge that allows you to visit the…

Erik Marks

Written by

Developer at MetaMask. Lagom in all things.

MetaMask

MetaMask

MetaMask is a bridge that allows you to visit the distributed web of tomorrow in your browser today. It allows you to run Ethereum dApps right in your browser without running a full Ethereum node.

Erik Marks

Written by

Developer at MetaMask. Lagom in all things.

MetaMask

MetaMask

MetaMask is a bridge that allows you to visit the distributed web of tomorrow in your browser today. It allows you to run Ethereum dApps right in your browser without running a full Ethereum node.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store