Is hot reloading available for expo web?

Expo SDK
1

I couldn’t find the answer to this question anywhere: is hot reloading available for expo web?

It seems to me that by default it isn’t, it always does a full reload (live reload) and the current state is lost.

I created the following little app to test it.

I used expo-cli 5.0.3 and the expo init with

:heavy_check_mark: Choose a template: › tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript

in package.json I have now:

"expo": "~44.0.0",
"react-native": "0.64.3",

In the generated TabOneScreen.tsx I added a button with a counter.

export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
  const [counter, setCounter] = useState(1)

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One</Text>

      <Button title={counter.toString()} onPress={() => setCounter(counter+1)}/>

      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <EditScreenInfo path="/screens/TabOneScreen.tsx" />
    </View>
  );
}

When I run this in the iOS simulator and edit the file, the screen is hot reloaded and the counter’s value is kept. In case of a web build, however, when I edit the file the whole screen gets reloaded and the counter is always reset to 1.

Is this the expected behavior, or is there a way to enable hot reloading for expo web projects?

Thanks!

2

Are you talking about hot reloading while developing (editing the files, saving, as the dev server is running)? Or while using the application as a user would (navigating, clicking buttons, and then refreshing the page)? Or maybe I’m not understanding what you’re asking.

3

WhiIe developing. I would like to have the same experience as when running the app in the iOS simulator (or as it would be the case with a regular react app): say, I edit some text in a component currently on screen in my browser, and this text would appear on the screen without a full page reload loosing all its state.

4

Got it, yeah I’ve noticed the same thing, the state is reset in the web server, but I have noticed that iOS does a total refresh sometimes, it isn’t always the case that there is a hot reload only when editing/saving a file while running on the dev server.

I’m guessing you’re attempting to observe changes to some nested components or something that is kind of annoying to test? If that’s the case you can try to mock the components in an expo snack or in a codesandbox tool.

5

Sure, it is basically what I described in my original post:

Press the button to increment the counter, then edit the text below the button and it will reload the whole page and the counter value will be lost, so it is not a hot reload.

But I am not sure if an expo snack is a valid reproduction of the problem since here we don’t actually have a dev server.

6

Anyone else has an answer to this, please?

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.