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…

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.

📱 React-Native​

• 💸 Stay up-to-date with React Native & Expo News with notJust Newsletter

• 👀 React Native PR - Support for CSS display: contents: Define views that have zero impact on the layout but to which you can still attach event handlers. One possible usage is in GestureDetector from react-native-gesture-handler, which relies on direct native views to handle touch gestures without affecting layout, to fix issues like automatic collapsing of views in components.

• 📖 React Native Docs - New 0.76 DevTools

• 📜 React Native’s New Architecture, The Tricky Parts: View flattening, View recycling, libraries support.

• 📜 PostHog - How we built mobile replay (and why it took so long): Their React Native SDK 3.2 now has support for session replay (beta).

• 📜 Hacking Expo SQLite into React Native MacOS

• 📜 How to bring your React Native apps to life using sensors

• 📜 How Kraken fixed performance issues via incremental adoption of the React Native New Architecture

• 📦 react-native-mmkv 3.1 - GC-safe autotrim, readOnly mode

• 📦 react-native-whip-whep - WebRTC PeerConnection

• 📦 expo-in-app-updates - Native in-app updates for Android and iOS

• 📦 expo-import-cost - VSCode extension displaying dependency import cost

• 🎥 Catalin Miron - TikTok incoming messages animation

🔀 Other​

• 📜 The story of web framework Hono: "In contrast to the Next.js framework, which started from the client-side with React, Hono is trying to become a full-stack framework starting from the server-side"

• 📜 Does JavaScript require a compiler soon? - TC39 JSSugar proposal

• 📜 Why I’m skeptical of rewriting JavaScript tools in “faster” languages

• 📜 View Transitions Staggering

• 📜 Brisa Framework - Server Actions have been fixed

• 📦 Turborepo v2.2 - Experimental repository querying with GraphQL, cache safety warnings, automatic GitHub action comparisons

• 📦 is-my-node-vulnerable - Package that checks if your Node.js installation is vulnerable to known security vulnerabilities

• 📦 Svelte v5

🤭 Fun​

Shameless repost for Next.js 15 release 😄

See ya! 👋