
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