Introduction

Understanding React Source Code

This book is written on top of React 16+

I have finished writing most part of this book, and I will continue to update and polish this book as I go.

Before I write this book, I have already spent about a month to read the source code of React. I have never thought this is something difficult. I was wrong.

Understanding why you want to read source code before you start is critical. Because an open source framework is rather different than a normal frontend web app, thus their design philosophy.

You simply can't think about them in the same way. Let alone telling it might be a skill issue for me to understand them, since I have almost never written library code. I was absolutely lost when I tried to dog food them. For example, when I saw the design of TypeofMode in React Fiber:

export const NoContext = 0b000;
export const AsyncMode = 0b001;
export const StrictMode = 0b010;
export const ProfileMode = 0b100;

I didn't realise they designed it to simplify the component/function types, and their consolidating direction. If I have any prior exposure to complex access control system design, I would have realised it immediately.

Taking another example, as a frontend engineer, I didn't study deep into algorithms or data structures, so when I saw firstEffect.nextEffect, or lastEffect I didn't understand what it meant and what was it for. (It was a type of design pattern called linked list, a linear collection of data elements whose order is not given by their physical placement in memorywikipedia (opens in a new tab)).

Lmao, I just want to reiterate what I have learnt while reading React's source code in prelude. Reading source code doesn't just help you to deeply understand the design philosophy of a framework, but also to know "What's the better way to do X".

In the world of programming, we will regress if we don't progress right?

3 core ideas in React

Let's go back to the business, I concluded the core ideas of React into 3 parts:

  • How they handle updates
  • What's Fiber and what was it for
  • Dynamic routing, tasks update and scheduling in React, and how they achieve it

I'd consider these three ideas are the most difficult to understand.

The website you are looking at right now is somewhat similar to a notebook, they are jotted down when I was reading the source code. I found this "Left pane for note taking, right pane for source code" + Gitbook very comfortable for both reading and writing.

I am still combing through the whole idea and try to display the least amount of source code in order to understand the key concepts in React. For people who doesn't have a lot of time to sit down and read, I guess it might be a good way to split them into chunks and read them in your spare time. At this end I might explain the conclusion in a fashion of either:

  • PDFs
  • Videos

How React schedule tasks

Before we start, I want to show you a graph:




For the full graph in Excalidraw, click here (opens in a new tab)



Feel intrigued? Follow me (opens in a new tab).

React API