In our application we are attempting to leverage useEffect to make an api call on cleanup of a component, something like this:

useEffect(() => {
  return () => {
    myAPIFunction(dynamicProp)
    // api call here that leverages a prop
  }
})

The idea here is that we want to make this api call on the tear down of this component. The problem is that as our application progresses dynamicProp changes at the component level, but whenever the api call is made we get the value dynamicProp as whatever it was initialized at.

If we update it it to the following:

useEffect(() => {
  return () => {
    myAPIFunction(dynamicProp)
    // api call here that leverages a prop
  }
}, [dynamicProp])

It does update the prop in the cleanup function but we really only want to call this once on the component cleanup, and this causes the cleanup to fire any time dynamicProp changes.

Is there a solution where we can have dynamicProp be .... dynamic in our cleanup without having to run the cleanup every time dynamicProp changes?