React callback guidance

[FTWinston]

Hi, I noticed that the documentation on how to use client-side callbacks with react is "TODO".

I wanted an immutable version of my state on the client, so that it worked nicely with react props. I've got a reasonably complicated state tree, and ran into a few issues keeping track of listeners at different levels of my state tree.

Having given up on managing listeners myself, I made the following hook. This uses callbacks to provide react with immutable snapshots of mutable room states:
https://gist.github.com/FTWinston/61cefee837d50a492858fd3857396f37

Is this anything like what you might have planned for the react documentation? It's working for changes to arrays inside objects inside a map, though I haven't tested it extensively.

Would you be interested in a PR that links to this gist? That might be useful to share, until proper documentation is available.

[endel]

Hi @FTWinston, thank you so much for sharing this!

We have a repository with an open discussion how to approach this here colyseus/react-use-room-state#2

Ideally we'd like to have better react tooling available either via a separate module, or inside the JavaScript SDK itself that could be imported via ESM (e.g. import {xx} from "@colyseus/sdk/react")

Does your solution covers not making a copy of the entire state whenever a single child object has changed? I think this is a major issue when using .toJSON() directly at the root room.state, as it could cause a re-render of objects that hasn't really changed.

[FTWinston]

Hey, thanks for the link. I hadn't considered using a selector to only get an immutable copy of part of the state. That's a good idea: I've updated this hook to include a selector.

Yes, this hook should only update the parts of the state that have changed.

e.g. if the state has a players array and players[3] has the ammo field on the second item in its weapons array, the following objects would be reassigned:
state, players, players[3], weapons and weapons[1].
Other items (players[2], weapons[0] etc) would not be reassigned.

At least, that's how it should work. It could do with some unit tests!

If it's alright with you, I'll close this ticket and start a PR on colyseus/react-use-room-state. I can include tests in that, and that should be an easier way to discuss this code. Maybe I could even work out why I had to switch from onChange to listen ... something with arrays wasn't working right, but I don't recall what. 🤷‍♂️

[endel]

Wow, thanks for the quick update! It would be perfect if you can include some tests for this as well.

I've just sent you an invite giving you push rights to the colyseus/react-use-room-state repository. If you can create a branch and possibly create a PR it would be incredible. There are another 6 folks with push rights on this repo, we can ping them all to get their thoughts and reach a consensus together :))

Thank you! Cheers!

[FTWinston]

Note: colyseus/react-use-room-state#3 contains the latest version of this hook