Prototype-Linked Object State Machine for Dynamic React Flow

import React, { useReducer } from 'react';
 
class BaseState {
  canTransitionTo(nextState) {
    return this.allowedTransitions?.includes(nextState) ?? false;
  }
}
 
class IdleState extends BaseState {
  allowedTransitions = ['loading'];
  name = 'IDLE';
}
 
class LoadingState extends BaseState {
  allowedTransitions = ['success', 'idle'];
  name = 'LOADING';
}
 
const statePrototypes = {
  idle: Object.create(new IdleState()),
  loading: Object.create(new LoadingState()),
};
 
function flowReducer(current, action) {
  const currentState = statePrototypes[current];
  return currentState.canTransitionTo(action.type) ? action.type : current;
}
 
export function PrototypeStateController() {
  const [state, dispatch] = useReducer(flowReducer, 'idle');
  return <button onClick={() => dispatch({ type: 'loading' })}>Current: {state}</button>;
}