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 theonClick
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 functionsomeFunction() { console.log('clicked'); }
, thenonClick={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 theonClick
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 useonClick={() => someFunction('argument')}
. This will callsomeFunction
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.
Code Example
You can understand via a code example.
//Direct Reference
function handleClick () {
console.log('Clicked Button');
}
// Arrow Function
function handleClick(message) {
console.log(message);
}
<button onClick={() => handleClick('Button clicked')}>Click Me</button>
Understanding these differences helps in optimizing performance and achieving the desired behavior in React components.
Top comments (12)
testcase - can check which event details get this function as incoming parameter:
Yes respected sir I'm agree with you. But my topic is that
ReactJS: onClick={someFunction} VS onClick={()=>someFunction}
Yes that why I would like to focus on the big different:
onClick={someFunction}
means someFunction get all events parametervs.
onClick={() => someFunction}
means someFunction don't get any incoming parameterOne thing I would add is that the event object is passed to the object when using
onClick={someFunction}
This, if the function is written to take it there would be no need to write:
onClict={e => someFunction(e)}
Yes Exactly I'm very happy you can understand this topic
Another variant that I like to use is
onClick={makeHandleClick(rowData.id)}
, where function makeHandleClick looks like(rowId) => () => handleClick(rowId)
It works out to pretty much the same as your second case but doesn’t create the wrapping function on every click. It’s useful inside a mapping function where the data is the same but the values are different for every row.
Thanks for the article!
My Pleasure! Please share this article with your friends and team members.
Mail me: click to mail me. I'm still waiting for your response.
Hi, great topic. I saw the mention of this in a React-focused talk. I've never actually found if the difference in performance is huge. I would love to know your thoughts on the performance side since JS has its own garbage collector. Do correct me if I'm wrong! :) Cheers.
Thank you so much Respected Sir! I'm always with you. If you have any problem so get into touch. I'll guide you immediately.
Great take on this my man!
Thank you so much respected sir for support me. I'm still waiting of your mail.
Nothing but a complete copy paste oc this article. At least change the summary or tag original author.
dev.to/itric/onclicksomefunction-v...
@itric
Some comments have been hidden by the post's author - find out more