This Week In React 206

Next.js, Compiler, DevTools, State Of React, nuqs, Chakra UI, Remix, shadcn/ui, Turbopack, Microfrontends, Fumadocs, NewArch, react-native-mmkv, whip-whep, Svelte, Hono…

Oct 25, 2024

Hi everyone!

Cyril and Matthieu from Theodo Apps (formerly BAM) here 👋, standing in for Seb to bring you the latest news from the React and React Native worlds.

Big updates this week for the React world! Next.js 15 is officially out with key changes around caching and performance, plus the React Compiler has hit beta — lots to look forward to there.

We’ve got a bunch of great articles too, from optimizing state with React Cache to a deep dive into React Native's new architecture.

Speaking of React Native, v0.76 is coming very soon! A major milestone as it's the first version to activate the New Architecture by default, the culmination of years of work that deserves to be celebrated! 🥳️

The State of React 2024 survey is now open and waiting your answers.

Let’s dive in!

💡 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

💸 Sponsor

Handsontable: Advanced data grid for your React app

Handsontable is a feature-rich data grid designed for React developers who need a powerful, customizable, and accessible solution to manage complex data.

A unique spreadsheet-like interface with sorting, filtering, and CRUD operations
Advanced operations like conditional formatting and 400 built-in formulas, similar to Excel
Customizable editors and renderers, allowing dropdowns, menus or custom components within grid cells to fit specific use cases
Optimized performance for smooth and responsive interactions
Accessibility with WCAG 2.1 compliance for better support for users with disabilities

Handsontable adapts to various use cases, from enterprise applications to simple websites, offering performance and flexibility trusted by companies worldwide.

Get started today!

⚛️ React

Next.js 15

Just in time for Next.js conf, Next.js 15 is officially released. There are no major changes since RC2, just a few stability fixes. In this v15:

The caching behavior is flipped with most things (eg fetch requests) not cached by default anymore.
App router uses React 19 RC, pages router stays on React 18
Using turbopack dev is now recommended (webpack is still supported)
There are breaking changes such as existing APIs going async, and @next/codemod upgrade facilitates the upgrade

There’s of course a slew of other DX, security and performance improvements.

💸 Omlet – Scan your repos and measure how and where components are used
📊 State of React 2024 - Survey is open: Please don't forget to fill this year's survey. Seb has contributed to its design. We would appreciate if you answer that you read This Week In React at the end 😇.
📜 Server Side State management in NextJS: a deep dive into React Cache: using cache, unstable_cache, and patched fetch, explaining how these tools can optimize state handling, reduce prop drilling, and simplify server-side code.
📜 Framer Sites Now Become Interactive 50% Faster: Faster hydration with granular Suspense.
📜 Remix Todo App: A detailed guide in 6 parts.
📜 How Vercel adopted microfrontends
📜 Perfectly Fitting Text to Container in React
📜 Creating a Keyboard Shortcut Hook in React
📦 React Compiler beta: It’s already in use in tens of thousands of components at Meta, they now want community feedback. This release adds official support for React 17 and 18. You can already add the ESLint plugin to prepare your codebase. Library authors are advised to pre-compile their libs.
📦 React DevTools 6.0.1 - React Server Components support: The React team fixed a few v6 bugs and then finally published this new version to the stores so that we can all easily install it.
📦 Turbopack Dev stable: A slow dev server has been a usual pain point when working with Next.js. Vercel has been working on a rust-based webpack replacement for 2 years, and it’s finally safe to use on all projects that don’t rely on unusual webpack plugins.
📦 nuqs 2.0 - Type-safe search params state manager: Initially a Next.js query-string library, it is now opening up to other React frameworks with support for Remix, React Router... and also the brand new Next.js 15.
📦 Chakra UI 3.0: A full rewrite, with more components, semantic tokens and better performance.
📦 react-render-stream-testing-library: To make detailed, render-per-render assertions when testing components and hooks. In many cases it amounts to testing implementation details but it will be very useful for library authors or in perf-sensitive scenarios.
📦 shadcn/ui - Sidebar component
📦 next-intl 3.22 - Incrementally moving forward
📦 Fumadocs 14 - Docs framework that works on Next.js 15 App Router
🎥 Theo - Next.js is hiding something...: Early sneak peek of upcoming features not even mentioned in the Next.js 15 release post, including the 'use cache' directive, cacheTag() and cacheLife APIs.
🎥 Tanner Linsley - An Early Glimpse of TanStack Start
🎥 Jack Herrington - What I Discovered When I Compared React and NextJS for Astro 5's Server Islands
🔗 NextMaster - Highly performant replica of McMaster-Carr using Next.js: McMaster-Carr (US supply company) website has been trending on Twitter as being very fast. This repo is a modern Next.js 15 port, even faster.

💸 Sponsor

Workshop: Implementing Clean Architecture in Next.js

Lazar Nikolov and Sarah Guthals are hosting a free workshop on Implementing Clean Architecture in Next.js. It will dive deep into what clean architecture actually is, what problems it solves, and how to implement it in a Next.js application with Sentry.