Ignorance of the basics of React, which may be ruining you

 3r33512. 3r3-31. Want to get a clear idea of ​​what happens to components when you work with React? Read the translation of article under the cut. Ohans Emmanuel published on the website freeCodeCamp . 3r3494.  3r33512. 3r3494.  3r33512. Ignorance of the basics of React, which may be ruining you ), Context ( Context 3rr3387.), Changing the state of the component (3r33386. SetState ) and others. 3r3494.  3r33512. 3r3494.  3r33512. I want to talk about what underlies most of the technical operations that you will perform with React. 3r3494.  3r33512. 3r3494.  3r33512. Ready? 3r3494.  3r33512. 3r3494.  3r33512. 3r38080. Hidden processes React 3r3494.  3r33512. The first thing everyone learns in React is how to create components. I am sure that you also learned this. 3r3494.  3r33512. 3r3494.  3r33512. For example: 3r3494.  3r33512.
    //functional component
function MyComponent () {3r33535. return
My Functional Component
3r33512.} 3r33512. 3r33512. //class based component
class MyComponent extends React.Component {
render () {3r33512. return
My Class Component
3r33512.} 3r33512.} 3r3494.  3r33512. Most of the components you prescribe return some elements to you. 3r3494.  3r33512. 3r3494.  3r33512.
    function MyComponent () {3r33535. return    My Functional Component    //span element
} 3r33512. 3r33512. class MyComponent extends React.Component {
render () {3r33512. return
My Class Component
//div element
} 3r33512.}
3r3494.  3r33512. From the inside, this process looks like this: most components return a tree of elements. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. In addition, you probably remember that components work as functions that return values ​​based on their values ​​3r-3386. props and 3r33386. state . 3r3494.  3r33512. 3r3494.  3r33512. 3r3116. 3r33462. Components are something like functions with props and state parameters [/i] 3r3494.  3r33512. 3r3494.  3r33512. Therefore, whenever the values ​​of the properties ( Props ) And the states ( State ) Of the component change, a new element tree is created. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. If the component is based on class inheritance, the tree of elements is returned by the function 3r33211. 3r33386. render . 3r33512. 3r33512. 3r3144. class MyComponent extends React.Component {
3r33512. render () {3r33512. //this function is invoked to return the tree of elements
} 3r33512.} 3r3494.  3r33512. If the component is functional, its return value is given by the element tree. 3r3494.  3r33512. 3r3494.  3r33512.
    function MyComponent () {3r33535. 3r33512. //the return value of the tree of elements of the
return
3r33512.
3r33512.} 3r3494.  3r33512. Why is it important? 3r3494.  3r33512. 3r3494.  3r33512. Consider the component. which takes prop as shown below. 3r3494.  3r33512. 3r3494.  3r33512.
    3r3186.    
