New version of preact signals for react not working with React Native

[XantreDev]

In my RN apps, preact signals not working. Previous implementation wasn't working because of navigation.

 ERROR  TypeError: Cannot read property 'alternate' of null

This error is located at:
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in QueryClientProvider (created by PersistQueryClientProvider)
    in PersistQueryClientProvider (created by CacheProvider)
    in CacheProvider (created by App)
    in App (created by gestureHandlerRootHOC(App))
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by gestureHandlerRootHOC(App))
    in gestureHandlerRootHOC(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in oone_drive(RootComponent), js engine: hermes

However its working in expo snack: https://snack.expo.dev/@xantregodlike/funny-pretzel?platform=android This issue is not reproducing event in pure react native starter. I think it can be related with some external libraries. When i will detect which one is causing this issue - it will add reproduce steps

[XantreDev]

@andrewiggins

[XantreDev]

Signals is working in pure repo. So we will investigate more about it

[fadi-quader-mox]

I'm having the same issue

[Voznov]

The solution for it is to roll back to 1.2.1 and apply a little patch (if you are using react-navigation) #257

[leobastiani]

same here

[pmartin-cogility]

I get the same error in a plain React app with vite -m production build. Works fine with vite. Here's the console errors...

[geakstr]

Same for me with fresh Expo project, signals v1.2.2 works though

[geakstr]

I'm checking diff between 1.2.2 and 1.3.0 and... I'm not exactly sure yet but it might be related that signals >=v1.3.0 started to use __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED from react package

https://github.com/preactjs/signals/compare/%40preact/signals-react%401.2.2...%40preact/signals-react%401.3.0

[pmartin-cogility]

Hint, hint? __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED Fired!

[XantreDev]

Seems to be one of the reason - wrong function serialization

 LOG  useCallbackImpl function throwInvalidHookError() { [bytecode] }
 LOG  useCallbackImpl function useCallback(a0, a1) { [bytecode] }
 LOG  useCallbackImpl function useCallback(a0, a1) { [bytecode] }
 LOG  useCallbackImpl function useCallback(a0, a1) { [bytecode] }
 LOG  function bebe() { [bytecode] }
 LOG  useCallbackImpl function useCallback(a0, a1) { [bytecode] }

[XantreDev]

This is not bug - this the feature https://github.com/facebook/hermes/issues/114

They are added 'show source' to actually check function code

[XantreDev]

We actually can actually patch react-native, but there are many renderers (react-native-skia, three-fiber). I think its blocker in terms of React Native support.

Can we give user opportunity to select auto tracking method, because old auto tracking via wrapping each component with proxy working very well in case of react native. @andrewiggins What do you think?

Maybe it should be @preact/signals-react-native package, or just "react-native" field in package.json exports

[andrewiggins]

I'm currently pursuing a method that would use a babel transform on components to track signals instead of patching internals. That should hopefully work better for all renderers. PR for feedback should be out soon (a couple days).

[XantreDev]

It would be really interesting. Appreciate your work

[XantreDev]

@andrewiggins Can i create PR to add information for docs how to use preact signals in react native?

[ThatGuySam]

I couldn't even get v1.2.0 to work with my Expo setup, so I ended up just going with Jotai just to get something that works right now: https://jotai.org/docs/guides/react-native

It's not ideal and not as clean, but it works for now, especially if it's a new project and you can't wait for an official patch.

[XantreDev]

@andrewiggins when real way to use babel transform will be provided?

[andrewiggins]

Initial version of babel transform is available at https://npm.im/@preact/signals-react-transform Give it a try and lemme know how it goes.

[XantreDev]

But how to use it?). We should install @preact/signals-core and write useSignal, useComputed..., manually? If we will use @preact/signals-react it will patch react and broke the app. In case of pnpm we can produce preact signals runtime duplication, because we should install @preact/signals-react and @preact/signals-react-transform will have its own version of @preact/signals-react

[pmartin-cogility]

The documentation for @preact/signals-react-transform implies that it's not possible to opt into the "bypass VDOM" optimization. Yes?

Perhaps a step back to a simplified approach where there's no patching React? Instead, provide a simple component that can do the optimization? <Signal $={mySignal} />? Add yet another library: @preact/signals-react-plain?

[rschristian]

Perhaps a step back to a simplified approach where there's no patching React? Instead, provide a simple component that can do the optimization? <Signal $={mySignal} />?

How would this work? The issue resides in React's reconciler, any special component you make is subject to the reconciler just as every other component is.

[XantreDev]

@andrewiggins what do you think about my concerns?