reactMachine.js

import { createMachine } from 'xstate'

export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxysA6AWQIFdrIBiAVXKKesVDNgBLLIIp8QAD0QBaAIwAGAGw0ALAE4AHPICsigMxrFi+RqMAaEAE8ZAJhsaaAdm0qVsmyb12bamwF8-C1RMXEJSCipaBmYsNgA5MAB3HAAFACcCEngkEAFhUXJxKQRpNxsaeVk9FUc1Xz09DTttC2sS-WUG9wbtbUdXWUcAoPRsfGIySmp6HliIVgBlMFwFrDRY8TyRMRzi2SqaRTVHE3t+tS7HVplFDxofBUUVDQ1ZC5tZYZBgsbDJyJmMTYADECGkMGAcOwSBB1mBNgQhNtCrsZAp5DRZC4zvI9I4DPtriVtC8aGoVDZtLImoZHI4ngFAiByAQIHBxD9QhMItNoiwIDRUOQ2WlIAikQUijJapj8U19iSVLpZCoidI9L0KvJ5EqdQTNEovpzxuEplFZmKcltJaiSio9MpKtVavVGs01S8MV07I4fJoLiojaMuaaAZxuECIOL8jtQHs8WT5fI7KY3eYrLYsU4XColIZFNofP4mca-jysNHkVK7cYKlUanUbA0mpS1XUvXp3DZatVc7JFIy-EA */
createMachine({
  description: 'made by @erikras',
  initial: 'Mounted',
  states: {
    Mounted: {
      entry: [
        'constructor',
        'getDerivedStateFromProps',
        'render',
        'componentDidMount',
      ],
      initial: 'Rendered',
      states: {
        Rendered: {},
      },
      on: {
        Unmount: {
          actions: 'componentWillUnmount',
          target: 'Unmounted',
        },
        'New Props': {
          actions: ['getDerivedStateFromProps', 'render', 'componentDidUpdate'],
          cond: 'shouldComponentUpdate',
          target: '.Rendered',
        },
        'Set State': {
          actions: ['render', 'componentDidUpdate'],
          cond: 'shouldComponentUpdate',
          target: '.Rendered',
        },
        'Force Update': {
          actions: ['render', 'componentDidUpdate'],
          target: '.Rendered',
        },
      },
    },
    Unmounted: {
      type: 'final',
    },
  },
  id: 'React Component',
})