📜 React Internals: Which useEffect runs first?: A good reminder that
useEffect callbacks run bottom-up, from the deepest child to the root (unless you use <Activity>, but that’s a story for another time 🙈).Frontend Masters
React Internals: Which useEffect runs first?
useEffect is one of the most commonly used hooks in the React community. Regardless of how much experience you have with React, you’ve probably used it before.
👍1
📜 Concurrent Optimistic Updates in React Query: Dominik shares interesting patterns to avoid displaying an inconsistent UI when using React Query with concurrent mutations and optimistic updates. Tip: only call
invalidateQueries() when there’s a single in-flight mutation.tkdodo.eu
Concurrent Optimistic Updates in React Query
How to build optimistic UI that is resilient to race conditions, even when multiple mutations update the same entity concurrently.
👍2
📜 Parents & Owners in React: Context Providers: Explains the difference between parent and owner components. By restructuring the owner tree without changing the parent tree, we create more targeted “units of update”.
JulesBlom.com
Parents & Owners in React: Context Providers | JulesBlom.com
Understanding how parent and owner components affect context updates can help you write more performant context providers
👍1🔥1
📜 From Next.js to Astro: A Page Size Comparison: A quite fair numbers comparison after porting a small static Next.js site to Astro, reducing bundle size.
Norbauer
From Next.js to Astro: A Page Size Comparison
A comparison of page size after rebuilding this site in Astro
👍1
📦 React MCP Server (experimental): It’s in the React repo, but for now, it’s just a one-person fun experiment by Lauren (React Compiler team).
GitHub
react/compiler/packages/react-mcp-server at main · facebook/react
The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.
📦 Radix UI 1.3 - OneTimePasswordField: In case you missed it (we did!), there’s now a
radix-ui package to consolidate all Radix primitives under a single roof (instead of @radix-ui/* imports). It’s likely that shadcn/ui will adopt it and provide a codemod in the future.Radix-Ui
Releases – Radix Primitives
Radix Primitives releases and their changelogs.
👍1
📦 Storybook 9 beta: The new version is now feature complete, with a good focus on testing (components, interaction, accessibility, visual tests). The tag-based organization should help improve UX. Also includes first-class support for React Native Web.
Storybook Blog
Storybook 9 is now in beta
Try the future of UI testing today
👍1
📣 Node.js 18 reaches End-of-Life today: This Node.js version will no longer receive security updates, and it’s recommended to upgrade to v20 or v22.
nodejs.org
Node.js — Node.js Releases
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and noscripts.
👀 Asynchronous Svelte: Svelte has a new async experimental mode, and this doc explains how it works. The “Forks” section reminds a bit of Concurrent React, transitions, and its upcoming
<Activity> component.GitHub
Asynchronous Svelte · sveltejs svelte · Discussion #15845
This is a long document; get yourself a cup of tea. tl;dr You can now use the await keyword in Svelte — in your <noscript>, inside $derived expressions, and in your markup — by installing the a...
👀 Firefox enabling View Transitions in Firefox 139 Nightly builds: A positive signal from the only remaining browser to not have this feature. Good timing for React and its upcoming
<ViewTransition> component?Mozilla
Firefox Nightly 140.0a1, See All New Features, Updates and Fixes
📜 Giving V8 a Heads-Up: Faster JavaScript Startup with Explicit Compile Hints: A new feature coming with Chrome 136 allows faster web page loading by annotating your files/functions with magic comments to tell V8 to compile the JS code eagerly, showing promising results on experiments. Maybe it will be useful to speed up React hydration or even Node.js programs?
v8.dev
Giving V8 a Heads-Up: Faster JavaScript Startup with Explicit Compile Hints · V8
Explicit compile hints control which JavaScript files and functions are parsed and compiled eagerly
📜 Categorize Your Dependencies: Using pnpm catalogs.
Anthony Fu
Categorize Your Dependencies
When building a project, it’s very likely that we will install third-party packages from npm to offload some tasks. On that topic, we know there are two major types of dependencies: dependencies (prod) and devDependencies (dev). In our package.json, it might…