React Grimoire
  • ⁉️Introduction
  • πŸ§‘β€πŸŽ“πŸ§‘πŸŽ“ React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • πŸͺReact Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • πŸ““React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • πŸ”­Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • πŸš€Deployment
    • In Progress
  • πŸ–ΌοΈDesign system
    • 🏁What's a design system anyway ?​?
  • πŸ”—Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Overview
  • Reconciliation versus rendering
  • The Diffing Process
  • References and articles :

Was this helpful?

Edit on GitHub
  1. Concepts
  2. React Under the hood

Reconciliation & Virtual DOM in React

When the props or state of a component change, React determines whether an actual DOM update is required by comparing the newly returned element to the previously rendered one.

React will update the DOM if they are not equal. This is known as "reconciliation." It's critical to understand how React's reconciler works in order to build performant apps and avoid perplexing bugs.

Overview

To try to illustrate how the reconciler works at a high-level, we’ll look at an example.

Let’s say we had the following list of items rendered with React:

return (
    <ul className="list">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  );

And we wanted to transition to the following new state:

return (
    <ul className="list">
      <li>A</li>
      <li>B</li>
      <li className="selected">C</li>
    </ul>
  );

One solution would be to re-render our component from scratch each time and replace the DOM. However, by recreating the same DOM elements every time, components would lose their state and performance would suffer. This could also have an impact on overall user experience; for example, if we were constantly re-rendering an input as a user typed into it, the user would lose focus while typing each time our input re-rendered.

Instead, React uses a different approach called reconciliation.

When you use React, you can think of the render() function as creating a tree of React elements at a single point in time. This tree has been saved to memory. That render() function will return a different tree of React elements on the next re-render (typically triggered by a state or props update).

React will determine which child components to mount, update, and unmount during this update stage. React must then figure out how to update the UI in an efficient manner to match the most recent tree. To accomplish this, React compares the new and old trees and translates the differences to a set of DOM operations (in the case of a React Native application, it would translate to a set of

Reconciliation versus rendering

The DOM is just one of the rendering environments React can render to, with native iOS and Android views via React Native being the other major targets. (This is why the term "virtual DOM" is a bit misleading.) Because React is designed in such a way that reconciliation and rendering are separate phases, it can support so many targets.

The reconcile determines which parts of a tree have changed, and the renderer uses that information to update the rendered app. Because of this separation, React DOM and React Native can use their own renderers while sharing the same reconciler provided by React's core.

The Diffing Process

The diffing algorithm in React is based on two assumptions:

  1. Two elements of different types are assumed to generate substantially different trees. React will not attempt to diff them, but rather replace the old tree completely.

  2. The developer can hint at which child elements may be stable across different renders with a key prop. Keys should be stable, predictable, and unique.

With these assumptions in mind, React compares its internal DOM tree model (aka virtual DOM) to the actual DOM, starting with the two root elements.

When comparing two trees, React compares the two root elements first.

References and articles :

PreviousReact LifecycleNextFiber

Last updated 3 years ago

Was this helpful?

πŸ”­
🏁
Reconciliation – React
Codebase Overview – React
Implementation Notes – React
Design Principles – React
GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React FiberGitHub
Virtual DOM and Diff algorithm in React
How Virtual-DOM and diffing works in ReactMedium
Logo
Logo
Logo
Logo
Logo
Logo