React Source Code Walkthrough

A live series of JSer deep diving into React internals, by reading the actual React source code. This series helps you understand how React works internally and write better React code.

1 - Hello world! debugging

Rough overview of React internals by debugging the simplest Hello World app.

2 - Initial Mount, how does it work?

How React constructs the DOM tree for the initial render.

3 - How doest React re-render internally?

How React handles updates and re-renders accordingly.

4 - How does useEffect() work internally?

useEffect() is one of the most confusing hooks in React, I'll explain to you how it works internally.

5 - How does useState work internally?

How useState() triggers re-renders in React.

6 - How does ErrorBoundary work internally?

ErrorBoundary is one of the most interesting components I think, this post covers its internals.

7 - How does Suspense work internally?

Suspense is one of the most important components in React development today, this post covers its internals.

8 - How does useTransition() work internally?

Following Suspense, transition is another advanced topic in React, it is useful to work with React Server Components together.

9 - How does Context work internally in React?

Context is a powerful tool in React, I'll explain to you in this post about how it works.

10 - How does useLayoutEffect() work internally?

useLayoutEffect() allows us to run effects before UI painting, have you wondered how it works internally?

11 - How does useRef() work internally?

useRef() is a powerful yet simple hook in React, I'll explain to you how it works internally in this episode.

12 - How does useImperativeHandle() work internally?

useImperativeHandle() might not be that commonly used, yet it is interesting to find out how it works internally

13 - How does React bailout work in reconciliation?

React has "re-render everything" mental model, but it also has this internal optimization of bailout to avoid unecessary render

14 - How does React.memo() work internally?

memo() allows us to improve performance by reducing unnecessary re-renders which built-in bailout cannot detect.

15 - How does React traverse Fiber tree internally?

React holds a fiber tree internally, do you know how it traverse it?

16 - The lifecycle of effect hooks in React

A detailed explanation for the internals of useEffect()

17 - How does useDeferredValue() work internally?

useDeferredValue() is hook to show the power of concurrent mode, let's see how it works internally

18 - How React handles empty values internally?

Empty values are ignored in react, we'll see how it is achieve internally.

19 - How does 'key' work? List diffing in React

'key' is a powerful hint in React world, do you know how it actually works?

20 - How does React Scheduler work internally?

Scheduler is one of the most important part of React, it is quite useful to understand how it schedules work of different priorities.

21 - What are Lanes in React source code?

Lanes means priority, let's see what it is and how it enables concurrent mode

22 - How Suspense works internally in Concurrent Mode 1 - Reconciling flow

Suspense works similar to ErrorBoundary, but way more complex. I'll explain its basic rendering mechanism.

23 - How Suspense works internally in Concurrent Mode 2 - Offscreen component

Offscreen component is used under the hood of Suspense, it is very useful

24 - How does act() work internally in React?

act() is useful in React testing, and it helps understand the React scheduler as well.

25 - How does SuspenseList work internally in React?

On top of Suspense, SuspenseList is a component to gain better UX

26 - How does React Portal work internally ?

Portal enables rendering React elements to different DOM container, perfect for modals.

27 - How basic hydration works internally in React ?

Hydration is the process of making server-side rendered DOM interactive, this episode covers the basic case

28 - How does useEffectEvent() works internally in React?

useEffectEvent() tries to make it easier to handle event handlers with useEffect().

29 - How hydration works with Suspense internally in React?

Server-side rendering is cool, but have you wondered how Suspense is handled?

30 - What is Progressive Hydration and how does it work internally in React?

Progressive Hydration is a magic to make Suspense cope with hydration like a charm.

31 - How do React Server Components(RSC) work internally in React?

React Server Components open up new possibilities of React, it is a perfect tool to build fullstack experiences.

32 - How does useId() work internally in React?

useId() is a simple but quite interesting hook to generate unique ids, let's see how the algorithm works