Personal homepage of JSer, and his blogs.https://jser.dev/https://jser.dev/2024-07-01-esm-react/https://jser.dev/2024-07-01-esm-react/React stops shipping UMD builds since 19, here is how we can try it out.Mon, 01 Jul 2024 09:21:10 GMThttps://jser.dev/2024-05-11-introducing-rie/https://jser.dev/2024-05-11-introducing-rie/React Internals Explorer is a visualization tool to help you understand React internals easily.Mon, 17 Jun 2024 09:21:10 GMThttps://jser.dev/2024-05-11-introducing-ddir/https://jser.dev/2024-05-11-introducing-ddir/A course to fill gap between knowing how to work with React and knowing how React works.Sat, 11 May 2024 09:21:10 GMThttps://jser.dev/2024-03-27-introducing-deeper-dev/https://jser.dev/2024-03-27-introducing-deeper-dev/Deeper Dive Chrome Extension enhances react.dev with links to advanced topicsWed, 27 Mar 2024 09:21:10 GMThttps://jser.dev/2024-03-20-how-does-useoptimisticwork-internally-in-react/https://jser.dev/2024-03-20-how-does-useoptimisticwork-internally-in-react/useOptimistic() helps build optimistic UI to improved perceived performance.Wed, 20 Mar 2024 09:21:10 GMThttps://jser.dev/2024-03-16-how-does-use-work-internally-in-react/https://jser.dev/2024-03-16-how-does-use-work-internally-in-react/use() is an easy way to use Promise or context as resources.Sat, 16 Mar 2024 09:21:10 GMThttps://jser.dev/2023-12-14-runforenvvar-macro/https://jser.dev/2023-12-14-runforenvvar-macro/Use a babel macro to run code conditionally based on env varWed, 03 Jan 2024 01:00:10 GMThttps://jser.dev/2023-10-09-styled-components/https://jser.dev/2023-10-09-styled-components/Let's see how Styled Components work internally.Sun, 15 Oct 2023 11:21:10 GMThttps://jser.dev/2023-09-24-progressive-ts-migration/https://jser.dev/2023-09-24-progressive-ts-migration/Migrate TypeScript Code ProgressivelySun, 24 Sep 2023 11:21:10 GMThttps://jser.dev/2023-09-17-how-unocss-works-with-vite/https://jser.dev/2023-09-17-how-unocss-works-with-vite/Explains how UnoCSS works under the hood, with example usage in Vite.Sun, 17 Sep 2023 11:21:10 GMThttps://jser.dev/shorts/2023-08-15-userdeferredvalue/https://jser.dev/shorts/2023-08-15-userdeferredvalue/Either throttling or debouncing leads to fixed lag which is bad UX, it is better improve this with `useDeferredValue()` in React Concurrent Mode.Tue, 15 Aug 2023 09:21:10 GMThttps://jser.dev/shorts/2023-09-23-spread-not-sound/https://jser.dev/shorts/2023-09-23-spread-not-sound/Need to be careful when using spread operator.Tue, 15 Aug 2023 09:21:10 GMThttps://jser.dev/2023-08-09-introducing-shaku-snippet/https://jser.dev/2023-08-09-introducing-shaku-snippet/Shaku Snippet makes it super easy to generate code snippet screenshots with support of Shaku code annotationWed, 09 Aug 2023 11:21:10 GMThttps://jser.dev/2023-08-09-effects-run-paint/https://jser.dev/2023-08-09-effects-run-paint/Most of time useEffect() callbacks are run after paint but sometimes before paint.Wed, 09 Aug 2023 09:21:10 GMThttps://jser.dev/2023-08-02-usesyncexternalstore/https://jser.dev/2023-08-02-usesyncexternalstore/useSyncExternalStore() is a React Hook that allows us to subscribe to an external store and do it safely without tearing.Wed, 02 Aug 2023 09:21:10 GMThttps://jser.dev/2023-07-28-how-forwardref-works-internally/https://jser.dev/2023-07-28-how-forwardref-works-internally/forwardRef() allows us to create a component that can extract ref from props.Fri, 28 Jul 2023 09:21:10 GMThttps://jser.dev/2023-07-25-how-lazy-works-internally/https://jser.dev/2023-07-25-how-lazy-works-internally/Built-in `lazy()` is an easy way to lazy-load component at rendering, it suspends if loading is not completed.Tue, 25 Jul 2023 09:21:10 GMThttps://jser.dev/2023-07-18-how-react-rerenders/https://jser.dev/2023-07-18-how-react-rerenders/If updates are triggered after mount, React re-renders with minimum DOM updates after diffing 2 versions of Fiber Tree.Tue, 18 Jul 2023 09:21:10 GMThttps://jser.dev/2023-07-14-initial-mount/https://jser.dev/2023-07-14-initial-mount/Initial mount is the first render for a React app, it creates the internal Fiber Tree and also the DOM tree.Fri, 14 Jul 2023 09:21:10 GMThttps://jser.dev/2023-07-11-overall-of-react-internals/https://jser.dev/2023-07-11-overall-of-react-internals/I'm going to give you a rough overview of React internals and also some tips on how to learn React internalsTue, 11 Jul 2023 09:21:10 GMThttps://jser.dev/2023-07-08-how-does-useeffect-work/https://jser.dev/2023-07-08-how-does-useeffect-work/useEffect() is one of the most confusing hooks in React, it allows us to run functions after DOM updates.Sat, 08 Jul 2023 09:21:10 GMThttps://jser.dev/2023-07-02-use-insertion-effect/https://jser.dev/2023-07-02-use-insertion-effect/useInsertionEffect() allows effect to be run even sooner than layout effects.Sun, 02 Jul 2023 09:21:10 GMThttps://jser.dev/2023-06-19-how-does-usestate-work/https://jser.dev/2023-06-19-how-does-usestate-work/useState() is the only state hook that stores data and triggers updates.Fri, 23 Jun 2023 09:21:10 GMThttps://jser.dev/2023-05-31-react-types-in-typescript/https://jser.dev/2023-05-31-react-types-in-typescript/Demystify the common React types in TypeScriptWed, 31 May 2023 09:21:10 GMThttps://jser.dev/2023-05-26-how-does-errorboundary-work/https://jser.dev/2023-05-26-how-does-errorboundary-work/ErrorBoundary allows us to catch error declaratively on the internal Fiber Tree inside React.Fri, 26 May 2023 09:21:10 GMThttps://jser.dev/2023-05-21-quick-code-75/https://jser.dev/2023-05-21-quick-code-75/QuickCode 75 is a tool to help you quickly review and check your understandings of Grind 75 questions.Sun, 21 May 2023 09:21:10 GMThttps://jser.dev/2023-05-19-how-does-usetransition-work/https://jser.dev/2023-05-19-how-does-usetransition-work/useTransition() is an API to explicitly put updates in a lower priroity and make it interruptable in concurrent mode.Thu, 18 May 2023 09:21:10 GMThttps://jser.dev/2023-05-14-introducing-shaku/https://jser.dev/2023-05-14-introducing-shaku/Shaku is a family of tools that makes it easier to write technical articles.Sun, 14 May 2023 09:21:10 GMThttps://jser.dev/2023-04-25-how-does-useid-work/https://jser.dev/2023-04-25-how-does-useid-work/useId() generates unique id based on the Fiber Node position on the Fiber Tree. If not hydration, it falls back to global counter.Sun, 23 Apr 2023 09:21:10 GMThttps://jser.dev/react/2023/04/20/how-do-react-server-components-work-internally-in-react/https://jser.dev/react/2023/04/20/how-do-react-server-components-work-internally-in-react/React Server Components are rendered on server and its JSON format response is streamed to client in multiple chunks.Thu, 20 Apr 2023 09:21:10 GMThttps://jser.dev/react/2023/04/10/guess-rsc/https://jser.dev/react/2023/04/10/guess-rsc/JSer tries to implement something similar to React Server Component.Mon, 10 Apr 2023 09:21:10 GMThttps://jser.dev/react/2023/03/30/progressive-hydration/https://jser.dev/react/2023/03/30/progressive-hydration/React Tree on server is rendered progressively and streamed to client and hydration continues.Thu, 30 Mar 2023 09:21:10 GMThttps://jser.dev/react/2023/03/27/hydration-with-suspense/https://jser.dev/react/2023/03/27/hydration-with-suspense/Suspens in SSR is replaced with special comment node marker which is handled specially on client.Mon, 27 Mar 2023 09:21:10 GMThttps://jser.dev/react/2023/03/18/useeffectevent/https://jser.dev/react/2023/03/18/useeffectevent/useEffectEvent() is a way to address the caveat of useEffect() dependencies.Sat, 18 Mar 2023 09:21:10 GMThttps://jser.dev/react/2023/03/17/how-does-hydration-work-in-react/https://jser.dev/react/2023/03/17/how-does-hydration-work-in-react/Hydration is the process that rather than creating new DOM, React tries to reuse the existing DOM rendered by server.Fri, 17 Mar 2023 09:21:10 GMThttps://jser.dev/react/2023/02/26/reactivity-in-solidjs/https://jser.dev/react/2023/02/26/reactivity-in-solidjs/JSer tries to understand the internals of SolidJSSun, 26 Feb 2023 09:21:10 GMThttps://jser.dev/react/2023/02/13/build-accessible-popover-component-in-react/https://jser.dev/react/2023/02/13/build-accessible-popover-component-in-react/JSer tries to build an accessible Popover component in ReactMon, 13 Feb 2023 09:21:10 GMThttps://jser.dev/typescript/2023/01/22/distributiveness-in-ts/https://jser.dev/typescript/2023/01/22/distributiveness-in-ts/When conditional types act on a generic type, they become distributive when given a union type.Sun, 22 Jan 2023 02:21:10 GMThttps://jser.dev/typescript/2023/01/12/typescript-object-Object/https://jser.dev/typescript/2023/01/12/typescript-object-Object/These are 3 quite confusing types in TypeScript, let's understand their difference once and for all.Thu, 12 Jan 2023 02:21:10 GMThttps://jser.dev/misc/2022/12/31/2022-review-and-2023-plan/https://jser.dev/misc/2022/12/31/2022-review-and-2023-plan/What JSer has done and what's next.Sat, 31 Dec 2022 02:21:10 GMThttps://jser.dev/react/2022/10/09/maze-solver/https://jser.dev/react/2022/10/09/maze-solver/JSer tries to create a Maze Solver Visualizer.Sun, 09 Oct 2022 09:21:10 GMThttps://jser.dev/react/2022/09/24/how-does-react-portal-work/https://jser.dev/react/2022/09/24/how-does-react-portal-work/Portal is a special component that move part of the sub DOM tree to be based on somewhere else.Sat, 24 Sep 2022 09:21:10 GMThttps://jser.dev/typescript/2022/08/06/build-types-in-typescript/https://jser.dev/typescript/2022/08/06/build-types-in-typescript/As a programmer, we should try to use code to do work for us.Sat, 06 Aug 2022 09:21:10 GMThttps://jser.dev/react/2022/07/25/build-an-accessible-tab-component-in-react/https://jser.dev/react/2022/07/25/build-an-accessible-tab-component-in-react/JSer tries to build an accessible Tab component in ReactMon, 25 Jul 2022 09:21:10 GMThttps://jser.dev/react/2022/06/19/how-does-suspense-list-work/https://jser.dev/react/2022/06/19/how-does-suspense-list-work/SuspenseList is a comoponent to orchestrate the content revealing order of multiple Suspenses.Sun, 19 Jun 2022 09:21:10 GMThttps://jser.dev/react/2022/05/15/how-act-works/https://jser.dev/react/2022/05/15/how-act-works/act() is a way to bypass scheduler inside React so everything is synchronous and easy to controlSun, 15 May 2022 09:21:10 GMThttps://jser.dev/react/2022/05/07/alternatives-to-useevent/https://jser.dev/react/2022/05/07/alternatives-to-useevent/A first impression of useEvent() from JSer.Sat, 07 May 2022 09:21:10 GMThttps://jser.dev/front-end/2022/04/22/how-to-handle-version-mismatch-between-client-and-server/https://jser.dev/front-end/2022/04/22/how-to-handle-version-mismatch-between-client-and-server/This is a common issue that is not quite easy to address.Fri, 22 Apr 2022 09:21:10 GMThttps://jser.dev/react/2022/04/17/offscreen-component/https://jser.dev/react/2022/04/17/offscreen-component/Offscreen is component that has low priority in rendering, also used in SuspenseSun, 17 Apr 2022 09:21:10 GMThttps://jser.dev/react/2022/04/02/suspense-in-concurrent-mode-1-reconciling/https://jser.dev/react/2022/04/02/suspense-in-concurrent-mode-1-reconciling/The initial mount and re-render of Suspense component.Sat, 02 Apr 2022 09:21:10 GMThttps://jser.dev/react/2022/03/26/lanes-in-react/https://jser.dev/react/2022/03/26/lanes-in-react/Lanes are the marker to indicate the priority of tasks.Sat, 26 Mar 2022 09:21:10 GMThttps://jser.dev/react/2022/03/17/hardcore-react-discord/https://jser.dev/react/2022/03/17/hardcore-react-discord/A new place to learn React Internals.Thu, 17 Mar 2022 01:21:10 GMThttps://jser.dev/react/2022/03/16/how-react-scheduler-works/https://jser.dev/react/2022/03/16/how-react-scheduler-works/Different tasks have differnt priorities, Scheduler is the workloop to prioritize the tasks.Wed, 16 Mar 2022 09:21:10 GMThttps://jser.dev/react/2022/02/18/reusable-behavior-hooks-through-ref/https://jser.dev/react/2022/02/18/reusable-behavior-hooks-through-ref/This is a very cool pattern to handle events.Fri, 18 Feb 2022 09:21:10 GMThttps://jser.dev/react/2022/02/08/the-diffing-algorithm-for-array-in-react/https://jser.dev/react/2022/02/08/the-diffing-algorithm-for-array-in-react/`key` is to indicate React to reuse the Fiber Nodes rather than create new ones.Tue, 08 Feb 2022 09:21:10 GMThttps://jser.dev/react/2022/02/04/how-React-handles-empty-values/https://jser.dev/react/2022/02/04/how-React-handles-empty-values/Empty values are simply ignore during the reconciliation.Fri, 04 Feb 2022 09:21:10 GMThttps://jser.dev/typescript/2022/01/29/easily-understand-contravariance-in-function-arguments/https://jser.dev/typescript/2022/01/29/easily-understand-contravariance-in-function-arguments/Covariance and contravariance are quite advanced topics, but actually not difficult to understand.Sat, 29 Jan 2022 09:21:10 GMThttps://jser.dev/react/2022/01/26/how-does-react-usedeferredvalue-work/https://jser.dev/react/2022/01/26/how-does-react-usedeferredvalue-work/useDeferredValue() is a hook to lower the priority of rendering triggered by the value change.Wed, 26 Jan 2022 09:21:10 GMThttps://jser.dev/react/2022/01/19/lifecycle-of-effect-hook/https://jser.dev/react/2022/01/19/lifecycle-of-effect-hook/A deeper look at how effect hooks are working under the hoodWed, 19 Jan 2022 09:21:10 GMThttps://jser.dev/react/2022/01/16/fiber-traversal-in-react/https://jser.dev/react/2022/01/16/fiber-traversal-in-react/React flattens Fiber Tree and traversed it as a linked-list.Sun, 16 Jan 2022 09:21:10 GMThttps://jser.dev/react/2022/01/11/how-react-memo-works/https://jser.dev/react/2022/01/11/how-react-memo-works/memo() creates special Fiber Node internally that it caches the result based on its dependencies.Tue, 11 Jan 2022 09:21:10 GMThttps://jser.dev/webapi/2022/01/09/lets-look-at-resizeobserver/https://jser.dev/webapi/2022/01/09/lets-look-at-resizeobserver/ResizeObeserver callback is triggered after layout and before paint in Event Loop model.Sun, 09 Jan 2022 09:21:10 GMThttps://jser.dev/react/2022/01/07/how-does-bailout-work/https://jser.dev/react/2022/01/07/how-does-bailout-work/Bailout is the internal optimization in React to skip rendering the subtree if there nothing changed.Fri, 07 Jan 2022 09:21:10 GMThttps://jser.dev/typescript/2022/01/06/invariant-style-assertion-functions-in-typescript/https://jser.dev/typescript/2022/01/06/invariant-style-assertion-functions-in-typescript/invariant() creates more readable code.Thu, 06 Jan 2022 09:21:10 GMThttps://jser.dev/react/2021/12/25/how-does-useImperativeHandle-work/https://jser.dev/react/2021/12/25/how-does-useImperativeHandle-work/useImperativeHandle() allows child component to change ref from parent in a safe manner.Sat, 25 Dec 2021 09:21:10 GMThttps://jser.dev/react/2021/12/05/how-does-useRef-work/https://jser.dev/react/2021/12/05/how-does-useRef-work/useRef() internally holds a value that its changes don't trigger re-render.Sun, 05 Dec 2021 09:21:10 GMThttps://jser.dev/react/2021/12/04/how-does-useLayoutEffect-work/https://jser.dev/react/2021/12/04/how-does-useLayoutEffect-work/useLayoutEffect() hooks are commited right after DOM mutations are done, and synchronously.Sat, 04 Dec 2021 09:21:10 GMThttps://jser.dev/react/2021/07/28/how-does-context-work/https://jser.dev/react/2021/07/28/how-does-context-work/Context creates special Fiber Nodes that hold values for its sub-tree to access.Wed, 28 Jul 2021 09:21:10 GMT