Understanding React - Part 0. Introduction

May 25

# Tech

# Front-End

# React

Introduction to React

React is one of the most popular libraries for building fast and efficient front-end applications. It has revolutionized the way we develop web pages, enhancing both our development mindset and productivity.

The Development Experience Before React

Before React, developers followed a process-driven approach, using libraries like jQuery to build web applications. This approach required explicit, step-by-step instructions to achieve a specific outcome, often resulting in complex, imperative code that was hard to maintain and scale. Each UI change demanded direct DOM manipulation, which could lead to performance issues and bugs.

The Development Experience with React

In contrast, React introduces a behavior-driven development paradigm. By defining the desired UI state and letting React handle the rendering, developers can focus on the application's behavior rather than its implementation details. This declarative approach, enabled by React's component-based architecture, promotes reusability, better code organization, and improved performance. With React, developers can describe what they want to achieve, and the framework takes care of the rest.

Exploring Key Questions

If you have used React, you are likely familiar with terms like function components, JSX, and hooks. If not, I recommend creating a simple React demo to get a feel for it.

Now, consider this: what does React actually do, and how is the UI updated when setState is called? You might think, "Oh, the re-render is performed!" But what exactly is a re-render? How does React manage re-rendering for thousands of elements in your application?

Additionally, you may have encountered some peculiar issues during development. For example, why does calling setState twice in a row only trigger a single re-render? And why can't hooks be called inside conditionals like if statements?

To uncover the magic behind React and become a more proficient React developer, I delved into the source code and decided to write a series of posts to explain the underlying mechanisms.

Roadmap of the Series

To address these questions and better understand React, I'm rewriting React 18 using TypeScript, implementing its core functions to ensure it behaves like the official React. Meanwhile, I will also be writing a series of posts. This series of posts aims to document my insights and assist other developers in exploring React's inner workings. The series includes:

1. Understanding React Elements, JSX, and Fiber: Exploring the fundamental building blocks of React applications and the efficient Fiber architecture that powers its rendering engine.
2. Breaking Down the React Work Loop: A detailed explanation of how React traverses the fiber tree, collects updates, and patches changes to build a new virtual DOM before committing those changes to the actual host environment, like the DOM.
3. Exploring the React Reconciler and the Diff Algorithm: Delving into how React reconciles changes in the virtual DOM and optimizes updates using its efficient diffing algorithm.
4. Decoding React's Handling of Function Components and Hooks: Delving into React's internal mechanisms for managing function components, and exploring the integration of hooks for state management and lifecycle operations.
5. Unveiling the React Scheduler and Concurrent Mode: A breakdown of how React manages numerous updates efficiently through the scheduling phase and Concurrent Mode, enhancing performance in complex applications.
6. Building React DOM and Its Event System: Detailing the process of integrating React components into the DOM environment, including the implementation of event handling to create interactive user interfaces.

Throughout the series, I will complement these explanations with clear and insightful diagrams to aid in understanding these complex concepts visually.

Diagram Sample: The Mechanism of BeginWork in React

Repository and Debug

I named this project React Rebuild. Here is the GitHub Repository. This monorepo contains a project structure that includes:

Features

• Alignment with the Official Implementation: This project aims to closely align with React's official implementation to understand the design philosophy of React.
• Easy to Debug: This project provides convenient debugging methods, making it easy to debug the source code and learn about React's internal principles through execution steps.
• Extensive Comments: This project contains a wealth of comments, mainly reflecting my thoughts and understanding while rewriting React.

Installation

We use pnpm as our package manager. To install React-Rebuild, follow these steps:

Debugging

To debug React-Rebuild, you can follow these steps:

1. Start a Development Server: Run pnpm dev to start a development server that watches file changes and compiles the latest output of the react and react-dom packages.
2. Run Demo Pages: Use pnpm demo:react to start a demo frontend page. This replaces the official react and react-dom packages with the output from step 1, allowing you to conveniently write and test demo code.
3. Debugging with Visual Studio Code: If you're using VS Code, switch to Run and Debug and utilize existing debug configurations under .vscode/launch.json.
4. Adding Breakpoints: Set breakpoints by clicking the red-filled circles in the editor margin or add debugger statements in your code to pause execution and inspect debug information.

VSCode Debug Tools

Adding Breakpoint in VSCode

Conclusion and What's Next

By learning about React's mechanisms and rebuilding it line by line, you will gain a profound understanding of how React operates. This knowledge will empower you to write more efficient, scalable, and maintainable code.

Stay tuned for the upcoming posts in this series, where we will dive deep into each of these topics, unraveling the intricacies of React and enhancing our development skills together.

Series

• Understanding React - Part 1. React Element, JSX and Fiber
• Understanding React - Part 2.1. Breaking Down the React Work Loop
• Understanding React - Part 2.2. The Render and Commit stages of React’s Work Loop
• 🚧...