Event Handler Behavior in React vs HTML

In HTML , when you write this :
<button onclick="handleClick()">Click me</button>

The browser sees the string "handleClick()" and stores it as text inside the element.

It does not run it immediately — it waits for the user to click.

When the click happens, the browser reads the string and executes it like code.
So:

** The function call is stored as a string, not as an actual JavaScript command.

It’s only run when the event occurs.
**

In React when you write this :
<button onClick={handleClick}>Click me</button>

**React sees handleClick as a real function reference, not a string.

You are telling React:

“When this button is clicked, call this function.”
**

If you write :

onClick={handleClick()}


You're calling the function immediately during render .
Because the () makes it run now, not later.

In HTML, event handlers are written as strings that are stored inside the element and only run when the event happens.
In React, event handlers are real functions that React keeps track of — so you don’t use () because you don’t want the function to run right away.
If you do need to pass arguments (which requires ()), you wrap the call inside an arrow function so it waits for the event to trigger.

onClick={() => handleClick("hi")}