Why do I need to pass an anonymous function into the onClick event?

Question

I've been trying to learn the basics of React. However, I've come across a section in the tutorial that asks me to place an alert() inside of an onClick event as such:

        <button className="square" onClick={() => {alert("click");}}>
            {this.state.value}
        </button>

I don't understand why the arrow function is required - why can't I just have the alert() on its own?

The docs state:

Forgetting () => and writing onClick={alert('click')} is a common mistake, and would fire the alert every time the component re-renders.

Which is correct - I've tried this, and it does continually call alert() . But why? Isn't it supposed to fire onClick, and not on render? What does the anonymous function do that stops this behaviour?

Answer 1

Because if you call a function, then the function runs. (And you get the return value from it)

 const onClick = alert("hello"); console.log(onClick); 

If you define a function (X) that calls a function (Y), then it doesn't call Y until you call X.

 const onClick = () => alert("hello"); console.log(onClick); 

Answer 2

Basically there is differences between calling (Invoking) a function alert() and Defining (Expressing) a function () => {alert()}

When the code runs, ie when react renders the component, any function call would run that function and that's why we can use IIFE (function() { } )() to inject functions to window object at runtime.

However, handling events with inline function call (like onclick={()=>{alert()}} ) is not recommended because every time that event triggered, a new instance of that function would be created and it may slow down your app,

Instead you can DEFINE a function for handling events and just call it when that specific event triggered:

// Bad
render() {
  return <button onclick={() => {this.setState({btnClicked: true})}}> Click! </button>
}

// Good
render() {

  const handleClick = () => {
    this.setState({btnClicked: true})
  }

  return <button onclick={handleClick}> Click! </button>
}

Answer 3

Because you need a function that gets called only in the instant that the button is clicked. If you pass alert('click') then the parser will find a function call and execute it instantly when it is going over that file.