render() method that is called (in class-based components) does not update the content to real DOM or to the JSX in the return statement of functional components. The name here can be misleading.
render does not mean that it should render, but that we think of it as a suggestion for how the final result will look like. Let’s look at two important cases:
rendermethod is called, which is unnecessary in this case.
renderwill again be unnecessary.
In such cases, we might use
shouldComponentUpdate() in class-based components or
React.memo in the function-based component. But what happens when we do not use these? Will it re-render every time if there are changes in props that are not used for UI or if the parent component renders it?
No, it will not.
render is called or suggested, it compares virtual DOMs. It will have the old virtual DOM and re-rendered virtual DOM. React takes this approach because it is faster. Here, the re-rendered virtual DOM will be created when the
render method is called.
Once the comparison is made, and if any differences are found, then React will update the real DOM and note that it doesn’t re-render the entire DOM. Suppose the text on the button is changed. Then, it won’t re-render the whole button; instead, only the text is changed. It does not touch the real DOM if there aren’t any differences.
As you know, it is expensive to
View all Courses