onClick={someFunction} VS onClick={()=>someFunction}

The difference between onClick={someFunction} and onClick={() => someFunction} in React (or JavaScript in general) lies in how and when they handle the execution of the someFunction when the click event occurs :

onClick={someFunction}

• Direct Reference: This syntax directly references the function someFunction.
• When Clicked: The function someFunction will be called when the onClick event is triggered (e.g., when the element is clicked).
• No Extra Function Call: No additional function is created; React simply uses the function reference you provided.
• Example: If someFunction is defined as function someFunction() { console.log('clicked'); }, then onClick={someFunction} will log ‘clicked’ when the element is clicked.

onClick={() => someFunction()}

• Arrow Function: This syntax uses an arrow function to call someFunction.
• Creates a New Function: Each time the component renders, a new function is created. The arrow function wraps the call to someFunction.
• Immediate Invocation: Within the arrow function, someFunction is called immediately when the onClick event is triggered.
• Use Case: Useful when you need to pass arguments to the function or need to do additional work before calling someFunction.
• Example: If you want to pass an argument to someFunction, you can use onClick={() => someFunction('argument')}. This will call someFunction with ‘argument’ when the element is clicked.

When to Use Each

• Direct Reference (onClick={someFunction}):
  • Use this when you want to avoid creating an extra function on each render, which can be more efficient.
  • Preferable for simple event handlers where no additional arguments or operations are needed.
• Arrow Function (onClick={() => someFunction()}):
  • Use this when you need to pass arguments to the function or perform additional operations before calling the function.
  • Useful for inline operations or when dealing with closures.

Practical Examples

Direct Reference

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click Me</button>

• handleClick will be called directly when the button is clicked.

Arrow Function

function handleClick(message) {
  console.log(message);
}

<button onClick={() => handleClick('Button clicked')}>Click Me</button>

• The arrow function calls handleClick with the argument ‘Button clicked’ when the button is clicked.

Understanding these differences helps in optimizing performance and achieving the desired behavior in React components.