signals
signals copied to clipboard
preactjs
Using signals package with react router results in a wierd jsx error
I tried using @preact/signals-react in a project with react-router 6 but I got that error which doesn't make any sense to me, the error is complaining about react-router but originates from @preact/signals-react and only happens when I import/use anything from @preact/signals-react
here is a link https://stackblitz.com/edit/react-router-starter-gfxkdm?file=components%2FHome.js to reproduce the error, try commenting out the signal import/usage in Home.js and everything will work fine
I think it could be related to the patches to JSX factories, which breaks the react-router check for the <Route/> element type somehow, if I used it with the routing config approach from react-router 6.4 it works fine
couldn't find a workaround for this error so I had to use the @preact/signals-core package with this custom hook
export function useSignalValue<T>(signal: Signal<T>) {
const [value, setValue] = useState<T>(() => signal.peek());
useEffect(() => signal.subscribe(setValue), [signal]);
return value;
}
that allowed me to update the signals from anywhere and then where I use that hook react will rerender because of the local state update
it is not the best/optimal solution but hopefully, this issue with react-router could be fixed
I have the same error, using @react-navigation/native (6.0.13) and @react-navigation/stacks (6.3.2). Signals seems to insert itself into the list of children of the Stack.Navigator component, causing it to trigger a runtime exception. Signals thus cannot presently be used in RN apps that rely on react-navigation.
Ran into this today. We may need to consider finding a way to use SECRET_INTERNALS again.
Problem is the proxy around every React element type (the actual components) to enable rerending when signals change. So the proxy around the Route component breaks the element.type === Route check inside react-router. @developit Interested in how you plan to fix this. Strict equality check will always fail here, no?
@lennerd the fix may be to go back to injecting updaters into components via react internals rather than wrapping all components. I've been using and testing a local version of that approach this week, and it's working in dev and prod builds using React Router 6.4.
Am able to solve the issue by rolling back the router version to 6.0.0
@developit uff, okay. Just had another, quite similar issue, which was really hard to debug (actually was revisting it again after weeks).
Essentially React was warning me about an unmounted component updating its state. Via the debugger I was able to see why: my root component (HistoryRouter from react-router-dom) was unmounting the complete tree underneath it. Turns out: I was lazy loading @preact/signals-react. So when triggering a navigation and rerendering the root component (HistoryRouter) React essentially found new child component type (a proxy from @preact/signals-react) and unmounted the whole thing.
So long story short: what is your progress with the fix? 😬
I've been using this "lite" version of the React adapter in the meantime, which doesn't include the Signals optimizations, but works with all React libraries and versions: https://gist.github.com/developit/f957536487a84dee334cfeb53748f865
@lennerd as a fix for the lazy-loading issue, you can add a static import for @preact/signals-react to your root component (<App />).
@developit Thats what I'm doing right now and its working just fine. Still not quite what I was hoping for when doing code splitting. 😉
In any case, thanks for the gist! Nice to see how easy the core package can be included in React. I currently have a quite complex setup with multiple class having signal and computed properties, so it's easier and less error prone to use the original package. And work around the error described here until some fix was released.
As @gokul-waterlabs suggested, I tried using router 6.0.0 and it seems to work, any explainations on why it worked?
I've been using this "lite" version of the React adapter in the meantime, which doesn't include the Signals optimizations, but works with all React libraries and versions: https://gist.github.com/developit/f957536487a84dee334cfeb53748f865
@lennerd as a fix for the lazy-loading issue, you can add a static import for
@preact/signals-reactto your root component (<App />).
Previously I can put signal(0) in a utils file and call it everywhere I want but now with the 'lite' version. We can only use it as hooks which need to be in a React component instead a util fn. Am I understanding that correctly? Or how do we pass useSignal between components without prop drillings
@jaydenintusurg in the lite version from my gist, you can use signal() anywhere, then pass those values through useSignal() to access them. You don't have to create signals with the hooks, only access them.
This version of signals, is kinda atom state management, without main feature of signals. Are you want to deprecate version for react? Do you need help?
