React Function Calling Methods

In React, I can call the function in onClick in two different ways.

First Method: Arrow Function

const Modal = ({isOpen, toggle, children}) => {
    <div onClick={() => toggle()}>
      <div>
        {children}
      </div>
    </div>
}

Second Method: Without brackets

   const Modal = ({isOpen, toggle, children}) => 
   {
     return(
     <div onClick={toggle}>
       
     </div>
     )
   }

What is the difference between them? () => toggle() <-> toggle

>Solution :

The first way, onClick={() => toggle()}, creates a new function and assigns it to the onClick property. That function, when called, will call toggle with no arguments. A new function is created every time that component is rendered.

The second way, onClick={toggle}, does not create a new function, it directly assigns toggle to the onClick property. That means that when it’s called, it receives any arguments that are passed (even if it doesn’t expect any).

Each can be appropriate, depending on what you want to do. If toggle expects the arguments the click event will pass it, you’re better off with the second way since you aren’t creating a new function every time. If it doesn’t, in general it’s best not to set it up to receive an argument it doesn’t expect.

The fact that the first way creates a new function on every render probably doesn’t matter when you do this with a DOM element like a div, but suppose you’re passing a function to a complex component that takes time to render and that optimizes render (avoiding re-rendering if its props don’t change, via React.memo, PureComponent, shouldComponentUpdate, etc.):

return <SomeComplexComponent onSomething={() => toggle()} />

In that case, you might be best off "memoizing" the function (in this case, via useCallback or useMemo, usually) so you don’t pass a new one to the component every time, so the complex component doesn’t think it needs to re-render every time.

const onSomething = useCallback(() => toggle(), [toggle]);
// ...
return <SomeComplexComponent onSomething={onSomething} />

Although that still creates a new function on every render (so it can be passed into useCallback), useCallback will return the previous version of the function if toggle hasn’t changed, which allows SomeComplexComponent to avoid re-rendering.

But there’s no need for that when passing this to an HTML element or a simple component.