Custom Generator-Based Fiber Work Loop Control Flow

import React, { useEffect, useRef, useState } from 'react';
 
function* createWorkLoop(units) {
  for (let i = 0; i < units.length; i++) {
    yield units[i]();
  }
}
 
export function FiberScheduler({ tasks }) {
  const [completed, setCompleted] = useState([]);
  const generatorRef = useRef(null);
 
  useEffect(() => {
    generatorRef.current = createWorkLoop(tasks);
    let frameId;
 
    const step = (deadline) => {
      let work = generatorRef.current?.next();
      while (work && !work.done && deadline.timeRemaining() > 0) {
        if (work.value) setCompleted((prev) => [...prev, work.value]);
        work = generatorRef.current.next();
      }
      if (work && !work.done) {
        frameId = requestIdleCallback(step);
      }
    }; globalThis.requestIdleCallback ? (frameId = requestIdleCallback(step)) : step({ timeRemaining: () => 1 });
    return () => cancelIdleCallback?.(frameId);
  }, [tasks]);
 
  return <div>Completed units: {completed.length}</div>;
}