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!

まず、useState と useEffect に関連する React Hooks ドキュメントのセクションを見つけます。issue に示されている動作を文書化します。state に関数を保存するには、その関数を返す updater callback が必要であること、および setup と cleanup のユースケースを説明します。適切な Hooks ページにこのガイダンスが配置され、関数を直接渡すとなぜその関数が呼び出されるのかが明確に説明されていれば完了です。