This Week In React #175: RSC, Vinxi, Server Actions, Next.js, Remix, WakuLand, Flash Calendar, Zeego, RN Reusables...

Hi everyone!

This week has been rather quiet in terms of releases, but we have many great articles to read!

Sorry for last week, the email was so long that despite removing links, it got truncated by Gmail 😅.

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

💸 Sponsor

CMS with Inline Visual editing for Next.js with App routing

Set up a project in just 1 minute with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework. Try the new Next.js starter with Server Components!

Content editors can easily use content blocks to compose pages visually, just like using a word processor, without compromising the design.

React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Real-time Collaboration, Scheduled Publishing, Multilanguage, integration with external APIs, Approval Workflow, Multiple environments, Change history and more.

Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 9,000 users worldwide.

Get started today!

⚛️ React

Instant Search Params with React Server Components

An awesome interactive article showing that it’s surprisingly hard to persist UI state to the query string in a React Server Component world and yet give immediate user feedback. Updating the URL triggers a server round-trip. The new useOptimistic hook solves this problem nicely. This also shows a nice use-case for CSS :has(), to avoid hoisting the startTransition pending state.

Building a React Metaframework with Vinxi

TIL about Vinxi, a toolbox built on top of Vite and Nitro enabling you to easily create your own meta-framework, with support, SSR, routing conventions, server functions and everything. Solid Start uses it behind the hood, but it’s a framework-agnostic SDK. Apparently, TanStack Start will use it too! This article explains how to use it with React.

• 💸 Explore how to build a feature-rich PDF Viewer in React with Apryse's rendering engine. Customize UI, scroll, zoom, and search with annotations.
• 📜 Avoiding Hydration Mismatches with useSyncExternalStore: Another great article from Dominik explaining how useSyncExternalStore and its 2 client/server snapshot callbacks can help prevent hydration mismatches. It can be a better alternative to useEffect for many use-cases, including rendering localized dates, or creating a client-only wrapper component.
• 📜 Exploring Next.js Forms with Server Actions: A very comprehensive step-by-step tutorial on using the new React/Next.js form primitives without any abstractions, and all the little mistakes you might make along the way.
• 📜 No Outer margin: Gives good reasons to not apply margins inside your component root, but instead let the parent component handle the layout. Margins are the first thing that come to mind, but there are also other CSS rules that break component encapsulation. I recovered a great deleted article for you on that matter: Layout-isolated components.
• 📜 Vjeux - 12 Years at Meta: If you are a new React developer, you may not have heard of Christopher Chedeau, but he’s one of the most impactful member of our community. A few things he created or significantly contributed to: React, React Native, Yoga, CSS-in-JS, Prettier, Excalidraw, Docusaurus, GraphQL…
• 📜 Learning Four Key Primitives In Solid: Don’t be mislead by the title, it’s a great article for React devs, comparing Solid vs React, Next.js and Remix on 4 interesting topics. TIL that Next.js RSC components would waterfall by default unless you use a preloading function.
• 📜 Handle both JSON and FormData in Remix: Jacob explains the tradeoffs of using form inputs vs creating a FormData or JSON payload manually on an event handler. Shows how to create an Remix abstraction using Zod and Conform that can conveniently accept both JSON and FormData paylods.
• 📜 Introducing Waku Land: A live deployment of every Waku examples.
• 📜 Where to host your Remix app in 2024: Updated on 25 Feb.
• 📜 HTMX vs React - A Complete Comparison: The article suggests to use React for rich web experiences, and use HTMX for pages with simpler interactivity.
• 📜 Next.js vs. Remix - A Developer's Dilemma
• 📜 Compiler Theory and Reactivity: Sathya works on React Forget and explains a compiler theory pass they use called Static Single Assignment form. I have to admit I’m a bit lost here 😅. His previous post on Alias analysis is easier to understand.
• 📜 How to Style Active Links in Next.js App Router
• 📜 Add Dynamic Sitemap to Next.js Website Using Pages or App Directory
• 📦 @react-three/uikit - Build performant 3D user interfaces using react-three/fiber and yoga: New Poimandres collective package preview with an impressive 🐦 demo
• 🎥 Ryan Toronto - Asset loading in React 19: Explains a quite unknown but exciting upcoming React feature that lets you load assets (here CSS) of the next page before completing the navigation transition.
• 🎥 Jack Herrington - React Hook Form & React 19 Form Actions, The Right Way
• 🎥 Fireship - They made React great again? (React Labs)
• 🎥 Fireship - This UI component library is mind-blowing (Aceternity Components)
• 🎙️ PodRocket -StyleX with Naman Goel

💸 Sponsor

The most comprehensive User Management Platform

