Autorun and reaction cleanup function

[ArmorDarks]

That would be handy to have an easy way to clean up autoruns and reactions in a similar way React's useEffect hooks can be cleaned up just by returning a cleanup function.

Examples

For autorun:

autorun(() => {
  console.log('autorun')

  // Will be invoked before running next autorun.
  // Having access to reaction would be a plus since it will allow
  // to dispose it or trace during cleanup whenever needed
  return (r: IReactionPublic) => {
    console.log('autorun cleanup', r)
  }
})

For reaction:

reaction(() => some.value, (value) => {
  console.log('reaction')

  // Will be invoked before running next reaction
  // `newValue` would be nice to have to make decisions whether cleanup
  // actually needed
  return (newValue, r: IReactionPublic) => {
    console.log('reaction cleanup', r)
  }
})

Real-life example

Without that feature, we need to have additional variables. We need to add more and more of them when we have more cases when we need some cleanup:

let featureDisposer: (() => void) | null

autorun(() => {
  if (featureDisposer) {
    featureDisposer()
  }

  const cost = featureCostService.getCost('FEATURE_NAME')

  metrics.incUsedCapacity('FEATURE_NAME', cost)

  featureDisposer = () => {
    metrics.decUsedCapacity('FEATURE_NAME', cost)
    featureDisposer = null
  }
})

With that feature, it scales much better

autorun(() => {
  const cost = featureCostService.getCost('FEATURE_NAME')

  metrics.incUsage('FEATURE_NAME', cost)

  return () => metrics.decUsage('FEATURE_NAME', cost)
})

[ArmorDarks]

A helper function that implements that behavior:

// Runs before execution of the next autorun or on dispose
type AutorunCleanupFn = (reaction: IReactionPublic) => void

/**
 * Identical to `autorun`, but allows to specify a cleanup function by returning in `view`.
 * Returned function will be invoked before running the next autorun reaction,
 * similar to React's `useEffect`, or on dispose.
 *
 * @example
 * ```ts
 * cleanupAutorun(() => {
 *   const cost = featureCostService.getCost()
 *
 *   metrics.incUsage(cost)
 *
 *   return () => metrics.decUsage(cost)
 * })
 * ```
 */
export const cleanupAutorun = (
  view: (reaction: IReactionPublic) => AutorunCleanupFn | void,
  opts?: IAutorunOptions,
): IReactionDisposer => {
  let lastCleanupFn: AutorunCleanupFn | void

  return autorun((reaction) => {
    if (typeof lastCleanupFn === 'function') {
      lastCleanupFn(reaction)
    }

    const originalReactionDispose = reaction.dispose.bind(reaction)

    reaction.dispose = () => {
      if (typeof lastCleanupFn === 'function') {
        lastCleanupFn(reaction)
      }

      return originalReactionDispose()
    }

    lastCleanupFn = view(reaction)
  }, opts)
}

[coderek]

How about document unload event? Assuming you are running in DOM

[ArmorDarks]

@coderek Interesting idea, however, I'd prefer Mobx to remain DOM-agnostic. It actually works quite well on servers where heavy state management is required :)