Fast refresh in react native always fully reload the app

Question

This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:

1. Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
2. Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?

This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!

I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)

Kendallkendell

what emulator are you using? – Cynar

android studio 4.0.1 , Pixel 2 Android 10+ – Kendallkendell

did u try some different emulator? for example nexus5x - it is working perfect for me... obviously if you change something like routes in your app for example it reloades completly but changing a text or something should always fast refresh – Cynar

don't see how the emulator has anything with the fast refresh. also tried on my physical device and fast refresh doesn't work – Kendallkendell

Answer 1

TLDR;

using default export with no name ALWAYS resulted in a full reload of the app without hot reload!

Details

So after a lot of months of pain, I accidentally found a strangely enough effect: I usually write my react components in this syntax:

export default ({ ...props }) => {
  ...
};

and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!

after months of pain, accidentally i found out that changing the export to:

const Test = ({ ...props }) => {
  ...
};

export default Test;

completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!

Kendallkendell

This worked for me too. What I dont understand is that I was using default exports with no names with no issues, but at some point it started re-loading the app on every save. I tried naming the component as described above and sure enough it works... There must be something else to this, but this helps me a lot for now. Thanks for posting the solution! – Cheremkhovo

I haven't read it personally, but the docs describing how Fast Refresh works would probably help you understand why this behaviour happens. Especially in the 'How It Works' section. – Seessel

This solved for me (after trying a few other hairy stuff) - I had a screen (using React Navigation) that was a default exported component and Fast Refresh didn't work - resumed as soon as I went bak to this syntax to export const MyScreenName = () => {} like other screens! – Oscaroscillate

@Seessel nah if you actually "read it personally" you'll realize that nothing in that section mentions anything directly relevant to the behavior mentioned in this answer. – Bloodline

@Oscaroscillate I'm also using React Navigation and this fix also worked for me. Maybe the way React Navigation works has something to do with this behavior. – Bloodline

This totally works. You deserve a medal my man. – Hairy

If this works for you then you may be using github.com/storybookjs/… which adds another named export which is not a react component and so may break Fast Refresh – Ensoll

Answer 2

There is an other way to obtain this weird behavior. When you export a simple function:

//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};

from the entry file of your app (with typescript template expo init nameApp the file is App.tsx) It will exactly produce a full reload of the app rather than a hot reload.

This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.

IDK why ios don't display the modification like android does..

But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?

Loydloydie

This section will help better explain why this happens. – Seessel

FWIW, I sometimes use the VS Code refactor tool to export some section of JSX to a new file to create a component (not worth it really, TBH). This tool will silently add export to your styles const that that JSX needs in the new file. I moved the styles but didn't delete the export, which triggers this issue with hot reload. Just in case others don't realize they have an export on their styles since they didn't add it intentionally. – Earthaearthborn

Answer 3

From react-refresh-webpack-plugin troubleshoot section

Un-named/non-pascal-case-named components

See this tweet for drawbacks of not giving component proper names. They are impossible to support because we have no ways to statically determine they are React-related. This issue also exist for other React developer tools, like the hooks ESLint plugin. Internal components in HOCs also have to conform to this rule.

// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}

Pyroclastic

Answer 4

Okay so i find the solution on ReactNatives offical docs. which says

Blockquote Finally, if you edit a file that's imported by modules outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility module imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way

Official React-Native doc

this Docs says if you have a export which is a non-react code(ex:- a function which returns any value ) along with default export from a react-component which is used by another react component will trigger a full reload instead of fast refresh.

for preventing the full reload you can remove this function and keep this in another file and then export it from this file which will not reloads the fill app.

in this image i extracted the code to new file and then exported it from here to any other react component

Jezebel

Thanks! Super helpful info that led me to the fix – Exclusive

Answer 5

TLDR;

During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."

Details

the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file

before

const module = require('some-module')

after

import module from 'some-module';

Noteworthy