Managing multiple shared states between pairs of users

Question

I'm fairly new to React/React Native and I've built a pretty basic app that manages the state of board game characters for two players. The characters are all stored in an array with useState - there are two screens, one that shows player one's characters, and another that shows player two's. I have the following requirements:

1. A user (player one) can create a hosted 'game' so that player two can connect.
2. Player two is able to find and connect to the same game as that player (we can assume they will be on the same network).
3. Player one is able to edit/rename/delete the characters on the player one screen.
4. Player two is able to do the same as above for the player two screen.
5. Any changes made by either player are updated on both player's devices.
6. Multiple games may need to be managed at the same time, depending on the number of pairs of players using the app.

Can anyone recommend the best high-level approach for achieving this?

Answer 1

For your objective I would like you use a library like socket.io.

socket.io creates a connection between two clients and the data can be interchanged between both clients with use of events.

One player's device will emit a event and other will recieve the event containing current state or data. You can trigger events for changes in game and update those in other device from recieved data.

This is just and overview If you decide to use socket.io I would recommend you to go through it's documentation.