React: order of execution

Question

I am new to react and was following this example

https://codepen.io/gaearon/pen/QKzAgB?editors=0010

Now, to my understanding, the following should be Order of execution

• Execution start from LoginControl
• Then comes constructor

• Then it goes to render method and runs

  button = <LoginButton onClick={this.handleLoginClick}/>};

Now the control should go to LoginButton function but when I debug control goes to Greetings then UserGreetings and then to LoginButton . Why is that? Also, within LoginButton we have <button onClick={props.onClick}> , what props.onClick do? What does it call?

If someone could explain it that would be much appreciated. I have already read many articles and spent some hours on debugging but couldn't find an answer.

Answer 1

Sara, I am going to start with the latter question.

LoginButton is a component and all it does and has is a button which on the onClick event triggers a method called props.onClick . Then what is props.onClick ? It is some method which is passed from the parent component to this component.

Going back to the code, let's search for the parent component, which in this case is going to be the top-level component LoginFlow . If isLoggedIn is false it assigns to button <LoginButton onClick={this.handleLoginClick} />; . Do you see the onClick prop? That is what gets passed as the props.onClick to the LoginButton , therefore the function that gets executed on click is the handleLoginClick of the LoginFlow .

As for the former question, it is just what the LoginFlow component returns. Look at the return statement part of the component - it returns Greetings with the isLoggedIn prop, which in turn (being true in this case) goes to the userGreeting .

Hope this helps!

Answer 2

JSX provides syntactic sugar for:

button = React.createElement(LoginButton, {onClick: this.handleLoginClick})

While that code executes before <Greetings> , it is not the same as button = LoginButton() which would execute the code inside LoginButton .

The code inside LoginButton is executed only when actually rendered, ie in {button} inside the component rendered by calling ReactDOM.render() .

---

props is the value passed as the 2nd argument to React.createElement above, and will be passed as the 1st argument to the component implementation.

If you imagine <LoginButton something="test" /> , then following implementation would display test inside the button:

const LoginButton = (props) => <button>{props.something}</button>

However, onClick specifically is a prop recognized by build-in React elements like <button> or <div> that will wait for a user to click on that element and call the function specified by developer on each click - see Handling events for more.