React Hooks Lifecycle as modeled by XState

reactHooksMachine.js

import { assign, createMachine } from 'xstate'

export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxzdBkAhwAkCCBrWHAMQBsCB3AOgCyBAK7VIfVOQhgATpADEABRkESbPAAs05GIlBlYASyyGKekAA9EAWgAsAdgAMfewGYAnK9e3XARgBs7v6OrgA0IACeNvYATPZ8tgAcMX7BjgH+9r4AvtnhqJi4hKQUVLQMTKwc3PxColjiktJyEPIAylhoDfhaOmDmBsam5OZWCHb+iXzuvgCsvr6J7rY+7u724VHj-r7u0zGJib5uwa7+B7n56Nj4xGSU1Dh0jCxsXLyCImIQElTNCoQxBYir1dEgQIMTGZwWM7PYpnEVolzjFbLNXEdNjZ5lMfPYso5-LZHGtZjFLiACjdivcyk8Kq9qh86t95ABVchEL5YAYEIxQkYwxD2WZ8SaxWKuRwxYJJXxY7Zk6azFU7HZJFX2XJ5EDkAjSeDgqlFO6lR7PSpvGqfeqNP6ySC8-nDUY2A6uaZHEW+Ry+1zo1wbSLRGIxBIHI7pUNrGUU423EoPcovKrvWrcx3gyEuoXjWbSviIpIotEY+XB8aJeYJZKpX0ZLJx64mxN0i2MtN8Dlc20QJ1DaGgMa2fx8ZFSvy+Ym+QOzWwK6yzI58RxkxyJJKuGJT3ZNwoJ2nmhmpmr9gWuvMywv2JEl9GYivWIK+GspUMi-xz-za7JAA */
createMachine(
  {
    description: 'made by @erikras',
    initial: 'Mounted',
    context: {
      props: {},
      state: {},
      context: {},
    },
    states: {
      Mounted: {
        entry: 'Run Lazy Initializers',
        initial: 'Rendered',
        states: {
          Rendered: {
            entry: [
              'Render',
              'Cleanup Layout Effects',
              'Run Layout Effects',
              'Browser Paints Screen',
              'Cleanup Effects',
              'Run Effects',
            ],
            on: {
              'Props Change': {
                actions: 'setProps',
              },
              'State Change': {
                actions: 'setState',
              },
              'Context Change': {
                actions: 'setContext',
              },
            },
          },
        },
        on: {
          Unmount: {
            target: 'Unmounted',
          },
        },
      },
      Unmounted: {
        type: 'final',
      },
    },
    id: 'React Component – Hooks Flow',
  },
  {
    actions: {
      setContext: assign({ props: (_context, event) => event.props }),
      setProps: assign({ props: (_context, event) => event.props }),
      setState: assign({ props: (_context, event) => event.props }),
    },
  },
)