📨 #188: React 19 RC0, Data Fetching, Framer Motion, Compiler, Astro, Zod, Remix, Docusaurus, React-Query,, Memory Leaks, Spline, Module Mocking, Slow Networks, MS Edge, RN Security Guide, RN 0.74.2, Reanimated 3.12, Turborepo 2, Biome 1.8...
Hey,
This is Benedikt this week, filling in for Sébastien who’s taking a newsletter break.
React 19 is nearing its final release, with the first RC published this week. Apart from this, there’s not a lot of release activity in the React and React Native communities. So this week, I decided to feature two great pieces of content as headlines in both sections. A seminal 10k-word-long article about Data Fetching Patterns in Single-Page Applications by Juntao Qiu, and a great video overview of all the different ways to build React Native apps with Expo by Simon Grimm.
I wanted to use this opportunity to let you know that both Sébastien and I put a lot of effort into finding the best content for the React and React Native sections, but I’m sure there is still great stuff that sometimes goes unnoticed. That’s why we’re always open to suggestions, so feel free to let us know when you put something out there!
💡 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
Don't miss the next email!
💸 Sponsor
Product for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. Learn what questions to ask users, how to build new features users love, and the path to product market fit.
Subscribe for free to get curated advice on building great products, lessons (and mistakes) from building PostHog, and deep dives into the strategies of top startups.
⚛️ React
📜 Data Fetching Patterns in Single-Page Applications
This is a long read (~10k words), but such a great article! The title doesn’t do its justice, because in passing, this covers so much more than just data fetching. Basic React concepts, Suspense, async state handling, code splitting, prefetching, and parallel data fetching to avoid waterfalls. There has been a lot of discussion on X about web app performance in the last few weeks (Rails vs. React, MS Edge decision, …) - this is a great article to freshen up the basics of this topic to build a great user experience!
- 💸 Meilisearch - Build search as you type for React
- 👀 React Router PR - defineRoute API
- 🐦 shadcn/ui is working on adding charts
- 🐦 Remix working inside a Cloudflare Durable Object 🤯
- 🐦 React 19.0.0-rc.0: Andrew Clark says “This is the exact build we'll release as 19.0, unless an issue is reported that requires a breaking change.”
- 🐦 Upcoming Spline (3D rendering) and NextJS RSC integration
- 📜 I tried React Compiler today, and guess what …: A super interesting and detailed article about React Compiler and real-world use cases. Seems like we’re not at the point yet where we can just ignore everything about memoization because the Compiler takes care of it, and apart from this conclusion the article is also a great reminder of how memoization works exactly.
- 📜 Do you still need Framer Motion?: The creator of the popular React animation library explains you might not need his library anymore thanks to 5 great new/upcoming CSS features.
- 📜 Sneaky React Memory Leaks II: Closures Vs. React Query: This follows up on last week's great article. This time it shows how React Query might be affected as well by memory leaks, and how to fix them. Using custom hooks looks like a good general solution to this problem.
- 📜 An even faster Microsoft Edge: Microsoft was using React for some elements of the UI in its Edge browser and is now abandoning this approach. See the video linked below for more context.
- 📜 Speeding up the JavaScript ecosystem - Server Side JSX: The JSX runtime of React can lead to many object allocations. Marvin (Preact/Deno) shows it's possible to precompile JSX to improve server rendering of JSX and reduce GC. Maybe React could use that as well?
- 📜 Type-safe module mocking in Storybook: Very elegant way to leverage subpath imports for module mocking.
- 📜 Multiple action handlers with Zod in Remix: If you target one action endpoint from multiple components, this article shows you how to combine the different Zod schemas via discriminated union.
- 📜 Embracing Slow Networks: Improving User Experience
- 📜 Cleaner components with useSuspenseQuery & Why useSuspenseQuery works
- 📜 Explore new hooks coming up in React 19
- 📦 React 19.0.0-rc.0: Andrew Clark said "This is the exact build we'll release as 19.0, unless an issue is reported that requires a breaking change."
- 📦 Docusaurus 3.4: A new way to centrally manage tags (great for consistency), an experimental hash router (great for offline browsing without a web server), and an option to use namespaces for local storage (useful if you’re deploying multiple instances of Docusaurus on the same domain).
- 🎙 This Month in React, May 2024 - Updates from React Conf
- 🎥 Jack Herrington - Beware of "auto" Mode in the NextJS App Router
- 🎥 Theo - Microsoft Regrets Using React (For Edge)
- 🎥 Stephanie Dietz - How to Use React's
useOptimisticHook - 🎥 UI Engineering - Why 95% of Modals should be Local (in React)
- 🎥 Aaron Francis - Laravel vs React
- 🎥 Theo - How React Query Won
Don't miss the next email!
💸 Sponsor
WorkOS: enterprise-grade auth in minutes
🔐 WorkOS supports a complete User Management solution along with SSO, SCIM, RBAC, & FGA.
🗂️ Unlike other auth providers that rely on user-centric models, WorkOS is designed for B2B SaaS with an org modeling approach.
🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.
✨ User Management is free up to 1 million MAUs and includes bot protection, impersonation, MFA, & more.
🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.
Future-proof your auth stack with WorkOS 🚀
📱 React-Native
🎥 Every Way to Build your React Native App with Expo
Many roads lead to Rome, and it seems there are almost as many ways to build an Expo app. This gives us developers a lot of power and freedom, but can also sometimes lead to confusion - not just for beginners! Thankfully, Simon made a great video comparing the different approaches via Expo Go, Expo Prebuild, Xcode, Android Studio, and EAS. This is also a great opportunity to congratulate Expo on reaching 30k stars on GitHub!
- 💸 React Native Mastery - The only course you need to Master React Native & Expo
- 🐦 The most powerful demo AI app, featuring RSC via Expo Router: We’ve talked about Evan Bacon’s RSC demo before. This is a great thread on X summing up the promise and including a nice comparison video on how great mobile UI can get especially in the context of LLM chat apps.
- 📜 React Native Security Guide: Oscar picks up a topic that doesn’t get talked about enough. This is a good intro, covering secrets (TLDR: Don’t store them on a device) and encryption of user data (including leveraging biometrics).
- 📜 Seamless Transitions: From Native to React Native: Some impulses for brownfield development: Because RN creates truly native apps, introducing RN to an existing app or migrating to RN can be made seamless for the end users.
- 📦 React Native 0.74.2: Patch release, bumping some dependencies (typescript-eslint, CLI) and fixing bugs.
- 📦 React Native Reanimated 3.12.0: Introduces a new hook useComposedEventHandler which simplifies merging of multiple event handlers.
- 🎙️ RNR 298 - Create Expo Stack, NativeWind Ul, & Plugin Pro with Dan Stepanov
- 🎥 Rocket Ship 42 - React Native is alive! App.js Recap with Áron Berezkin
- 🎥 Expo - How to start your first Expo project in 2 minutes
🔀 Other
- 🐦 Find memory issues using Chrome Dev Tools
- 👀 Vitest Browser Mode
- 📜 10 modern Node.js runtime features to start using in 2024
- 📜 Live types in a TypeScript monorepo - stop writing dead TypeScript
- 📜 How To Use Corepack
- 📜 Promises From The Ground Up
- 📜 Zero - Rethinking local-first, general-purpose sync engine for the web
- 📦 Turborepo 2.0 - New terminal UI, watch mode, all-new docs
- 📦 Biome 1.8 - CSS support, new reports, CLI improvements...
- 📦 Deno 1.44 - Private npm registries, improved Node.js compat, and performance boosts
🤭 Fun
See ya! 👋
