What is the proper way to create an event handler inside a React function component?

I’m currently learning react.js and I just want to ask a question on how to properly create an event handler function inside a function component.

Pardon me since most examples in the official documentation are using class for this types of components.

I have an example code below that seems to work fine, but I’m not sure if this is the correct way/best practice when creating an event handler inside a function component, since every time the state changes I assume that the handleClick function is also recreated isn’t it? This affects the performance every time we re-render right?

Say for example when I add more elements inside the return statement that can also trigger an event, and each event has a corresponding event handler that is also declared in that same function component, that might be an overhead for those extreme cases ‘isn’t that correct?

As far as I know this is not a problem on class components because they have a separate render() method so the event handler functions are not recreated, how do we do this in function components?

function Toggle (props) {
  const [isToggleOn, setToggle] = React.useState(false)

  function handleClick (e) {
    setToggle(() => !isToggleOn)
  }

  return (
    <button onClick={handleClick}>
      {isToggleOn ? 'ON' : 'OFF'}
    </button>
  )
}

>Solution :

If you don’t want the handleClick function to be recreated on each render, you should use useCallback hook.

const handleClick = useCallback(() => {
  setToggle((previousState) => !previousState)
}, [])

This way, handleClick is created only at the initial render because the useCallback‘s dependency array is empty.

You might also notice that I removed the usage of isToggleOn and instead use the previous state in the setToggle so your function don’t need to depend on isToggleOn.