This Week In React #202 : Next.js, Composition, search params, PPR, useActionState, content-visibility, Astro, MDX, Storybook, Priompt, Radon, Expo...

Search for a command to run...

No comments yet. Be the first to comment.
Hi everyone! Krzysztof and Tomasz from Software Mansion here ๐ It's been a fairly calm week for the React ecosystem, but not for the React Native world. Meta has made an exciting announcement about the release of React Native 0.80, where they've dec...

Hi everyone! This week is relatively calm in the React ecosystem, but we still have various interesting blog posts and releases. Maybe we'll soon get some exciting news from React Summit that's about on Friday! On the React Native side, all the devs ...

Hi everyone! I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week ๐. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovat...

Hi everyone! Cyril and Matthieu from Theodo Apps here ๐. This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting. In the React Native world, there were a few minor but interesting relea...

Hi everyone! This week, we're delighted to finally have a preview of React Server Components support in React Router. I've also found some very interesting PRs on the React repo, and give you a glimpse of what could be coming soon! The React Native e...

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.
๐ก Subscribe to the official newsletter to receive an email every week!
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
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.
๐ 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โฆ
๐ฆ 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.
๐ฆ 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
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.
๐ธ Sonny Sangha - Build a Zoom 2.0 Clone with React Native
๐ฆ 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()
๐ฅ 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
๐ 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
๐ฆ 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
See ya! ๐