MobX-State-Tree Fast Refresh hook

useMSTFastRefresh.ts

import { useRef } from 'react'
import { applySnapshot, getSnapshot, IStateTreeNode } from 'mobx-state-tree'

/**
 * Preserves state when fast refresh causes the root store to change.
 */ 
export function useMSTFastRefresh(rootStore: IStateTreeNode) {
  const rootStoreRef = useRef(rootStore)

  if (rootStore !== rootStoreRef.current) {
    console.log('Root store changed. Applying previous snapshot.')
    const snapshot = getSnapshot(rootStoreRef.current)

    try {
      applySnapshot(rootStore, snapshot)
    } catch (error) {
      console.log(`Failed to apply previous snapshot: ${error}`)
    }
   
    rootStoreRef.current = rootStore
  }
}

//------------------------------- Usage -------------------------------//

/**
 * Add the useMSTFastRefresh() hook where you create the root store
 */
export const App = ({ rootStore = RootStore.create() }) => {
  useMSTFastRefresh(rootStore)

  return (
    <StoreProvider value={rootStore}>
      <Root />
    </StoreProvider>
  )
}

Nice ~