signals
signals copied to clipboard
preactjs
New version of preact signals for react not working with React Native
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
The solution for it is to roll back to 1.2.1 and apply a little patch (if you are using react-navigation) #257
I get the same error in a plain React app with vite -m production build. Works fine with vite.
Here's the console errors...
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
Hint, hint? __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED Fired!
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] }
This is not bug - this the feature https://github.com/facebook/hermes/issues/114
They are added 'show source' to actually check function code
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
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).
@andrewiggins Can i create PR to add information for docs how to use preact signals in react native?
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.
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.
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
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?
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.
