π¨ #202: Next.js, Composition, search params, PPR, useActionState, content-visibility, Astro, MDX, Storybook, Priompt, Radon, Expo, MiniSim, CSS, Bun, Deno, Node.js...
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 π¨
To support me:
- π Recommend the newsletter to your friends: it really helps!
- πΈ Sponsor the newsletter
- 𧡠Retweet the latest Twitter thread
Ne manque pas le prochain email !
πΈ 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β
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()
andresumeToPipeableStream()
. 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 QueryonError
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
Ne manque pas le prochain email !
πΈ 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.
π± React-Nativeβ
- πΈ Sonny Sangha - Build a Zoom 2.0 Clone with React Native
- π¦ React-Native-WebGPU on macOS demo
- π¦ Tzvetan Mikov about usefulness of adding Wasm support to Hermes
- π React Native Benchmarking: This interesting site allows us to compare the performance of React Native depending on version, architecture, and platform (iOS/Android)
- ποΈ RNLConf - π¬π§ London - 14 & 15 November - Get a 10% discount with code "TWIRβ, grab a ticket now !
- π React Native IDE is now Radon IDE: TL;DR itβs just a name change for practical reasons. Still fun to read why they choose that name (hint: atomic, Polonium)
- π How to listen to uncaught/unhandled errors in React Native: with
globalThis.ErrorUtils.setGlobalHandler()
- π How to incrementally adopt Expo
- π¦ MiniSim 0.9 - Physical devices support
- π¦ React Native 0.76.0-rc.2
- π₯ Simon Grimm - Why React Native 3D doesn't suck (anymore)
- ποΈ React Universe On Air - Coffee Talk 21 - How to Get Started With 3D in React
- ποΈ Rocket Ship 50 - New Arch, JSI, Native Modules & Rust with Oscar Franco
- ποΈ RNR 308 - Coding and ADHD with Chris Ferdinandi
π Otherβ
- π CSS Values and Units Level 5 - First Public Working Draft
- π CSS Grid Level 3 / Masonry Layout - First Public Working Draft
- π¦ Web Preference API upstreamed to CSS Media Queries Draft Spec
- π 9 Principles for Doing Node.js Right in Enterprise Environments
- π Animate to height: auto; (and other intrinsic sizing keywords) in CSS
- π Why Typed Linting Needs TypeScript Today
- π¦ Bun 1.1.28 - Compile and run C in JavaScript, fix React 19 SSR
- π¦ ts-blank-space - fast type-stripping compiler that converts TypeScript to JavaScript
- π¦ Deno 2.0 Release Candidate
- π¦ Module Federation Vite 1.0
π€ Funβ
See ya! π
Ne manque pas le prochain email !