Fast Refresh with Expo Web! 🏃🏻‍♂️🔄
Tags: react, javascript, tutorial, reactnative
Published: 2020-04-20 16:29:30

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5vm63rmerqukriv7fxu1.gif)

If you've used Expo on iOS or Android recently you've probably used Fast Refresh (by [Dan Abramov](https://github.com/gaearon)) to achieve stateful hot reloading during development. But how do you use Fast Refresh with Expo for web.?.. (Pretty easily).

On web this will update the DOM without reloading the page, this means the state will remain the same across updates. To fully update you can simply reload the window with <kbd>⌘ + R</kbd>.

# 🤔 How to use

Currently there's no official Fast Refresh Webpack plugin, but you can get started today using a great community plugin by [Michael Mok](https://github.com/pmmmwh)!

- Bootstrap a new universal React Native project:
  - **Expo:** `expo init` then select any project
  - **Other:** `npx create-react-native-app`
- Install the community Fast Refresh package:
  - `yarn add -D @pmmmwh/react-refresh-webpack-plugin webpack-hot-middleware`
- Eject the Webpack config:
  - `expo customize:web`
- In your newly created `webpack.config.js`:

```js
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Use the React refresh plugin in development mode
  if (env.mode === "development") {
    config.plugins.push(
      new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
    );
  }

  return config;
};
```

- Now in your `babel.config.js`:

```js
module.exports = function (api) {
  // This caches the Babel config by environment.
  api.cache.using(() => process.env.NODE_ENV);

  return {
    presets: ["babel-preset-expo"],
  };
};
```

- Now run `expo start:web` to use it!

# 💡 BTW

When the official React fast refresh has been released, we will work on unifying it with native to create a universal solution. Until then this is a pretty nifty little feature! :]

## Why share now then?

I got the idea for this tutorial from my friend Tim Neutkens of Next.js. I highly recommend [using Next.js with Expo for web](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) especially for navigation!

{% twitter 1251942933953228802 %}

# 👋 That's all

Thanks for reading, that's all I've got for you today. Let me know if you enjoyed this article, and reach out if you have any more questions!

<table>
  <tr>
 <td><a href="https://twitter.com/baconbrix">
    <img alt="Twitter: baconbrix" src="https://img.shields.io/twitter/follow/baconbrix.svg?style=flat-square&logo=TWITTER&logoColor=FFFFFF&labelColor=00aced&logoWidth=20&color=lightgray" target="_blank" />
  </a>
</td>
<td><a href="https://github.com/evanbacon" aria-label="Follow EvanBacon on Github">
    <img alt="Github: evanbacon" src="https://img.shields.io/github/followers/evanbacon.svg?label=Follow&style=flat-square&logo=github&logoColor=FFFFFF&labelColor=24292e&logoWidth=20&color=lightgray" target="_blank" />
  </a></a>
</td>
<td><a href="https://www.instagram.com/baconbrix" aria-label="Follow Baconbrix on Instagram">
    <img alt="Instagram: baconbrix" src="https://img.shields.io/badge/@baconbrix-E4405F.svg?style=flat-square&logo=INSTAGRAM&labelColor=000&logoWidth=20" target="_blank" />
  </a>
</td>
<td><a href="https://www.linkedin.com/in/evanbacon" aria-label="Connect with Evan Bacon on LinkedIn">
    <img alt="LinkedIn: evanbacon" src="https://img.shields.io/badge/connect-0077b5.svg?style=flat-square&logo=LINKEDIN&labelColor=000&logoWidth=20" target="_blank" />
  </a>
</td>
<td><a href="https://www.youtube.com/c/exposition?sub_confirmation=1" aria-label="Watch Evan Bacon on YouTube">
    <img alt="YouTube: Evan Bacon" src="https://img.shields.io/badge/Watch-FF0000.svg?style=flat-square&logo=YOUTUBE&labelColor=FF0000&logoWidth=20" target="_blank" />
  </a>
</td>
<td><a href="http://evanbacon.dev" aria-label="Learn more about Evan Bacon">
    <img alt="Website: Evan Bacon" src="https://img.shields.io/badge/Portfolio-4630EB.svg?style=flat-square&logo=EXPO&labelColor=000&logoWidth=20" target="_blank" />
  </a>
</td>
</table>