How Component Functions are Executed in React

Back to: ReactJS Tutorials

How Component Functions are Executed in React:

In this article, I am going to discuss How Component Functions are Executed in React with Examples. Please read our previous article where we discussed Listening to Events and Working with Event Handlers in React with Examples.

How Component Functions are Executed in React?

Reacting to events is an important first step. Now how can we now change what shows up on the screen? Well, we want to change the title when the “button is clicked, so this is one thing we can do. We can create a variable ‘title’ by using the let keyword in ExpenseItem Component,

let title = props.title;

It initially holds the value that we find in the props title. And then we use this title variable in our JSX code to output the title.

Now if we do that, we see the same results as before,

So why we have stored the title in a separate variable? Well, we have a title variable, we can change it whenever the click handler executes. So, whenever this button has clicked, we execute this clickHandler function and in there if we change the title to update, then we should see that change title on our screen,

Because we are outputting the title in our JSX code. Now when we clicked on the button, we should see ‘Updated!!!’ in the place of the title on our screen. Let’s save everything and see the output.

You’ll notice that if we click the change title button, nothing happens. This title never changes, why is this happening? Is something wrong with our click handler? Well, this function is getting triggered, we can check it by console.log(). We can prove that the title variable contains a new value.

We can see that updated text here. So, the clickHandler function is triggered. The click handler was executed and the title was changed. Otherwise, we will not see the new value which we assigned in the clickHandler function.

So, if the function executes and the title is changed, why don’t we see it reflected in our DOM? After all, we are outputting the title down there. Well, because react doesn’t work like this. And that’s where we have to dive into how React parses the JSX code, how it considers that, and how it brings it onto the screen.

Though we will have an even deeper dive later in our articles, there’s one key thing that you have to know right now. Keep in mind that your component is just a regular function. The only special thing about the function is that it returns JSX. Now since it’s a function, someone has to call it, and you might notice that we never called our component functions. Instead, we just used these functions like HTML elements in the JSX code. For example, we have used the ExpenseItem function as HTML elements in Expenses.js,

Well, the thing is, the above code is almost like a function call. By using our components in JSX code, we make React aware of our component functions. For example, here, we make react aware of the expense item function. And whenever react evaluates this JSX code, it will call these component functions. And these component functions stand to return JSX code, which is also evaluated up until there’s no more JSX code to be evaluated. So, react keeps on calling any component functions it encounters in JSX, then calls any functions that those functions might have returned.

So, any elements that those components might have used in their JSX code until there are no more functions left. In the case of expenses.js, if react encounters this expense item, it calls this expense item component function and executes all the code in there, then encounters JSX code of return part and calls the card function and expense date function, and then it goes through the JSX code of these components until there’s no more component code left to call. And then it re-evaluates the overall result and translates that into DOM instructions which render the final result on the screen. That’s how to react works.

Now it’s all started with the index.js file, where we initially point at this app component. That’s the first component function that is being called, which happens when the react app is been loaded on the screen and which happens when the page is been visited. So that’s how React goes through all these components and executes all these component’s functions and renders something onto the screen.

The only problem with that is, that react never repeats that. React goes through all of that when the application is initially rendered. But thereafter it’s done. However, in modern applications, you sometimes want to update what’s visible on the screen, for example, because a button was clicked and that button should change some text which is being output. So, we need a way of telling react that something is changed and that a certain component should be re-evaluated and that’s where react introduces a special concept called state.

In the next article, I am going to discuss Working with State in React with Examples. Here, in this article, I try to explain How Component Functions are Executed in React with Examples. I hope you enjoy this How Component Functions are Executed in React article.