Return from subscribe?

[ndrean]

I must probably misunderstand the usage of subscribe but I want to return from it. I am using subscribe outside React, more precisely, in a route of Universal-Router). Whenever the proxied state changes, I want to capture the state change to pass the updated state as a prop to a React component to render.

Note that Universal-Router needs to return a React component.

Something like:

vstore = ({selection: [{type: "a", val: 1}, {type: "b", val: 2},...]

let selected = []
subscribe(vstore, () => {
   console.log("state changed");
   vstore.selection.forEach(({ type, val }) => {
        if ((type = "language")) {
            selected= list.filter((e) => e.language == val);
        }
    });
   return selected; <-- no!
});

return Home({ selected});

I cannot pass the return Home({selected}) inside subscribe nor can return.

Alternatively, I firstly tried to use useSnapshot inside the componennt that sets the "selections" and renders the "selected" items but I have this nice message :)

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

What could be the alternatives?

[dai-shi]

You probably want to use subscribe+useState.
This might help: https://github.com/pmndrs/valtio/blob/211ee3eee9ebb17a70771ce9d06726f3d20939bd/docs/how-tos/how-to-avoid-rerenders-manually.mdx#subscribe-and-set-local-state-conditionally

[ndrean]

I am puzzled, I can't use useState either. React points me to the link below and suggests to audit with the command npm ls react but I imagine you know all this very well.
https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

[ndrean]

The problem was that I generated a React app with Vite and this doesn't work, at least when using UniversalRouter (much simpler and much lighter than ReactRouter). The exact same code with CRA does work, so the solution of useState in a subscribe will indeed render on changes. Thanks!

Nb: this research made me discover Zustand, "easy" to use outside of React and doesn't return proxied objects. 👍