JSer.dev
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