Clerk streamlines React app authentication and user management, ensuring a quick setup for the modern web.

Experience the benefits of Clerk:

• 💅 Pre-built UI components for sign-in, sign-up, user profiles, and organizations. Customize with any CSS library and deploy on your domain
• 📦 SDKs for React, React Native, Next.js, Redwood, Remix, and other frameworks
• ⚡ Integrations with Firebase, Supabase, Convex, and other BaaS providers
• 🎁 User management, social login, magic links, MFA, and more out of the box

Dive into Clerk's quickstarts and tutorials to kickstart your project🚀

📱 React-Native

This section is now co-authored with Benedikt. Feel free to send us your comments by email or on Twitter!

This past week, we all enjoyed a brief respite from major headline React Native news (or did I miss something, in this case @me). Perhaps that's a welcome change, especially after the whirlwind of events like Expo 50, visionOS, the State of React Native, react-strict-dom, and more. However, this doesn't mean the React Native world has come to a halt. There’s been a lot of little announcements that give us a glimpse in the near future of React Native. The first release candidates for RN 0.74 were released. They contain a lot of improvements as well as some deprecations and breaking changes, but from the first glance nothing major that makes me worried about upgrading effort. Most notably, bridgeless mode becomes the new default with 0.74 (but only when New Arch is enabled). Bridgeless mode is the third pillar of the New Arch, after the already introduced TurboModules and new renderer (Fabric). Speaking of New Arch and defaults, a PR was merged that’ll make the New Arch the default beginning with RN 0.75 (it will still be possible to opt out though). Also, the RFC with the React Native Frameworks definition has been merged, laying out the responsibilities of RN vs frameworks on top of RN.

• 💸 React Universe Conf - join the conference at the lowest price now. There’s a limited batch of blind bird tickets available.
• 📜 How to integrate Native iOS code into a React Native project for iOS: Good introduction to bridging headers, @objc, and other fun stuff you need to know before diving into native code for iOS.
• 📜 react-strict-dom, why it's so great? If you want to know how <html.div> ends up as a native component in iOS, read this short summary of react-strict-dom.
• 📜 Expo Push Notifications Migrating to FCM V1: In June, FCM Legacy will join the long list of discontinued Google services, so it’s really time to migrate!
• 📜 @expo/fingerprint 🤝 GitHub Actions: In my opinion, Fingerprint is the most underhyped feature of Expo SDK 50. This post shows the killer use case: Kicking off a new native build as soon as Fingerprint determines it is required.
• 📜 Universal Apps: A Single, Unified Codebase Powering Mobile, Desktop, Web, and TV? Kind of the holy grail, and a topic I’m really excited about in 2024: One app, all the platforms. This article has some interesting thoughts about it.
• 📜 How to build an offline-first app using Expo & Legend State
• 📦 React Native 0.74-rc.1
• 📦 React Native v0.73.5
• 📦 react-native-visionos 0.73.6: Multi window support and new docs!
• 📦 Zeego 1.8 + 1.9 - Universal cross-platform menus - Horizontal groups and group labels
• 📦 react-native-image-editor 4.0 - base64 output, format prop, returns metadata
• 📦 React Native Flash Calendar - Fast and flexible calendar using Shopify FlashList
• 📦 react-native-reusables: I love shadcn/ui (UI library) for web, this brings it to RN!
• 🎥 Fireship - Expo in 100 Seconds
• 🎥 Theo Brown - React's Next Big Change? (react strict dom)
• 🎥 Expo - How to build TV apps with Expo SDK 50
• 🎙️ Rocket Ship 031 - React Native Gestures & Microinteractions with Kacper Kapuściak
• 🎙️ RNR 289 - Real Life React Native: David Leuliette Talks Retail Shake Scanner

🔀 Other

• 📣 Apple killing PWAs in EU - Immediate Action Needed
• 👀 TypeScript PR - Infer type predicates from function bodies using control flow analysis
• 👀 Rsbuild v1.0 Release Plan - Rspack v1 and Rsbuild v1 before July 2024
• 📜 CSS :has() Interactive Guide
• 📜 JSDoc as an alternative TypeScript syntax
• 📜 Node.js 2023 Year in An Article
• 📦 Babel 7.24 - Decorator updates and JSON modules imports
• 📦 TypeScript 5.4 RC - NoInfet utility type, type narrowing improvements in closureq
• 📦 LightningCSS 1.42 - light-dark(), system colors, custom property deduplication
• 📦 Chrome 122 - Perf DevTools, Storage Buckets, Async Clipboard
• 📦 PGlite - Postgres in WASM
• 📦 snap - snapshot testing companion for node:test

🤭 Fun

See ya! 👋