Understand more about React.js (1): How the React Functional component handles props and state

Tram Ho

React.js is a fairly well known UI library in web development, with hundreds of thousands of developers working with React.js on a daily basis. All of them are very familiar with the two basic concepts of React: state and props . But do you really understand how React handles them? (Here I just mention Functional component)

Recalling a bit about the above 2 concepts. State is the data that is directly held and managed by the component, it has the right to change arbitrarily, and the props are the data component received from the parent component, it has no way to change the props if the parent component doesn’t. passes a function that modifies the props value.

For example, the App component is acting as a parent component, holding state count, component Counter is a child component, accepting props including count and the setCount function.

This is how the Counter component uses props. It’s easy to understand, right, the Increase button each time it is clicked will run the increase function, increasing count by 1 unit.

I’m going to add a single line of code to the increase function to create a little problem. In your opinion, what will JS print on the console screen after each button is clicked?

A lot of you will know this delay, that the console.log statement always prints “1 beat slower” than the value of the count variable. The problem is, what is the reason for this? Someone has answered me, the setCount function is an async function, so it hasn’t finished before the console.log statement has been run, leading to the delay. So let’s try:

I have setTimeout 1 second for console.log, the result is no different, even if you have set 10s, 100s or 1000s, the result is still the same. What’s going on, like the increase function getting fixed a count value?

Actually, with Functional component, every time you render all the code will be run from top down, if you don’t use some special hook. So when the value count = 1 and passed to Counter, the actual code inside Counter will look like this:

Looking at this is easier to understand, not because the async function leads to the delay, but because in that render, the count value was hard fixed to 1, so there is no way for console.log to output 2 , no matter how long you have setTimeout.

So the original reason is due to another JavaScript concept, which is closures. In essence, each functional component’s render is simply understood as a function of JavaScript, it creates a closure closure for all variables and functions declared inside it, so it cannot be related to other renderings.

Not only props, state is handled exactly the same way inside the functional component, you can try.

Finally, in order to learn and deeply understand React, don’t ignore the basic and advanced concepts of JavaScript, JS is the language, React is just a library.

Hope you guys support your first article, thank you.

Share the news now

Source : Viblo