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!

Comienza localizando la sección de la documentación de React Hooks relevante para useState y useEffect. Documenta el comportamiento mostrado en el issue: almacenar una función en el state requiere un callback updater que devuelva la función, y explica el caso de uso de setup y cleanup. Se considera completado cuando la guía se haya colocado en una página adecuada de Hooks y cubra claramente por qué pasar la función directamente la invoca.