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!

Bắt đầu bằng cách xác định phần trong tài liệu React Hooks liên quan đến useState và useEffect. Ghi lại hành vi được thể hiện trong issue: việc lưu một hàm trong state yêu cầu một updater callback trả về hàm đó, đồng thời giải thích trường hợp sử dụng cho setup và cleanup. Hoàn tất khi hướng dẫn được đặt trên một trang Hooks phù hợp và trình bày rõ lý do việc truyền trực tiếp hàm sẽ gọi hàm đó.