📨 #202: Next.js, Composition, search params, PPR, useActionState, content-visibility, Astro, MDX, Storybook, Priompt, Radon, Expo, MiniSim, CSS, Bun, Deno, Node.js...

September 25, 2024 · 8 min read

Newsletter Editor - Docusaurus maintainer

Hi everyone!

This week has been rather quiet in terms of React/RN announcements, but we still had great blog posts and various interesting Next.js and CSS news.

💡 Check this newsletter on Twitter - visual format 🎨

As always, thanks for supporting us on your favorite platform:

🦋 Bluesky
✖️ X / Twitter
👔 LinkedIn
👽 Reddit

Don't miss the next email!

It's exceptionally well curated, offers great insights and is well worth subscribing to!

Addy OsmaniHead of Chrome DX - Google

💸 Sponsor

AG Grid: The Best React Data Grid In The World.

AG Grid is a fast, free and fully customisable React Data Grid. Used by 90% of the Fortune 500, AG Grid is 100% open source with over 4 million npm downloads per month:

🆓 Free: Access 100s of features such as Sorting, Filtering, Pagination, Cell Editing and more, all for free - forever.
🚀 Fast: Display millions of cells out of the box, without compromising on performance.
🎨 Customisable: Add your own components to cells, rows & columns and use 100+ CSS variables to style every element.
🏢 Enterprise Features: Purchase a licence for lifetime access to advanced features including Pivoting, Grouping, Master / Detail and Integrated Charts (powered by our React Charting Library, AG Charts). Try it for free - no trial license required.

Learn More: ag-grid.com

⚛️ React

How I Built My Blog

Josh Comeau shares his experience migrating an advanced blog (100k LOC) from the Next.js Pages Router to the App Router, with mitigated feedback (lower Lighthouse score, slower dev server…). It’s an interesting React read overall, presently presented, interactive, and not limited to Next.js users. Includes many details involving various dependencies: MDX, Shiki, Linaria, Framer-Motion…

Component Composition is great btw

Dominik explains how React redefined the concept of “Separation of Concerns” and why you should favor composition and early returns over rendering multiple states conditionally. I share the same experience: the component is more likely to remain maintainable over time this way.

💸 React Component Analytics — Omlet Scans Your Codebase to Measure Component Usage to Increase Code Quality and Design Systems Adoption
👀 Next.js PR - @next/codemod upgrade CLI: Next.js 15 will have a CLI to automatically upgrade your dependencies to the latest stable, RC, or canary, with the ability to run the appropriate breaking change codemods.
👀 Next.js PR - Update Dynamic APIs to be async: APIs like cookies(), headers(), params are going async in Next.js 15. The PR is still WIP but codemods have already been merged. The breaking change is not so well-received by the community but opens the way to upcoming innovations for the Next.js team.
🔐 Next.js Cache Poisoning vulnerability: Only affects Page Router non-dynamic routes, fixed in 13.5.7 and 14.2.9
🧑‍🎓 Vim for React Developers: Free pragmatic mini-course from Lee Robinson.
🧑‍🎓 EpicReact v2 - React 19 update: Kent C. Dodds released a new version of his flagship React course (paid, currently 40% off).
🗓️ React Summit US - 🇺🇸 New-York - 19 & 22 December - Free remote tickets are available now, click here ! 10% discount with code TWIR.
🗓️ React Advanced London - 🇬🇧 London - 25 & 28 October - Hurry and grab your ticket to the conference as prices are about to go up ! And fon’t forget your discount with code “TWIR”.
📜 How to control a React component with the URL: This cool interactive blog post greatly illustrates a common antipattern among React devs using search parameters. You should consider the URL as the source of truth, instead of trying to sync your state to the URL.
📜 Partial Prerendering for Everyone with Cloudflare Workers: Former React team member Sunil Pai shared a demo of implementing PPR from scratch outside of Next.js, using React prerender(), postpone() and resumeToPipeableStream(). These are very experimental APIs that may change, don’t do this at home and only use this for learning/curiosity.
📜 CSS content-visibility for React devs: I aggregated a few interesting tweets/links explaining why React devs should care about this new CSS property that can improve your app rendering performance. It’s now in all browsers and although not widely supported, can be a progressive enhancement. You could use it as a replacement or alongside a React virtualization library to improve performance and accessibility.
📜 HTMX Essay - You Can't Build Interactive Web Apps Except as Single Page Applications... And Other Myths: An interesting read debunking myths and explaining what’s possible to do without an SPA framework like React. The gap between MPAs and SPAs is getting thinner thanks to modern technologies: Service Workers, View Transitions, Speculation Rules…
📜 How to fetch data in React: Robin Wieruch refreshed his data fetching overview post listing modern 2024 practices using React Query, useEffect, use(), RSC, and tRPC.
📜 Efficient Refresh Token Implementation with React Query and Axios: Uses Axios interceptors to automatically add an Authorization header and React Query onError callback to refresh expired tokens and retry the query/mutation.
📜 How to reset the state of useActionState in React: Resetting the action state is surprisingly tricky.
📜 From Parcel to Vite: A short story of a 100K LOC migration: Logto migrated a React frontend to Vite and shared integration details on various React-related features: MDX, SVGR, React.lazy, Fast Refresh…
📜 Astro Content Layer - A Deep Dive
📦 Storybook 8.3: Includes a first-class Vitest integration that makes Component Testing x6 faster, and a better integration with Next.js projects.
📦 Priompt - JSX-based prompt design library: I missed that AI prompting library released last year by a Cursor dev.
📦 next-view-transitions 0.3.2 - useTransitionRouter API
📦 Legend-State 3.0 beta - Signal-based state library - Improves on computed observables, persistence, sync
📦 Vaultusaurus - Tools to integrate an Obsidian Vault with a Docusaurus site, including a graph view
🎥 Jack Herrington - I hacked ShadCN to Create Insane React Templates and Installers: The CLI can be hijacked by writing/generating your own JSON update files.
🎥 Theo - The React "head" Drama…: React 19 won’t deduplicate <title> tags for you and you still may want to use a lib like React Helmet.
🎥 ThePrimeTime - Remix's Concurrent Submissions Are Fundamentally Flawed
🎙️ Frontend First 196 - Tom Occhino on the future of React: A look back at the many years of innovation at Facebook that led to the creation of RSC and Partial Prerendering as a North Star. From BigPipe to GraphQL/Relay to RSC.
🎙️ PodRocket - TanStack and TanRouter with Tanner Linsley
🎙️ Syntax.fm 824 - Taylor Otwell's opinions on PHP, React, Laravel and Lamborghini Memes

Don't miss the next email!

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

Ready to automate your Data Extraction?

Apryse IDP simplifies data extraction from PDFs. Easily pull details from financial reports or patient records with high accuracy and minimal setup. Our AI extracts text, tables, and forms from various documents, reducing manual work and improving data quality.

Get Started Today.