Controlling Asynchronous Polling Streams with Async Generators in React

import { useState, useEffect } from 'react';
 
async function* pollStatus(jobId, intervalMs = 2000) {
  while (true) {
    const res = await fetch(`/api/jobs/${jobId}`);
    const data = await res.json();
    yield data;
    if (data.status === 'completed' || data.status === 'failed') break;
    await new Promise((resolve) => setTimeout(resolve, intervalMs));
  }
}
 
export function JobTracker({ jobId }) {
  const [job, setJob] = useState(null);
 
  useEffect(() => {
    let isCancelled = false;
    const generator = pollStatus(jobId);
 
    async function consume() {
      for await (const update of generator) {
        if (isCancelled) break;
        setJob(update);
      }
    }
 
    consume();
    return () => { isCancelled = true; };
  }, [jobId]);
 
  return <div>Status: {job ? job.status : 'Connecting...'}</div>;
}