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)

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!

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 ?

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 />;
}

Answer 4

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';