Understanding and Preventing Race Conditions

Race conditions occur when multiple asynchronous operations compete for shared resources, leading to unpredictable behavior. In JavaScript, these are particularly common in applications with multiple API calls, state updates, or user interactions.

Common Race Condition Scenarios

1. Multiple API Calls

// Problem: Results may arrive in different order than requests
async function fetchUserData(userId) {
  const profile = await fetch(`/api/profile/${userId}`);
  const posts = await fetch(`/api/posts/${userId}`);
  
  return {
    profile: await profile.json(),
    posts: await posts.json()
  };
}

// Solution: Use Promise.all for concurrent requests
async function fetchUserDataFixed(userId) {
  const [profile, posts] = await Promise.all([
    fetch(`/api/profile/${userId}`).then(res => res.json()),
    fetch(`/api/posts/${userId}`).then(res => res.json())
  ]);
  
  return { profile, posts };
}

2. State Updates in React

// Problem: Multiple setState calls may lead to race conditions
function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);  // Uses stale 'count'
    setCount(count + 1);  // Uses same stale 'count'
  };
  
  // Solution: Use functional updates
  const incrementFixed = () => {
    setCount(prev => prev + 1);  // Uses latest state
    setCount(prev => prev + 1);  // Uses latest state
  };
  
  return <button onClick={incrementFixed}>{count}</button>;
}

3. Debounced API Calls

// Problem: Multiple rapid calls may return out of order
function SearchComponent() {
  const [results, setResults] = useState([]);
  
  async function search(query) {
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    setResults(data);  // May set stale results
  }
  
  // Solution: Track latest request
  function SearchComponentFixed() {
    const [results, setResults] = useState([]);
    const latestQuery = useRef('');
    
    async function search(query) {
      latestQuery.current = query;
      const response = await fetch(`/api/search?q=${query}`);
      const data = await response.json();
      
      // Only update if this is still the latest query
      if (latestQuery.current === query) {
        setResults(data);
      }
    }
    
    return <input onChange={e => search(e.target.value)} />;
  }
}

Prevention Strategies

1. Request Cancellation

function SearchWithCancellation() {
  const [results, setResults] = useState([]);
  const abortController = useRef(null);
  
  async function search(query) {
    // Cancel previous request
    if (abortController.current) {
      abortController.current.abort();
    }
    
    // Create new abort controller
    abortController.current = new AbortController();
    
    try {
      const response = await fetch(`/api/search?q=${query}`, {
        signal: abortController.current.signal
      });
      const data = await response.json();
      setResults(data);
    } catch (error) {
      if (error.name === 'AbortError') {
        // Request was cancelled, ignore
        return;
      }
      throw error;
    }
  }
  
  return <input onChange={e => search(e.target.value)} />;
}

2. Request Queue

class RequestQueue {
  constructor() {
    this.queue = [];
    this.processing = false;
  }
  
  async add(request) {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject });
      this.processNext();
    });
  }
  
  async processNext() {
    if (this.processing || this.queue.length === 0) {
      return;
    }
    
    this.processing = true;
    const { request, resolve, reject } = this.queue.shift();
    
    try {
      const result = await request();
      resolve(result);
    } catch (error) {
      reject(error);
    } finally {
      this.processing = false;
      this.processNext();
    }
  }
}

// Usage
const queue = new RequestQueue();

async function processInOrder(id) {
  return queue.add(async () => {
    const response = await fetch(`/api/data/${id}`);
    return response.json();
  });
}

3. Mutex Implementation

class Mutex {
  constructor() {
    this.queue = [];
    this.locked = false;
  }
  
  async acquire() {
    return new Promise(resolve => {
      if (!this.locked) {
        this.locked = true;
        resolve();
      } else {
        this.queue.push(resolve);
      }
    });
  }
  
  release() {
    if (this.queue.length > 0) {
      const next = this.queue.shift();
      next();
    } else {
      this.locked = false;
    }
  }
}

// Usage
const mutex = new Mutex();

async function criticalSection() {
  await mutex.acquire();
  try {
    // Perform synchronized operations
    await synchronizedOperation();
  } finally {
    mutex.release();
  }
}

Testing Race Conditions

describe('Race Condition Tests', () => {
  it('should handle concurrent requests correctly', async () => {
    const promises = [];
    const results = new Set();
    
    // Create multiple concurrent requests
    for (let i = 0; i < 10; i++) {
      promises.push(
        fetchData(i).then(result => {
          results.add(result);
        })
      );
    }
    
    await Promise.all(promises);
    
    // Verify results
    expect(results.size).toBe(10);
  });
  
  it('should maintain order with request queue', async () => {
    const queue = new RequestQueue();
    const results = [];
    
    // Add requests in specific order
    await Promise.all([
      queue.add(() => {
        results.push(1);
        return delay(100);
      }),
      queue.add(() => {
        results.push(2);
        return delay(50);
      }),
      queue.add(() => {
        results.push(3);
        return delay(10);
      })
    ]);
    
    // Verify order is maintained
    expect(results).toEqual([1, 2, 3]);
  });
});

Best Practices

1. Use Atomic Operations

   // Problem: Non-atomic operation
   let counter = 0;
   async function increment() {
     const value = counter;
     await delay(100);
     counter = value + 1;
   }
   
   // Solution: Use atomic operations
   const counter = new AtomicInteger(0);
   async function increment() {
     counter.incrementAndGet();
   }

2. Implement Retry Logic

   async function fetchWithRetry(url, options = {}, retries = 3) {
     try {
       return await fetch(url, options);
     } catch (error) {
       if (retries > 0) {
         await delay(1000);
         return fetchWithRetry(url, options, retries - 1);
       }
       throw error;
     }
   }

3. Use Version Numbers

   function VersionedState() {
     const [state, setState] = useState({ data: null, version: 0 });
     
     async function updateData(newData) {
       const newVersion = state.version + 1;
       const response = await processData(newData);
       
       // Only update if version matches
       setState(current => {
         if (current.version === newVersion - 1) {
           return { data: response, version: newVersion };
         }
         return current;
       });
     }
   }

Debugging Tools

1. Chrome DevTools Network Panel

   • Use the network panel to observe request timing
   • Enable "Slow 3G" to make race conditions more apparent
   • Use request blocking to simulate failures

2. Performance Profiling

   console.time('operation');
   await performOperation();
   console.timeEnd('operation');

3. Request Logging

   class RequestLogger {
     static log(method, url, startTime) {
       const duration = Date.now() - startTime;
       console.log(`${method} ${url} completed in ${duration}ms`);
     }
     
     static async wrap(promise, method, url) {
       const startTime = Date.now();
       try {
         return await promise;
       } finally {
         this.log(method, url, startTime);
       }
     }
   }

Prevention Checklist

1. Design Phase

   • Identify shared resources
   • Plan synchronization points
   • Document race condition risks

2. Implementation Phase

   • Use appropriate synchronization primitives
   • Implement request cancellation
   • Add version tracking

3. Testing Phase

   • Create concurrent test scenarios
   • Use network throttling
   • Test with different timing conditions