This is a work-in-progress experiment and currently does not work as expected.
The idea here is to create a React hook that is able to trigger a re-render only when the requested portion of the state receives an update.
Since @colyseus/schema v3 exposes the .triggerChanges method from the Decoder - we can hopefully use this to our advantage.
Inspiration/previous work has been done by @pedr0fontoura on pedr0fontoura/use-colyseus/
The App.tsx uses useRoomState() to "subscribe" to simulated room state changes:
function App() {
const state = useRoomState((state) => state);
// ...
}The simulation of server-side changes are made via simulatePatchState():
simulatePatchState((state) => {
const randomKey = Array.from(state.players.keys())[Math.floor(Math.random() * state.players.size)];
state.players.delete(randomKey);
});