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!

首先找到 React Hooks 文档中与 useState 和 useEffect 相关的部分。记录 issue 中展示的行为：在 state 中存储函数需要一个返回该函数的 updater callback，并解释 setup 和 cleanup 的使用场景。当这份指南被放置在合适的 Hooks 页面中，并清楚说明为什么直接传入函数会调用它时，即可完成。