Difference between function components and component classes?

Question

This is following a tutorial in React JS.

  class Square extends React.Component {
    render() {
        return (
        <button
            className="square"
            onClick={() => this.props.onClick()}
        >
            {this.props.value}
        </button>
        );
    }
  }

   function Square(props) {
        return (
            <button className="square" onClick={props.onClick}>
            {props.value}
            </button>
        );
    }

above components do the same thing.there's a statement in the tutorial as follows

"When we modified the Square to be a function component, we also changed onClick={() => this.props.onClick()} to a shorter onClick={props.onClick} (note the lack of parentheses on both sides)."

I don't understand why there aren't parentheses on the right side in the function component? is it not a function call?

Quentin · Accepted Answer · 2019-04-28 07:47:35Z

1

is it not a function call?

No, it isn't. It is a function. You are passing it to be the value of the onClick property.

This is a function that does nothing except call foo and return its value.

() => foo()

This is the function foo:

foo

The net result is more-or-less the same unless foo cares about the value of this or the arguments it gets.

If you added () to the short version, you would call the function immediately and pass the return value to onClick. Since that return value (probably) isn't a function, and you don't want the function to run until the click happens, that wouldn't be helpful.

function run_me(a_function) {
    a_function();
}

function foo() {
    console.log("foo has run");
}

run_me(foo);
run_me(() => foo());
run_me(foo());

edited Apr 28, 2019 at 7:47

answered Apr 28, 2019 at 7:38

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MortezaE Over a year ago

That's right about callback concept in js, ok, but lets me return to react and ask again: why in case of the component class we had to assign returned value of onClick function, but in case of function component, we had to the reference of onClick function?

Quentin Over a year ago

"why in case of the component class we assigned returned value of onClick function" — You have two examples on onClick={someValue} in your code. In the first case, the value is a new arrow function which calls one function (() => this.props.onClick()). In the second case you have an existing function (props.onClick). You are not calling a function and passing its return value to onClick={here}.

Sagiv b.g · Accepted Answer · 2019-04-28 07:48:04Z

0

When passing a handler we actually need to pass a reference to a function.

I don't understand why there aren't parentheses on the right side in the function component? is it not a function call?

When you put parentheses you are invoking the function.
So when doing this:

onClick={props.onClick()}

We are passing the returned value of that function instead of a reference to it.

edited Apr 28, 2019 at 7:48

answered Apr 28, 2019 at 7:38

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

5 Comments

Quentin Over a year ago

While true, that ignores the () => in the example with the parentheses at the end so doesn't really describe the situation here.

Sagiv b.g Over a year ago

hmm, are you talking about the class example? isn't that falls under passing a function reference, or because it's anonymous you think that's different?

Quentin Over a year ago

My point is that onClick={() => this.props.onClick()} and onClick={props.onClick} both pass a function to onClick., and neither invoke it immediately.

Sagiv b.g Over a year ago

Indeed, that is my point as well. AFAIK, the OP asks why we are not doing onClick={props.onClick()} so this is what i was trying to explain. i guess i wasn't communicating clearly with my answer

Quentin Over a year ago

Ahhhh. I see now.

Collectives™ on Stack Overflow

Difference between function components and component classes?

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related