如何使用 React.usecallback？

Question

我有一個如下所示的 function，可以在使用 React 和 typescript 單擊按鈕時調用。

function Parent () {
    const [isOpen, setIsOpen] = React.useState(false);
    const handleClick = () => {
        setIsOpen(open => !open);
    }
    return (
        <button onClick={handleClick}>click me </button> 
    );

}

如何使用React.usecallback方法重寫handleClick方法？

有人可以幫我解決這個問題嗎？ 謝謝。

Answer 1

我們只是包裝函數並將我們的isOpen添加到因變量列表中，因為它會在每次點擊時發生變化。

const handleClick = React.useCallback(() => {
  setIsOpen(open => !open);
}, [isOpen]);