(fix) state-staleness patch focused on Tab restarts

Author: Ammaar-Alam

client/src/components/Typing.jsx

@@ -510,7 +510,8 @@ function Typing({
           startTime: null,
           inProgress: false,
           completed: false,
-          manuallyStarted: false
+          manuallyStarted: false,
+          results: []
         }));
 
       }

client/src/context/RaceContext.jsx

@@ -335,18 +335,29 @@ export const RaceProvider = ({ children }) => {
       });
     };
 
-    const handleRaceStart = (data) => {
-      // Only process the race:start event if:
-      // 1. It's not practice mode, OR
-      // 2. It's practice mode but we haven't manually started it yet
-      if (raceState.type !== 'practice' || !raceState.manuallyStarted) {
-        setRaceState(prev => ({
+    const handleRaceStart = (data = {}) => {
+      let shouldResetTyping = false;
+      setRaceState(prev => {
+        if (data.code && prev.code && data.code !== prev.code) {
+          return prev;
+        }
+        // Only process the race:start event if:
+        // 1. It's not practice mode, OR
+        // 2. It's practice mode but we haven't manually started it yet
+        if (prev.type === 'practice' && prev.manuallyStarted) {
+          return prev;
+        }
+        shouldResetTyping = true;
+        return {
           ...prev,
           startTime: data.startTime,
           inProgress: true,
-          countdown: null
-        }));
-        
+          countdown: null,
+          results: []
+        };
+      });
+      
+      if (shouldResetTyping) {
         // Reset typing state
         setTypingState({
           input: '',
@@ -384,20 +395,33 @@ export const RaceProvider = ({ children }) => {
       });
     };
 
-    const handleResultsUpdate = (data) => {
-      setRaceState(prev => ({
-        ...prev,
-        // Sort results by completion time (ascending)
-        results: data.results.sort((a, b) => a.completion_time - b.completion_time) 
-      }));
+    const handleResultsUpdate = (data = {}) => {
+      setRaceState(prev => {
+        if (data.code && prev.code && data.code !== prev.code) {
+          return prev;
+        }
+        const sortedResults = Array.isArray(data.results)
+          ? [...data.results].sort((a, b) => a.completion_time - b.completion_time)
+          : [];
+        return {
+          ...prev,
+          // Sort results by completion time (ascending)
+          results: sortedResults
+        };
+      });
     };
 
-    const handleRaceEnd = () => {
-      setRaceState(prev => ({
-        ...prev,
-        inProgress: false,
-        completed: true
-      }));
+    const handleRaceEnd = (data = {}) => {
+      setRaceState(prev => {
+        if (data.code && prev.code && data.code !== prev.code) {
+          return prev;
+        }
+        return {
+          ...prev,
+          inProgress: false,
+          completed: true
+        };
+      });
     };
 
     // Inactivity event handlers
@@ -669,7 +693,8 @@ export const RaceProvider = ({ children }) => {
         startTime: null,
         inProgress: false,
         completed: false,
-        manuallyStarted: false
+        manuallyStarted: false,
+        results: []
       };
 
       // Build options with current snippet filters

server/controllers/socket-handlers.js

@@ -2091,7 +2091,7 @@ const startRace = async (io, code) => {
     }
 
     // Broadcast race start
-    io.to(code).emit('race:start', { startTime: race.startTime });
+    io.to(code).emit('race:start', { code, startTime: race.startTime });
   } catch (err) {
     console.error('Error starting race:', err);
   }
@@ -2154,7 +2154,7 @@ const handlePlayerFinish = async (io, code, playerId, resultData) => {
     .sort((a, b) => a.completion_time - b.completion_time); // Sort by time initially
 
   // Broadcast updated results list
-  io.to(code).emit('race:resultsUpdate', { results: allResults });
+  io.to(code).emit('race:resultsUpdate', { code, results: allResults });
 
   // Check if all players have finished
   if (players.every(p => p.completed)) {
@@ -2197,7 +2197,7 @@ const endRace = async (io, code) => {
     }
 
     // Broadcast race end signal (without results payload)
-    io.to(code).emit('race:end'); 
+    io.to(code).emit('race:end', { code }); 
     console.log(`Broadcasted race end signal for ${code}`);
 
   } catch (err) {