📨 #166: Server Components, Waku, React-Forget, React-Native, Expo, Million, Remotion, Next.js, Storybook, Remix, AuthKit, Expo Router, Reactotron, Unistyles, Skia, SEO, CSS, Oxlint...

Hi everyone!

This has been a quite exciting week in terms of news!

We had a few great React releases and articles. It's great to see React-Forget slowly being rolled out on Instagram. Remotion also started to demonstrate its full potential with the GitHub Unwrapped launch.

React-Native is on fire, with v0.73 stable, Expo SDK 50 and Expo Router v3 in beta and a few other great releases. What excites me most is Expo gradually unveiling its plan to support Universal React Server Components.

This week's issue is quite special for me: it's the very first time I'm not alone writing the content. Benedikt almost wrote the entire React-Native section. I haven't used React-Native in production since 2020 😅 so it's nice to have someone using all the cutting edge libs help me provide relevant insights.

Don't forget to fill in the State of JavaScript and State of React-Native surveys. And if you could mention me at the end that's cool! Theo T3 shows you how 😄

💡 Check this newsletter on Twitter - visual format 🎨

As always, thanks for supporting us on your favorite platform:

• 🦋 Bluesky
• ✖️ X / Twitter
• 👔 LinkedIn
• 👽 Reddit

Don't miss the next email!

People always ask how I keep up to date, it's This Week In React.

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

MightyMeld launches visual dev tool to accelerate React development

A new kind of dev tool for React just opened its beta. See your JSX and styles in action while running your build. Hop quickly to your favorite editor. Use drag’n’drop and generative AI to update your app. As you work, MightyMeld generates clean code ready to merge as part of your PR. Free to use.

⚛️ React

Waku - Minimal React Framework that enhances React Server Component usage

We already featured this one, but the v0.18 rewrite is out, and includes a little introduction blog post. Waku is a minimal React framework that allows us to explore the core RSC capabilities, free from the traditional SSG/SSR strategies. Technically it is a Vite-based bundler that outputs pure JS and supports deployment to edge runtimes. Now sponsored by Vercel.

• 💸 Developer Nation Survey - For each completed response, Developer Nation will donate to one of the charities of respondents’ choosing! Start now!
• 🍿 Remotion - GitHub Unwrapped 2023: this year Remotion partnered with GitHub to produce the GitHub Unwrapped video (here is mine). A great showcase for the type of videos that can be produced using React.
• 🐦 React hydration error diff demo: revival of interest for this much needed feature (new React PR).
• 🐦 Tanner Linsley about React concurrent model vs reactive model: on the difficulty to get the benefits of both models at once. Tanner finally migrated the upcoming TanStack Router to a reactive model (visual demo).
• 🐦 Next.js moving away from extending fetch(), adding new APIs like noStore()
• 📖 Next.js - Updated Server Actions docs - Includes how to use them outside forms, security recommendations, and best practices
• 📖 Next.js React Foundations updated with App Router and Server Components
• 📜 A Chain Reaction: Dan Abramov is back with great storytelling lesson through the implementation of a recursive function that renders JSX to platform elements.
• 📜 Next.js 14: Layouts vs Templates: templates are remounted on navigation and reset their state.
• 📜 Storybook for React Server Components: Storybook 8 is now in alpha. In includes experimental Next.js RSC support. In practice RSCs will run client-side and you have to mock networks and Node.js APIs.
• 📜 The anatomy of shadcn/ui: gives a great overview of the popular Radix + Tailwind l̶i̶b̶r̶a̶r̶y̶, and how it assembles various packages to provide a good DX.
• 📜 How to set up self-healing URLs in Next.js for better SEO: shows how to create Next.js urls that are both human-readable and include a stable id. You can change the article title/url without breaking old links.
• 📜 Remix - Submit a form without overwriting existing parameters: suggests to use a <ExistingSearchParams> to append existing params to the form.
• 📜 Polymorphism in React - 2 patterns you must know
• 📜 Lexical state updates
• 📦 React DevTools 5.0 - New React-Forget badge: new feature permits to see Meta's rollout of React-Forget in production on Instagram (ref).
• 📦 Million.js 3.0 - Overhauled version, faster drop-in replacement
• 📦 AuthKit - The world's best login box powered by WorkOS and Radix
• 📦 react-hook-form 7.49 - react-server bundle, reactive errors prop...
• 📦 Next-Admin 3.0 - App router support
• 📦 Epic Stack - Client Hints - Eliminate flashes of incorrect content

Don't miss the next email!

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

Open-source React Framework for building enterprise B2B apps

Refine streamlines the building of production-ready B2B apps like internal tools and dashboards.

It is designed to address the specific pain points of larger organizations, giving top priority to security and reducing repetitive tasks with its hooks and components.

Offers industry-standard solutions for critical project aspects like authentication, access control, routing, networking, and state management.

🌱 Visit complete CRM app template built with Refine.

📱 React-Native

• 📊 State of React-Native - Reminder to fill the survey!
• 🚧 RFC - Well-defined event loop processing model: proposal to bring the React Native event loop closer to the web specification.
• 🐦 POC of multi-window apps support in React Native
• 🐦 interpolate() in React Native Reanimated - visually understand extrapolation
• 📖 Expo introduces canary releases
• 📜 Expo EAS - Keep your cache close — It’s Faster!: Expo cuts pod installation time by caching popular pods directly on their build VMs.
• 📜 Integrate Firebase Analytics into Expo Router: unlike React-Navigation, Expo-Router is url-first, and you have to listen to pathname changes.
• 📜 Creating a macOS MenuBar app with React Native
• 📜 Epic Games vs Google - Trial Verdict, a Win for All Developers: might bring changes to the app stores rules regarding in-app-payment models and their 30% tax.
• 📦 React Native 0.73 with a new debugger intended to replace Flipper, stable Symlink support in Metro (important in monorepos) and a new Kotlin template for Android (+ Android 14 support).
• 📦 Expo SDK 50 beta: upgrades to React-Native 0.73, with a new Expo Dev Tools Plugin API, a complete rewrite of expo-sqlite, improved expo-camera, a new library to figure out compatibility between a JS bundle and a particular native build (@expo/fingerprint), expo-updates hooks API, EAS updates/rollouts and much more.
• 📦 Expo Router v3 beta: includes API routes, Bundle Splitting for web, and a ton of other new features. Universal React Server Components are coming to Expo!
• 📦 Reactotron 3.0: brings automatic tracking of all log messages, better Android device debugging, faster app launch time.
• 📦 React Native Skia - 3D transformations: William Candillon posted a 🐦 demo
• 📦 React-Native-Unistyles 2.0
• 📦 react-native-permissions 4.0 - iOS 17, Android 14 support
• 🎙️ Galaxies - Rocket Ship: recent React-Native focused podcast worth discovering

🔀 Other

• 📜 Baseline 2023 - All new cross-browser supported APIs - Displayed on on caniuse
• 📜 CSS Wrapped - 2023 was a huge year for CSS!
• 📜 WebKit Features in Safari 17.2 - exclusive accordions, CSS nesting, maths, animations...
• 📜 Does Interaction to Next Paint actually correlate to user behavior?
• 📜 The TypeScript 5.3 Feature They Didn't Tell You About - as const satisfies
• 📜 Ternaries could be beautiful - A new proposal for Prettier formatting
• 📜 Improving Node.js loader performance
• 📦 Seroval 1.0 - Stringify JS values
• 📦 Oxlint - General Availability

🤭 Fun

See ya! 👋