This Week In React #256 : Next.js, directives, TanStack | Navigation, EAS, Expo Modules | ArkType, Biome, Svelte, Hono

#react #reactnative

Hi everyone! Filip and Krzysztof from Software Mansion here! 👋

This edition is special for at least four reasons:

It's a very rounded anniversary edition - issue 256 - let's hope our counter can hold more than 8 bits 🤞
This is the first newsletter issue for Filip, who is improving React Native DX by developing Radon IDE.
It was a great week, with a lot of excellent content emerging from the Next.js conf in the React world.
React Native isn't far behind, as this week saw some cool stuff released, including updates for React Navigation, Uniwind, React Native Screens, and more.

That's more than enough reasons to jump straight into the content - enjoy the reading!

💡 Subscribe to the official newsletter to receive an email every week!

💸 Sponsor

AI Localization That Actually Understands React

Stop wasting time fighting your i18n keys. 😫 Crowdin is the perfect, automated l10n solution built for React developers – whether you're an individual or a startup.

The days of manually providing context are over:

Context Harvester: Our open-source CLI uses Agentic AI to scan your code and automatically attach usage context to every string. It knows if "Close" is a button, a component name, or a modal title. No more guesswork for the AI. 🤯
Smarter AI Translations: With that precise context, our pre-translation engine delivers production-ready strings instantly.
Integrations: Connect Crowdin directly to your repo. Localization becomes a simple, continuous part of your CI/CD pipeline.

Launch a multilingual app without breaking a sweat. Focus on features, not fighting files🚀

⚛️ React

🎥 Next.js Conf 25 - Opening Keynote

Next.js conf was the main event of last week, with a keynote highlighting newly released Next.js features, in particular:

Turbopack as the new default bundler, including beta support for file-system caching
The Adapters API to interface Next.js with hosting platforms, built in collaboration with various partners and Vercel competitors
Cache Components: new fancy name of Partial Pre-Rendering, with more explicit APIs

Let's take a step back to explore this new flagship Cache Components feature. It is a new opt-in flag to turn on that lets you implement the Partial Pre-Rendering pattern. The goal is to keep your app/page shells static so that navigation feels instant. It nudges you to move dynamic (searchParams(), headers()...) and async calls (fetch(), DB access) within a <Suspense> boundary so that the page shell remains static and fast, while the dynamic/slow parts can stream into it. And when you really want to include an async component in the static shell, a new ’use cache’ directive to turn it into a Cache Component that lets Next.js pre-render it statically. Turning this feature on also enables a back/forward navigation cache powered by the new <Activity> component. This new mode offers a more composable, explicit and granular caching model, compared to the previous model based on route-level controls and aggressive implicit caching by default.

This event also led to various discussions in the community, following the introduction of parametrized directives (’use cache: private’ / ’use cache: remote’), and the introduction of a Vercel ’use workflow’ directive the next day. Many developers argue it’s dangerous to use strings and would prefer function decorators or explicit typesafe API calls. We still need to think about it before making up our minds and taking a side, but here are some related links worth checking out:

🐦 The ’use no memo’ drama: The JS community is apparently offended by a 2-year-old React Compiler escape hatch directive that is actually useful.
📜 Directives and the Platform Boundary: Tanner Linsley’s cautionary piece about the dangers of introducing directives without community-wide standardization.
🎥 Theo - This is good, actually (directives)