Invoke a callback only on unmount of the component

useCallOnUnmount.js

import React, { useEffect, useRef } from 'react'
// usage
function MyComponent() {
  const { cleanupReduxStateWithSavedIDSoModalDoesntCloseNextTimeItIsOpened, savedID } = props
  useEffect(() => {
    if (savedID) {
      // onSuccess could be doing something where in other areas savedID is still pulled from a redux store
      onSuccess(savedID)
    }
  }, [savedID, onSuccess])
  
  useCallOnUnmount(() => cleanupReduxStateWithSavedIDSoModalDoesntCloseNextTimeItIsOpened())
  
  // irrelevant stuff
  return <div />
}



function useCallOnUnmount(callback: () => mixed) {
  const savedCallback = useRef(callback)

  useEffect(() => {
    savedCallback.current = callback
  })

  useEffect(() => {
    function invokeCallback() {
      if (savedCallback.current) {
        savedCallback.current()
      }
    }

    return () => {
      invokeCallback()
    }
  }, [])
}