Stopwatch with React State and Lifecycle Hooks

Interactive Stopwatch Example

About This Example

This version demonstrates using transitionHooks instead of useEffect:

• Uses transition hooks to manage side effects
• Provides better TypeScript autocompletion support
• Constrains event types to their specific states

Machine Code

machine.ts

import { defineStates, createMachine, assignEventApi } from "matchina";

export const createStopwatch = () => {
  // Define states using defineStates
  const states = defineStates({
    Stopped: {},
    Ticking: {},
    Suspended: {},
  });

  // Create the base machine with states, transitions, and initial state
  const baseMachine = createMachine(
    states,
    {
      Stopped: {
        start: "Ticking",
      },
      Ticking: {
        stop: "Stopped",
        suspend: "Suspended",
        clear: "Ticking",
      },
      Suspended: {
        stop: "Stopped",
        resume: "Ticking",
        clear: "Suspended",
      },
    },
    "Stopped"
  );

  //Use assignEventApi to enhance the machine with utility methods
  return assignEventApi(baseMachine);
};

useStopwatch.ts

import { setup, transitionHooks } from "matchina";
import { useMachine } from "matchina/react";
import { useMemo, useState } from "react";
import { tickEffect } from "../lib/tick-effect";
import { createStopwatch } from "./machine";

export function useStopwatch() {
  const [startTime, setStartTime] = useState<number | undefined>(undefined);
  const [elapsed, setElapsed] = useState(0);
  const stopwatch = useMemo(() => {
    const machine = Object.assign(createStopwatch(), { startTime, elapsed });
    setup(machine)(
      transitionHooks(
        {
          to: "Ticking",
          enter: () =>
            tickEffect(() => {
              setElapsed(Date.now() - (machine.startTime ?? 0));
            }),
        },
        {
          type: "start",
          effect: () => {
            setStartTime(Date.now());
          },
        },
        {
          from: "Ticking",
          type: "clear",
          effect: () => {
            setStartTime(Date.now());
          },
        },
        {
          from: "Suspended",
          type: "clear",
          effect: () => {
            setStartTime(undefined);
          },
        },
        {
          type: "clear",
          effect: () => {
            setElapsed(0);
          },
        },
        {
          type: "stop",
          effect: () => {
            setElapsed(0);
          },
        },
        {
          type: "resume",
          effect: () => {
            setStartTime(Date.now() - (machine.elapsed ?? 0));
          },
        }
      )
    );
    return machine;
  }, []);
  useMachine(stopwatch);
  stopwatch.startTime = startTime;
  stopwatch.elapsed = elapsed;
  return stopwatch;
}

StopwatchView.tsx

import { getAvailableActions as getStateEvents } from "matchina";
import type { Stopwatch } from "../stopwatch-common/types";
import { useMachine } from "matchina/react";

/**
 * A simple Stopwatch UI component that displays the current state, elapsed time,
 * and available actions based on the current state.
 */
export function StopwatchView({ machine }: { machine: Stopwatch }) {
  useMachine(machine);
  const state = machine.getState();

  // Generate color class based on state
  const stateColorClass = state.match({
    Stopped: () => "text-red-500",
    Ticking: () => "text-green-500",
    Suspended: () => "text-yellow-500",
  });

  return (
    <div className="p-4 rounded border">
      {/* State display */}
      <div className={`inline ${stateColorClass}`}>{state.key}</div>

      {/* Elapsed time */}
      <div className="text-4xl font-bold my-4">
        {(machine.elapsed / 1000).toFixed(1)}s
      </div>

      {/* Action buttons */}
      <div className="flex flex-wrap items-center gap-2">
        {getStateEvents(machine.transitions, state.key)
          .filter((event) => !event.startsWith("_"))
          .map((event) => (
            <button
              className="px-3 py-1 rounded bg-blue-500 text-white text-sm"
              key={event}
              onClick={() => {
                (machine as any)[event]();
              }}
            >
              {event}
            </button>
          ))}
      </div>
    </div>
  );
}

index.tsx

import { StopwatchView } from "./StopwatchView";
import { useStopwatch } from "./useStopwatch";

export function Stopwatch() {
  const stopwatch = useStopwatch();
  return <StopwatchView machine={stopwatch as any} />;
}