Why does a React JSX element event handler not use parentheses similar to a html event handler?

Question

While learning HTML event handlers and then React I've understood that in HTML the event handler value eg a function should be followed by parentheses. As I understand it, JSX elements are another way to write html like elements in React but when writing these elements we're supposed to omit the parentheses and I can't understand why? shouldn't they behave the same if they represent HTML like elements?

<button onClick={shoot}>JSX element!</button>

<button onclick="shoot()">HTML element!</button>

Answer 1

The code between { and } in JSX is a JavaScript expression . The value passed to a React onClick handler needs to be a function .

So onClick={foo} is equivalent to addEventListener("click", foo);

But onClick={foo()} is equivalent to addEventListener("click", foo()); . The expression foo() would call the foo function and resolve to be its return value. This is fine if foo returns another function, and useless if it doesn't.

---

The value of an HTML onclick attribute is a string (all attribute values are strings) that gets evaluated as the body of a function.

So onclick="foo()" is (very roughly because intrinsic event attributes also do weird things to scope) equivalent to addEventListener("click", new Function("foo()");

A function which just mentions foo , on the other hand, wouldn't do anything.

 function foo() { console.log("I've been called!"); } function onClick() { foo; } onClick();

Answer 2

So Lets say we have a function

const shoot = () => {  };

this how we execute it

shoot(); // this will execute the function

and now this is how we bind a function to a event, we don't call it like document.addEventListener('click', shoot()); , we just pass the reference to the function so, when the event happens the function will get executed.

document.addEventListener('click', shoot); // shoot will execute when click on tghe document

---

Now This will trigger the shoot() when this element attaching to the dom, because it's shoot() , so we trigger it instantly

<button onclick="shoot()">HTML element!</button>

But This will call when the click happens, Why? we pass the reference to the function, so when the click happens js, can trigger the function

<button onClick={shoot}>JSX element!</button>

Answer 3

A React JSX element event handler doesn't use parenthesis because the event handler is a function and not a function call. eg -

import React from 'react'

function FunctionClick() {

    function clickHandler(){
        console.log("button clicked")
    }
    return (
        <div>
            <button onClick={clickHandler}>Click</button>
        </div>
    )
}

export default FunctionClick

If we add parenthesis after event handler then the console message will already be logged in output without hitting the click button. Scenario becomes worse in class component when event handler changes the state of the component, the component constantly re-renders and might see an infinite no of messages in console.