Goals and past experiences

[pedr0fontoura]

Hey! This was going to be a Discord comment, but I decided to post it here for documentation purposes.

A couple of things I learned building use-colyseus:

• The SDK should be small and precisely targeted using the state because that's where the difficulty lies. You don't need to wrap connecting, disconnecting, or any other room feature.
• React and Colyseus are different by definition. The former uses an immutable data model, while the latter uses a mutable one.
• Using Colyseus with React on your app is relatively easy. It takes some effort, but it's doable. Creating a general-purpose SDK to use the Colyseus state with React is hard.

The two key problems:

• The main goal of a Colyseus React SDK is to prevent unnecessary re-renders on state updates. To do that, it needs to implement selectors properly and know exactly which piece of the Colyseus state the user is trying to access.
• The second critical problem is keeping an immutable copy of that part of the state and tracking updates. Any update below the tracked node of the state tree needs to trigger a new copy of the node containing the updated data.

[endel]

We finally have an "official" React module integration 🎉 https://docs.colyseus.io/getting-started/react

Thank you @pedr0fontoura for sharing your initial implementation and experience.
A very ✨ special thanks to @FTWinston ✨ who did an amazing job at #3 👏 (I just complemented it a little bit with #6)

From here I believe we can observe real usage and improve the state of things as we move forward 🙌

Cheers!!

[midgramr]

Hi @endel can you add better Typescript support to this library? E.g., useRoomState<MyState>() complains that my state schema doesn't inherit from Schema. Also possible that I just don't understand your existing TypeScript integration. If you could add some docs on that, I'd greatly appreciate it!

[endel]

Hi @midgramr 👋 Thanks for the feedback, I've just published a new version with this change, can you please try upgrading and checking if it works for you? 🙏

[midgramr]

I'm no longer getting the type error I was getting earlier, but I'm not getting any type checking on the state variable:

const { room: myRoom, error, isConnecting } = useRoom<MyState>();
const myPlayers = useRoomState<MyState>(state => state.players);

In the snippet above, I expect to have some type inference for the lambda I pass in and myPlayers, but both of those are still types.

[endel]

I think we're good now on version 0.1.14 - can you please try it out @midgramr?

I've changed to use InferState<> in the same way it works for the raw TypeScript SDK, and added more overloads to useRoomState(), useRoomMessage(), etc. 🙌

You can now pass either the State type (Schema) or your Room type (from server):

useRoomState<MyState>();
useRoomState<MyRoom>();

[endel]

If you import all server types into your Client<T>, the useRoom() is going to return the correct Room and State types too! 🥳

[midgramr]

Nice, now that type checking works, I'm getting a different error: it seems like the state updates aren't getting received when I use useRoomState. The object I receive is always undefined even though I can clearly see state getting updated in my backend.

[endel]

Thanks for checking @midgramr, could you please share a full server + client repo for this one? 🙏 (Example: https://github.com/endel/r3f-lobby-car-prototype )