Orchestrating Complex Control Flow with Generator Functions in Custom React Hooks

import { useState, useCallback, useRef } from 'react';
 
type StepGenerator = Generator<string, void, unknown>;
 
export function useWorkflow(workflowFn: () => StepGenerator) {
  const generatorRef = useRef<StepGenerator | null>(null);
  const [currentStep, setCurrentStep] = useState<string | null>(null);
 
  const start = useCallback(() => {
    generatorRef.current = workflowFn();
    const first = generatorRef.current.next();
    setCurrentStep(first.done ? null : first.value);
  }, [workflowFn]);
 
  const advance = useCallback((payload?: unknown) => {
    if (!generatorRef.current) return;
    const res = generatorRef.current.next(payload);
    setCurrentStep(res.done ? null : res.value);
  }, []);
 
  return { currentStep, start, advance };
}