How Rendering Works: Overview | Lecture 123 | React.JS đ„
Summary
TLDRThis video script provides an insightful overview of how React renders applications behind the scenes. It delves into the three phases involved in displaying components on the screen: the render phase, where React calls component functions and figures out how to update the DOM; the commit phase, where React actually updates the DOM; and the browser repaint phase, where visual changes are displayed. The script clarifies the distinction between React's definition of 'rendering' and the traditional understanding, emphasizing that rendering in React is an internal process without visual changes. It also explores how renders are triggered and the importance of understanding the entire rendering process for a comprehensive grasp of React's inner workings.
Takeaways
- 𧩠React applications are built with components, which can be nested and instantiated multiple times.
- đ JSX code in components produces React.createElement calls, which create React elements representing the UI.
- đ React elements are eventually transformed into DOM elements and rendered on the screen.
- đ React's rendering process is triggered by state updates or the initial application load.
- đ The rendering process has three phases: render, commit, and browser repaint.
- đš In the render phase, React calls component functions to determine how to update the DOM, but doesn't actually update it.
- âïž In the commit phase, React updates the DOM to reflect the latest state changes.
- đ» The browser then repaints the screen to display the visual changes.
- â±ïž Renders are not triggered immediately after state updates, but are scheduled when the JavaScript engine has free time.
- đ In some cases, like multiple setState calls in the same function, renders are batched together.
Q & A
What is the main purpose of this lecture series?
-This lecture series aims to provide an in-depth understanding of how React renders applications behind the scenes. It is divided into three parts, with this video serving as an overview and the next two videos going into the React internals in greater detail.
What is the difference between a component and a component instance in React?
-A component is a reusable piece of code that defines the structure and behavior of a part of the user interface. A component instance is the actual physical representation of a component in the application, holding its own state and props.
What role do React elements play in the rendering process?
-React elements are the output of the JSX code, produced by calling the React.createElement function for each component instance. These React elements are then transformed into DOM elements and displayed as the user interface on the screen.
What is the purpose of the render phase in React?
-In the render phase, React calls the component functions and figures out how to update the DOM to reflect the latest state changes. However, it does not actually update the DOM during this phase.
How does React's definition of rendering differ from the traditional understanding?
-In React, rendering refers to the internal process of calling component functions and determining DOM updates, not the actual updating of the DOM or displaying elements on the screen. This differs from the traditional understanding of rendering as displaying elements visually.
When does the actual DOM update happen in React?
-The actual DOM update happens in the commit phase, after the render phase. During the commit phase, new elements may be added to the DOM, existing elements may be updated, or elements may be removed to reflect the current state of the application.
What are the two ways in which a render can be triggered in React?
-A render can be triggered in React in two ways: the initial render when the application first runs, and a re-render triggered by a state update in one or more component instances.
Does React trigger a render immediately after a state update?
-No, React does not trigger a render immediately after a state update. Instead, the render is scheduled to occur when the JavaScript engine has some free time, usually just a few milliseconds later.
What is the significance of batching renders in React?
-In some situations, such as multiple setState calls in the same function, React will batch renders together. This means that instead of triggering a render for each state update, React will combine them into a single render, improving performance.
What is the key takeaway from this lecture?
-The key takeaway from this lecture is that the rendering process in React is more complex than it initially appears. It involves multiple phases, including the render phase, where component functions are called and DOM updates are determined, and the commit phase, where the actual DOM updates occur.
Outlines
đŹ React Rendering Process Overview
This paragraph serves as an overview of the React rendering process, which is split into three parts across this and the next two videos. It explains that as we build applications, we create components that produce React elements, which are ultimately transformed into DOM elements and displayed on the screen. While we understand how components are transformed into React elements, we don't yet understand how these React elements end up in the DOM and displayed on the screen, which is the focus of this series.
âĄïž Triggering a Render in React
This paragraph discusses how a render is triggered in React. There are two ways: 1) The initial render when the application first runs, and 2) A re-render triggered by a state update in one or more component instances. It's important to note that the render process is triggered for the entire application, not just the updated component. Renders are not triggered immediately after a state update, but rather scheduled when the JavaScript engine has free time. In some cases, like multiple setState calls in the same function, renders can be batched together.
Mindmap
Keywords
đĄReact
đĄComponents
đĄJSX
đĄReact Elements
đĄRendering
đĄRender Phase
đĄCommit Phase
đĄState
đĄInitial Render
đĄRe-render
Highlights
We are now ready to finally learn about how exactly React renders our applications behind the scenes.
As we build our applications, what we're really doing is building a bunch of components.
We then use these components inside other components, as many times as we want, which will cause React to create one or more component instances of each component.
As React calls each component instance, each JSX will produce a bunch of React.createElement function calls, which in turn will produce a React element for each component instance.
This React element will ultimately be transformed to DOM elements and displayed as a user interface on the screen.
We don't understand yet how these React elements actually end up in the DOM and displayed on the screen.
This process is started by React each time that a new render is triggered, most of the time by updating state somewhere in the application.
In the render phase, React calls our component functions and figures out how it should update the DOM to reflect the latest state changes, but it does not actually update the DOM in this phase.
React's definition of render is very different from what we usually think of as a render, which can be quite confusing.
In React, rendering is not about updating the DOM or displaying elements on the screen. Rendering only happens internally inside of React, and so it does not produce any visual changes.
Once React knows how to update a DOM, it does so in the commit phase, where new elements might be placed in the DOM, and already existing elements might get updated or deleted to reflect the current state of the application.
It's really this commit phase that is responsible for what we traditionally call rendering, not the render phase.
Finally, the browser will notice that the DOM has been updated and repaint the screen, which is the final step that actually produces the visual change that users see on their screens.
A render can be triggered by the very first time the application runs (initial render) or a state update happening in one or more component instances (re-render).
The render process is triggered for the entire application, not just for one single component, although that doesn't mean the entire DOM is updated.
Transcripts
â«We are now ready
â«to finally learn about how exactly React renders
â«our applications behind the scenes.
â«Now there is so much to learn here
â«that I split up this lecture into three parts.
â«So it's this video and the next two ones.
â«This one serves more as an overview
â«and then in the next two videos,
â«we're gonna go really deep
â«into some React internals.
â«And let's start with just a small recap
â«so that we're all on the same page.
â«So as we build our applications,
â«what we're really doing
â«is building a bunch of components.
â«We then use these components inside other components
â«as many times as we want
â«which will cause React to create one
â«or more component instances of each component.
â«So these are basically
â«the actual physical components
â«that live in our application
â«and holds state and props.
â«Now, as React calls each component instance,
â«each JSX will produce a bunch
â«of React dot create element function calls
â«which in turn will produce a React element
â«for each component instance.
â«And so this React element
â«will ultimately be transformed
â«to DOM elements and displayed
â«as a user interface on the screen.
â«So we have a pretty good understanding
â«of the initial part of this process,
â«so of transforming components to React elements.
â«However, what we don't understand yet
â«is the second part of the process,
â«so how these React elements actually end up
â«in the DOM and displayed on the screen.
â«Well, luckily for us,
â«that is exactly what this series
â«of lectures is all about.
â«So in this lecture,
â«we're gonna have a quick overview
â«of each of the phases involved in displaying
â«our components onto the screen.
â«Then we're gonna zoom into each of these phases
â«to learn how the entire process
â«works internally behind the scenes.
â«So this process that we're about to study
â«is started by React each time
â«that a new render is triggered,
â«most of the time by updating state
â«somewhere in the application.
â«So state changes trigger renders
â«and so it makes sense
â«that the next phase is the render phase.
â«In this phase, React calls our component functions
â«and figures out how it should update the DOM,
â«so in order to reflect
â«the latest state changes.
â«However, it does actually not update
â«the DOM in this phase.
â«And so Reacts definition of render
â«is very different from what
â«we usually think of as a render,
â«which can be quite confusing.
â«So again, in React, rendering is not
â«about updating the DOM
â«or displaying elements on the screen.
â«Rendering only happens internally inside of React
â«and so it does not produce any visual changes.
â«Now, in all the previous sections,
â«I have always used the term rendering
â«with the meaning of displaying elements on the screen
â«because that was just easy to understand
â«and it just made sense, right?
â«However, as we just learned,
â«the rendering that I used to mean
â«is really this render plus the next phase.
â«And speaking of that next phase,
â«once React knows how to update a DOM,
â«it does so in the commit phase.
â«So in this phase,
â«new elements might be placed in the DOM
â«and already existing elements might get updated
â«or deleted in order to correctly reflect
â«the current state of the application.
â«So it's really this commit phase that is responsible
â«for what we traditionally call rendering,
â«not the render phase, okay?
â«Then finally, the browser will notice
â«that the DOM has been updated
â«and so it repaints the screen.
â«Now this has nothing to do with React anymore
â«but it's still worth mentioning
â«that it's this final step that actually produces
â«the visual change that users see on their screens.
â«All right, so let's now zoom
â«into each of these different steps,
â«starting with the triggering of a render.
â«So there are only two ways
â«in which a render can be triggered.
â«The first one is
â«the very first time the application runs
â«which is what we call the initial render.
â«And the second one is a state update happening
â«in one or more component instances
â«somewhere in the application
â«which is what we call a re-render.
â«And it's important to note
â«that the render process really is triggered
â«for the entire application,
â«not just for one single component.
â«Now that doesn't mean
â«that the entire DOM is updated
â«because remember, in React,
â«rendering is only about calling the component functions
â«and figuring out what needs to change in the DOM later.
â«Now again, this might seem confusing now
â«because earlier in the course,
â«I made it seem as though React
â«only re-renders the component
â«where the state update happened.
â«But that's because we were learning
â«how React works in practice.
â«And in fact, when we look at what happens in practice,
â«it looks as if only
â«the updated component is re-rendered.
â«But now we are learning
â«how React actually works behind the scenes.
â«And so now we know that React looks
â«at the entire tree whenever a render happens.
â«Finally, I just want to mention
â«that a render is actually not triggered immediately
â«after a state update happens.
â«Instead, it's scheduled for when
â«the JavaScript engine basically
â«has some free time on its hands.
â«But this difference is usually
â«just a few milliseconds
â«that we won't notice.
â«There are also some situations
â«like multiple sets state calls
â«in the same function where renders will be batched
â«as we will explore a bit later.
â«So this is how renders are triggered
â«which is the easy part.
â«What follows is the hard part,
â«which is the actual rendering.
â«And so let's learn all about that in the next video.
Weitere Àhnliche Videos ansehen
![](https://i.ytimg.com/vi/cvOj6iwCU1Y/hq720.jpg)
How Rendering Works: The Render Phase | Lecture 124 | React.JS đ„
![](https://i.ytimg.com/vi/6-L6LoNn5kc/hq720.jpg)
Components, Instances, and Elements | Lecture 121 | React.JS đ„
![](https://i.ytimg.com/vi/gT3uw-_VG80/hq720.jpg)
Instances and Elements in Practice | Lecture 122 | React.JS đ„
![](https://i.ytimg.com/vi/91FRBa7ycIE/hq720.jpg)
Performance Optimization and Wasted Renders | Lecture 239 | React.JS đ„
![](https://i.ytimg.com/vi/ZzrAkGi4S34/hq720.jpg)
How Events Work in React | Lecture 134 | React.JS đ„
![](https://i.ytimg.com/vi/1H7kmNfp3fo/hq720.jpg)
State Update Batching in Practice | Lecture 133 | React.JS đ„
5.0 / 5 (0 votes)