How to use React.usecallback?

Question

i have a function like below to be called on button click using react and typescript.

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

}

How can i rewrite handleClick method using React.usecallback method?

could someone help me with this. thanks.

Answer 1

We just wrap the functional and add our isOpen to the list of dependent variables, since it will change every click time.

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