assigning a function to a `useState` variable

I was toying with storing a function in a useState variable, like this:

const behavior = () => {
  // set something up
  return () => {
    // tear it back down
  }
}

// inside the component
const [cleanupFunction, setCleanupFunction] = useState(null)

useEffect(() => {
  if (behavior){
    const cleanup = behavior()
    setCleanupFunction( () => cleanup )
  } else {
    cleanupFunction && cleanupFunction()
  }
}, [behavior])

This pattern is great for when you want to set up and tear down behavior when a prop changes, rather than wait until unmount. You can imagine that different behaviors with their associated cleanups can be passed in.

I was initially tempted to say setCleanupFunction(cleaup), but this was not working - my function was being called without me explicitly calling it. This explanation on stackoverflow gives a crucial tidbit: when storing a callback as a useState variable, it must be stored as a callback function which returns the function you want to call. I feel this use case should be somewhere in the react docs in the hooks section.

Thank you for everything you do!

Start by locating the React Hooks documentation section relevant to useState and useEffect. Document the behavior shown in the issue: storing a function in state requires an updater callback that returns the function, and explain the setup and cleanup use case. Done when the guidance is placed in an appropriate Hooks page and clearly covers why directly passing the function invokes it.