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!

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

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 ?

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