3r3494.  3r33512. Rendering this component returns an element tree. 3r3494.  3r33512. 3r3494.  3r33512. 3r3195. 3r3494.  3r33512. 3r33462. The tree of elements returned after redrawing 3r33434. 3r3494.  3r33512. 3r3494.  3r33512. What happens when the value of name is changing? 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. Well, the new element tree is back! 3r3494.  3r33512. 3r3494.  3r33512. with other props [/i] 3r3494.  3r33512. 3r3494.  3r33512. Good. 3r3494.  3r33512. Now React has two different trees - the previous and the current tree of elements. 3r3494.  3r33512. At this point, React compares both trees to find changes. 3r3494.  3r33512. 3r3494.  3r33512. complex 3r3015. . 3r3494.  3r33512. 3r3494.  3r33512. 3r38080. React updates only necessary, right? 3r3494.  3r33512. Even before you started working with React, you often had to hear how cool it is, including the fact that it makes only important changes to the updated DOM model. 3r3494.  3r33512. 3r3494.  3r33512. React Docs : DOM inspector showing update details [/i] 3r3494.  3r33512. 3r3494.  3r33512. Is that all right? 3r3494.  3r33512. 3r3494.  3r33512. It's like that. 3r3494.  3r33512. 3r3494.  3r33512. Remember, however: before proceeding to the DOM update, React builds a tree of elements for the various components and makes the necessary comparison. Simply put, it will find the differences between the previous element tree and the current one. 3r3494.  3r33512. 3r3494.  3r33512. I repeat this because newcomers to React may not notice the performance degradation of their applications, considering that React updates only the necessary elements in the DOM. 3r3494.  3r33512. 3r3494.  3r33512. This, of course, is true, but the performance problems of most React applications start even before the DOM update! 3r3494.  3r33512. 3r3494.  3r33512. 3r38080. Unnecessary rendering vs visual updates 3r3494.  3r33512. Even if the element's element tree is small, its rendering takes some time (at least insignificant). The larger the component element tree, the longer the rendering takes. 3r3494.  3r33512. 3r3494.  3r33512. This means that redrawing the element trees of your application with React would be superfluous if it is NOT necessary. 3r3494.  3r33512. 3r3494.  3r33512. Let me show this with a simple example. 3r3494.  3r33512. 3r3494.  3r33512. Imagine an application with the structure of components, as in the illustration below. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. Common component container A gets a specific property. However, this is done only to pass this property to the component. D . 3r3494.  3r33512. 3r3494.  3r33512. 3r33333. 3r3494.  3r33512. 3r33462. The parent component A receives some properties and passes them on to the child component D [/i] 3r3494.  3r33512. 3r3494.  3r33512. Now, when the property value changes in the component. A , all child elements A redrawn to compute new item tree. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. Accordingly, the components of 3r33386. B and 3r33386. From also re-rendered, even if they have not changed at all! They got no new properties! 3r3494.  3r33512. 3r3494.  3r33512. This extra redrawing is unnecessary rendering. 3r3494.  3r33512. 3r3494.  3r33512. In this example, the components of B and 3r33386. C do not need to redraw, but React does not know about it. 3r3494.  3r33512. 3r3494.  3r33512. There are many ways to solve this problem, and I described them in my recent article 3r-3392. How to Eliminate React Performance Issues
(“How to minimize React performance problems”). 3r3494.  3r33512. 3r3494.  3r33512. Go ahead. Look at the app below. 3r3494.  3r33512. 3r3494.  3r33512. 3r3402. 3r3494.  3r33512. 3r33462. Cardie in action :) [/i] 3r3494.  3r33512. 3r3494.  3r33512. I called this app Carde 3R3015. . 3r3494.  3r33512. 3r3494.  3r33512. When I click the button to change the user's profession, I can select the highlighting of updates for the DOM, as shown below. 3r3494.  3r33512. 3r3494.  3r33512. 3r33421. 3r3494.  3r33512. 3r33462. Activate the visual display of updates (Paint Flashing) using Chrome DevTools [/i] 3r3494.  3r33512. 3r3494.  3r33512. Now I can see what has been updated in the DOM. 3r3494.  3r33512. 3r3494.  3r33512. This is a visual way of marking the elements that need to be updated in the DOM. Notice the green highlight around the text I am a Librarian (“I'm a Librarian”.) 3r3494.  3r33512. 3r3494.  3r33512. This is all great, of course, but I'm worried about the initial rendering of the element tree of the React components. 3r3494.  3r33512. 3r3494.  3r33512. I can check it too. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. Now I see which components actually redraw when I click this button. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. 3r3494.  3r33512. Do you see how different the visual way is to mark the elements that need to be updated in the DOM and the rendering updates that React itself conducts? 3r3494.  3r33512. 3r3494.  3r33512. React redraws the entire user card, and only the short text is updated. 3r3494.  3r33512. 3r3494.  3r33512. And this is important. 3r3494.  3r33512. 3r3494.  3r33512. 3r38080. Conclusion 3r3481. 3r3494.  3r33512. I think that now you have a more visual idea of ​​what is happening with your components in React. 3r3494.  3r33512. 3r3494.  3r33512. In fact, much more is happening than I have told you here. However, this is a good start. 3r3494.  3r33512. 3r3494.  3r33512. Forward to create cool apps! 3r3494.  3r33512. 3r3494.  3r33512. Learn to work with React /Redux? If yes, I have
A great series of books
dedicated to redux. Some say it is r3r3498. best technical literature 3r3-3011. which is 3r?300. they read 3r301501. !
3r33512. 3r33512.
3r33512.
3r33512. 3r33512. 3r33512. 3r33512.
+ 0 -

Add comment