function processLargeArray(data) {
  let i = 0;

  function processChunk() {
    const start = performance.now();
    // Process until we hit our time budget (16ms ≈ 60fps)
    while (i < data.length && performance.now() - start < 16) {
      doSomething(data[i]);
      i++;
    }

    if (i < data.length) {
      setTimeout(processChunk, 0); // yield here
    } else {
      console.log("Processing complete!");
    }
  }

  processChunk();
}

// setTimeout schedules the callback in the task queue.
// The main thread is free to render or handle events.
// After the current stack and microtasks finish, the task runs.

function processWithAnimationFrame(data) {
  let i = 0;

  function step(timestamp) {
    // Process a fixed number of items per frame
    const endIndex = Math.min(i + 100, data.length);

    while (i < endIndex) {
      doSomething(data[i]);
      i++;
    }

    if (i < data.length) {
      requestAnimationFrame(step); // yield here
    } else {
      console.log("Processing complete!");
    }
  }

  requestAnimationFrame(step);
}

async function processAsync(data) {
  // Helper function to create a yielding point
  const yieldToMain = () => new Promise((resolve) => setTimeout(resolve, 0));

  for (let i = 0; i < data.length; i++) {
    doSomething(data[i]);

    if (i % 100 === 0 && i > 0) {
      await yieldToMain(); // yield here
    }
  }
}

// You can also yield with requestAnimationFrame:
// await new Promise(requestAnimationFrame);

// Note: This requires the scheduler package or a polyfill
import { scheduleCallback, NormalPriority } from "scheduler";

function processWithScheduler(data) {
  let i = 0;

  function processNextBatch() {
    // Process items for 5ms
    const endTime = performance.now() + 5;

    while (i < data.length && performance.now() < endTime) {
      doSomething(data[i]);
      i++;
    }

    if (i < data.length) {
      // Schedule next batch with normal priority
      scheduleCallback(NormalPriority, processNextBatch);
    }
  }

  scheduleCallback(NormalPriority, processNextBatch);
}

// Using setImmediate() - ideal for Node.js environments
function processLargeDataset(data) {
  let i = 0;

  function processChunk() {
    const chunkSize = 1000;
    const end = Math.min(i + chunkSize, data.length);

    // Process current chunk
    while (i < end) {
      processItem(data[i]);
      i++;
    }

    if (i < data.length) {
      // Yield to event loop with Node.js-specific API
      setImmediate(processChunk);
    } else {
      console.log("Processing complete!");
    }
  }

  processChunk();
}

function DataProcessor({ items }) {
  const [processed, setProcessed] = useState(0);

  useEffect(() => {
    if (processed >= items.length) return;

    const batchSize = 50;
    const nextProcessed = Math.min(processed + batchSize, items.length);

    // Process current batch
    for (let i = processed; i < nextProcessed; i++) {
      processItem(items[i]);
    }

    // Schedule next batch
    const timeoutId = setTimeout(() => {
      setProcessed(nextProcessed);
    }, 0);

    return () => clearTimeout(timeoutId);
  }, [processed, items]);

  return (
    <div>
      Processing: {processed} of {items.length} items
    </div>
  );
}

function SearchResults({ query }) {
  // The deferred value will update after the main thread is free
  const deferredQuery = useDeferredValue(query);

  // This expensive list will render with the deferred value
  return <ExpensiveList query={deferredQuery} />;
}

function SearchComponent() {
  const [query, setQuery] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleSearch(e) {
    // Update input immediately - high priority UI feedback
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Mark results calculation as low priority - can be deferred
    startTransition(() => {
      // This expensive operation won't block the input
      const results = performExpensiveSearch(newQuery);
      setSearchResults(results);
    });
  }

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending ? (
        <p>Loading results...</p>
      ) : (
        <ResultsList items={searchResults} />
      )}
    </div>
  );
}

// Server Component (runs on the server, never on the client)
async function ExpensiveDataProcessor() {
  // Heavy data processing happens on the server
  const data = await fetchLargeDataset();
  const processedData = processExpensiveCalculation(data);

  // Only the result is sent to the client
  return <DataDisplay results={processedData} />;
}

// Client Component (runs in the browser)
("use client");
function DataDisplay({ results }) {
  // The browser only needs to render the results
  return (
    <div>
      {results.map((item) => (
        <ResultItem key={item.id} data={item} />
      ))}
    </div>
  );
}