DRY

src/tictactoe/TicTacToe.tsx

@@ -18,6 +18,21 @@ export default function TicTacToe() {
   // const [openMatches, setOpenMatches] = useState<Match[]>([]);
   const [players, setPlayers] = useState<string[]>([]);
 
+  function onMatchDataCallback(msg: { opCode: number; data: any }) {
+    console.log("[Match Data]", msg);
+
+    if (msg.opCode === 2) {
+      const state = msg.data;
+      console.log("Match state:", state);
+
+      setBoard(state.board);
+      setTurn(state.turn);
+      setWinner(state.winner || null);
+
+      // new:
+      setPlayers(state.players || []);
+    }
+  }
   const {
     loginOrRegister,
     joinMatchmaker,
@@ -29,21 +44,7 @@ export default function TicTacToe() {
   } = useNakama();
 
   useEffect(() => {
-    onMatchData((msg) => {
+    onMatchData(onMatchDataCallback);
-      console.log("[Match Data]", msg);
-
-      if (msg.opCode === 2) {
-        const state = msg.data;
-        console.log("Match state:", state);
-
-        setBoard(state.board);
-        setTurn(state.turn);
-        setWinner(state.winner || null);
-
-        // new:
-        setPlayers(state.players || []);
-      }
-    });
   }, [onMatchData]);
 
   // useEffect(() => {
@@ -72,21 +73,7 @@ export default function TicTacToe() {
     await loginOrRegister(username);
 
     // Match data listener
-    onMatchData((msg) => {
+    onMatchData(onMatchDataCallback);
-      console.log("[Match Data]", msg);
-
-      if (msg.opCode === 2) {
-        const state = msg.data;
-        console.log("Match state:", state);
-
-        setBoard(state.board);
-        setTurn(state.turn);
-        setWinner(state.winner || null);
-
-        // new:
-        setPlayers(state.players || []);
-      }
-    });
   }
 
   // ------------------------------------------