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!

Beginne damit, den Abschnitt der React Hooks-Dokumentation zu finden, der für useState und useEffect relevant ist. Dokumentiere das im Issue gezeigte Verhalten: Das Speichern einer Funktion im State erfordert einen Updater-Callback, der die Funktion zurückgibt, und erläutere den Anwendungsfall für Setup und Cleanup. Die Aufgabe ist abgeschlossen, wenn die Anleitung auf einer geeigneten Hooks-Seite platziert ist und klar erklärt, warum das direkte Übergeben der Funktion sie aufruft.