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

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