-
React Internals Explorer - easily see how React works
React Internals Explorer is a visualization tool to help you understand React internals easily.
-
Deeper Dive Into React - React course by JSer
A course to fill gap between knowing how to work with React and knowing how React works.
-
Deeper Dive Chrome Extension - Enhance React.dev
Deeper Dive Chrome Extension enhances react.dev with links to advanced topics
-
How does useOptimistic() work internally in React? React Internals Deep Dive - 39
useOptimistic() helps build optimistic UI to improved perceived performance.
-
How does use() work internally in React? React Internals Deep Dive - 38
use() is an easy way to use Promise or context as resources.
-
Babel macro:`runCodeForEnvVar()` - run code conditionally on env var.
Use a babel macro to run code conditionally based on env var
-
-
-
How UnoCSS works internally with Vite?
Explains how UnoCSS works under the hood, with example usage in Vite.
-
Introducing Shaku Snippet - generate code screenshot with annotation
Shaku Snippet makes it super easy to generate code snippet screenshots with support of Shaku code annotation
-
When do useEffect() callbacks get run? Before paint or after paint? React Internals Deep Dive - 37
Most of time useEffect() callbacks are run after paint but sometimes before paint.
-
How useSyncExternalStore() works internally in React? React Internals Deep Dive - 36
useSyncExternalStore() is a React Hook that allows us to subscribe to an external store and do it safely without tearing.
-
How forwardRef() works internally in React? React Internals Deep Dive - 35
forwardRef() allows us to create a component that can extract ref from props.
-
How lazy() works internally in React? React Internals Deep Dive - 34
Built-in `lazy()` is an easy way to lazy-load component at rendering, it suspends if loading is not completed.
-
How does React re-render internally? React Internals Deep Dive - 3
If updates are triggered after mount, React re-renders with minimum DOM updates after diffing 2 versions of Fiber Tree.
-
How does React do the initial mount internally? React Internals Deep Dive - 2
Initial mount is the first render for a React app, it creates the internal Fiber Tree and also the DOM tree.
-
How does React work under the hood ? The Overview of React internals React Internals Deep Dive - 1
I'm going to give you a rough overview of React internals and also some tips on how to learn React internals
-
How does useEffect() work internally in React? React Internals Deep Dive - 4
useEffect() is one of the most confusing hooks in React, it allows us to run functions after DOM updates.
-
How does useInsertionEffect() work internally in React? React Internals Deep Dive - 33
useInsertionEffect() allows effect to be run even sooner than layout effects.
-
How does useState() work internally in React? React Internals Deep Dive - 5
useState() is the only state hook that stores data and triggers updates.
-
-
How does ErrorBoundary work internally in React? React Internals Deep Dive - 6
ErrorBoundary allows us to catch error declaratively on the internal Fiber Tree inside React.
-
Introducing QuickCode 75 - a companion app for Grind 75 / Blind 75
QuickCode 75 is a tool to help you quickly review and check your understandings of Grind 75 questions.
-
How does useTransition() work internally in React? React Internals Deep Dive - 8
useTransition() is an API to explicitly put updates in a lower priroity and make it interruptable in concurrent mode.
-
Introducing Shaku - a family of tools that help write tech articles
Shaku is a family of tools that makes it easier to write technical articles.
-
How does useId() work internally in React? React Internals Deep Dive - 32
useId() generates unique id based on the Fiber Node position on the Fiber Tree. If not hydration, it falls back to global counter.
-
How do React Server Components(RSC) work internally in React? React Internals Deep Dive - 31
React Server Components are rendered on server and its JSON format response is streamed to client in multiple chunks.
-
My guess at how React Server Component(RSC) works internally
JSer tries to implement something similar to React Server Component.
-
What is Progressive Hydration and how does it work internally in React? React Internals Deep Dive - 30
React Tree on server is rendered progressively and streamed to client and hydration continues.
-
How hydration works with Suspense internally in React? React Internals Deep Dive - 29
Suspens in SSR is replaced with special comment node marker which is handled specially on client.
-
How does useEffectEvent() work internally in React? React Internals Deep Dive - 28
useEffectEvent() is a way to address the caveat of useEffect() dependencies.
-
How basic hydration works internally in React? React Internals Deep Dive - 27
Hydration is the process that rather than creating new DOM, React tries to reuse the existing DOM rendered by server.
-
First look at fine-grained reactivity in Solid - SolidJS Source Code Walkthrough 1
JSer tries to understand the internals of SolidJS
-
Build an accessible Popover component in React
JSer tries to build an accessible Popover component in React
-
Distributivity in Typescript
When conditional types act on a generic type, they become distributive when given a union type.
-
`{}` vs `object` vs `Object` in TypeScript.
These are 3 quite confusing types in TypeScript, let's understand their difference once and for all.
-
-
How does React Portal work internally ? React Internals Deep Dive - 26
Portal is a special component that move part of the sub DOM tree to be based on somewhere else.
-
Try to build types in TypeScript, not write them
As a programmer, we should try to use code to do work for us.
-
-
How does SuspenseList work internally in React? React Internals Deep Dive - 25
SuspenseList is a comoponent to orchestrate the content revealing order of multiple Suspenses.
-
How does act() work internally in React? React Internals Deep Dive - 24
act() is a way to bypass scheduler inside React so everything is synchronous and easy to control
-
-
How to handle version mismatch between client and server?
This is a common issue that is not quite easy to address.
-
How Suspense works internally in Concurrent Mode 2 - Offscreen component React Internals Deep Dive - 23
Offscreen is component that has low priority in rendering, also used in Suspense
-
How Suspense works internally in Concurrent Mode 1 - Reconciling flow React Internals Deep Dive - 22
The initial mount and re-render of Suspense component.
-
What are Lanes in React source code? React Internals Deep Dive - 21
Lanes are the marker to indicate the priority of tasks.
-
How React Scheduler works internally? React Internals Deep Dive - 20
Different tasks have differnt priorities, Scheduler is the workloop to prioritize the tasks.
-
React advanced patterns - Reusable behavior hooks through Ref
This is a very cool pattern to handle events.
-
How does 'key' work internally? List diffing in React React Internals Deep Dive - 19
`key` is to indicate React to reuse the Fiber Nodes rather than create new ones.
-
How does React handle empty values(null/undfined/Booleans) internally? React Internals Deep Dive - 18
Empty values are simply ignore during the reconciliation.
-
Easily understand Contravariance of function arguments in TypeScript
Covariance and contravariance are quite advanced topics, but actually not difficult to understand.
-
How does React.useDeferredValue() work internally? React Internals Deep Dive - 17
useDeferredValue() is a hook to lower the priority of rendering triggered by the value change.
-
The lifecycle of effect hooks in React React Internals Deep Dive - 16
A deeper look at how effect hooks are working under the hood
-
How does React traverse Fiber tree internally? React Internals Deep Dive - 15
React flattens Fiber Tree and traversed it as a linked-list.
-
How does React.memo() work internally? React Internals Deep Dive - 14
memo() creates special Fiber Node internally that it caches the result based on its dependencies.
-
Let's take a look at ResizeObserver
ResizeObeserver callback is triggered after layout and before paint in Event Loop model.
-
How does React bailout work in reconciliation? React Internals Deep Dive - 13
Bailout is the internal optimization in React to skip rendering the subtree if there nothing changed.
-
-
How does useImperativeHandle() work internally? React Internals Deep Dive - 12
useImperativeHandle() allows child component to change ref from parent in a safe manner.
-
How does useRef() work? React Internals Deep Dive - 11
useRef() internally holds a value that its changes don't trigger re-render.
-
How does useLayoutEffect() work internally? React Internals Deep Dive - 10
useLayoutEffect() hooks are commited right after DOM mutations are done, and synchronously.
-
How does Context work internally in React? React Internals Deep Dive - 9
Context creates special Fiber Nodes that hold values for its sub-tree to access.