piotr-oles

// scheduler package API (the most important bits)
type PriorityLevel = number; // currently it's just a number
type SchedulerCallback = () => SchedulerCallback | void; // callback can return "continuation" callback
type CallbackNode = unknown; // we don't need to know how callback node is represented internally

// available priorities
const ImmediatePriority: PriorityLevel;    // must run immidiately
const UserBlockingPriority: PriorityLevel; // will run in 250ms at the latest
const NormalPriority: PriorityLevel;       // will run in 5s at the latest
const IdlePriority: PriorityLevel;         // will run in 10s at the latest

piotr-oles

import {
  unstable_ImmediatePriority as ImmediatePriority,
  unstable_UserBlockingPriority as UserBlockingPriority,
  unstable_NormalPriority as NormalPriority,
  unstable_IdlePriority as IdlePriority,
  unstable_LowPriority as LowPriority,
  unstable_scheduleCallback as scheduleCallback,
  unstable_cancelCallback as cancelCallback,
  unstable_shouldYield as shouldYield,
  unstable_runWithPriority as runWithPriority,

piotr-oles

import { useCallback, useEffect, useRef, useState } from "react";
import {
  cancelCallback,
  scheduleCallback,
  runWithPriority,
  ImmediatePriority,
  IdlePriority,
} from "./scheduler";

export function useTransitionEffect() {

piotr-oles

const [isPending, startTransitionEffect, stopTransitionEffect] =
  useTransitionEffect();

piotr-oles

startTransitionEffect(function* () {
  for (let item of items) {
    doSomeComplexSideEffects(item);
    yield;
  }
});

piotr-oles

startTransitionEffect(function* () {
  const cleanup = () => cleanupSideEffects();

  for (let item of items) {
    doSomeComplexSideEffects(item);
    yield cleanup;
  }
  return cleanup;
});

piotr-oles

useEffect(() => {
  startTransitionEffect(function* () {
    // effect
  });

  return () => stopTransitionEffect();
}, []);

piotr-oles

function App() {
  const [isPending, startTransitionEffect, stopTransitionEffect] =
    useTransitionEffect();

  function handleStartClick() {
    startTransitionEffect(function* () {
      // do stuff, for example render something on a canvas
    });
  }
  function handleStopClick() {

piotr-oles

import { shouldYield } from "./scheduler";

startTransitionEffect(function* () {
  for (let item of items) {
    doSomeComplexSideEffects(item);
    if (shouldYield()) {
      yield;
    }
  }
});

piotr-oles

import { runWithPriority, NormalPriority } from "./scheduler";

startTransitionEffect(function* () {
  for (let item of items) {
    runWithPriority(NormalPriority, () => {
      setCount((prevCount) => prevCount + 1);
    });
    yield;
  }
});