██FR█████ █INTELL███████████

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


This content originally appeared on DEV Community and was authored by itric

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.


This content originally appeared on DEV Community and was authored by itric