Fast refresh does not work in React Native when signals and react-navigation are installed

[ejjraifihamza]

Description: I am currently in the process of refactoring my React Native code from using React state and useEffect to utilizing signals for state management and effects. While doing this, I encountered an issue related to fast refresh when both signals and react-navigation are installed.

Steps to Reproduce:

1. Install react-navigation and set up a basic navigation structure.
2. Implement signals for state management and effects.
3. Observe that fast refresh stops working.

Expected Behavior: Fast refresh should work seamlessly even when signals and react-navigation are used together.

Actual Behavior: Fast refresh is not functioning as expected, making the development process less efficient.

Additional Context:

• I have already addressed one related issue here where a user provided a patch, and it solved the problem.
• The second error is more critical, as fast refresh ceases to work entirely.

Environment: System: OS: macOS 13.5.2 CPU: (12) x64 Apple M2 Pro Memory: 41.17 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.10.0/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm Watchman: 2023.11.06.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.12.0 - ///.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild Languages: Java: 11.0.21 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.10 => 0.70.10 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found.

I appreciate your help in addressing this issue. Fast refresh is a crucial tool in the development process, and resolving this will significantly improve the developer experience.

[XantreDev]

We empowered signals into our codebase and it broke our HMR too (patching of react breaks things). We have been waiting for preact signals transform, but seems to be for now no one work upon it. So I will try to clone current runtime and prune react monkeypatching

[ejjraifihamza]

Thank you, While I appreciate the benefits of refactoring to signals for state and effects, I've encountered a challenge with fast refresh, as discussed in this issue. For now, I'll pause the refactoring to signals until the mentioned problem is resolved. I'll keep an eye on updates and look forward to continuing the migration once the issue is addressed

[XantreDev]

You can try it now. My corporate application works well with transform: https://github.com/XantreGodlike/preact-signals/tree/main/packages/react It should be tested in real scenarios at the next week maybe there will be some fixes

[XantreDev]

@ejjraifihamza Testers said that app behaves the same as with official integration, so I think it's stable enough to use it

[vladbelozertsev]

@XantreGodlike does it works with RN Drawer?

Reproduce: 1) npm install: @preact-signals/safe-react AND babel-plugin-module-resolver 2) Add plugins to babel.config.js

When i try to navigate somewhere (any screen) it shows me the error: Rendered more hooks than during the previous render. This error is located at: in Drawer (created by DrawerViewBase)

When i remove plugins from babel.config.js it works fine.

[XantreDev]

Are you talking about react native navigation?

[vladbelozertsev]

Yes. React native navigation drawer.

[XantreDev]

I think this issue is not actual now because of @preact/signals-react v2. This issue happed, because of monkeypatching react

[JoviDeCroock]

This should be fixed with our new Babel plugin, try upgrading to the new major