📨 #199: shadcn, Next.js, TanStack, Remix, MDX, Astro, Storybook, @svg-use, MSW, RAG, RN-WebGPU, React-Three-Fiber, Re.Pack, Super Apps, RN-macOS, EAS, Node.jx, Stage 2.7, AggregateError, Style-Observer...

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.

This week, shadcn has released a new CLI, and we've noticed other nice things that are currently cooking, like support for the use() hook in React Query.

The React Universe Conf starts tomorrow, we're expecting React Native announcements that we will discuss next week!

💡 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!

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

[Live Workshop] Debugging Next.js w/ Examples

Join us on September 15th for a hands-on workshop with Dan Mindru, co-host of the Morning Maker show, where he'll share how he shaved 22.3 seconds off an API call using Sentry. You'll pick up practical tips on how to debug errors and performance issues using Sentry’s Tracing and Session Replay—RSVP to save your spot.

⚛️ React

Shadcn introduces a new CLI

It’s significantly more powerful and flexible:

• shadcn add can now install components, themes, hooks, utils, dependencies…
• It supports for multiple React frameworks (Next.js, Remix, Vite, Laravel)
• It can update your tailwind config instead of overriding it
• Components can be imported directly from urls

More details in 🐦 this twitter thread.

• 💸 React Component Analytics — Omlet Scans Your Codebase to Measure Component Usage to Increase Code Quality and Design Systems Adoption
• 👀 TanStack Query PR - Add support for React.use(): React Query plans to return a promise that you can use(), making it easier to integrate with Suspense in a performant way. It’s more convenient than usePrefetchQuery and more parallel than useSuspenseQuery.
• 👀 Remix Route Convention Evolution: The new routes.ts we evoked last week will allow you to skip filesystem-based routing, or simplify using the convention of your choice.
• 🐦 Next.js 15 may be released soon without waiting for React 19 to be stable, and without requiring React 19 for the pages router. It will include major Turbopack improvements.
• 🐦 Render on Fetch vs Fetch on Render: Theo shares a graphical visualization of different React rendering patterns. An associated video is available to deep dive.
• 📜 Introducing @svg-use: Greatly explains how SVG-in-JS (notably SVGR in React) is convenient for theming and distribution, but is not ideal in terms of performance and duplication. The <use href> pattern is a good alternative but requires manual plumbing, so the author created a toolchain to automate it.
• 📜 Build-time Components: Greatly illustrated article explains the benefits of React Server Components for MDX users looking to make their content interactive. Client components and build-time Remark/Rehype plugins have limitations, and RSCs offer the best of both.
• 📜 Using Server Functions and TanStack Query: TanStack Start is almost ready to use, and has a compelling data fetching approach, with “server fns” integrated with react-query and routing (for prefetching), fully typesafe of course.
• 📜 What the heck is atomic state management?: A refresher on how to use Jotai “the right way” and the benefits it brings.
• 📜 Component testing in Storybook: Storybook promotes component testing as a complement to end-to-end testing, offering speed and reliability with browser fidelity for better UI test coverage.
• 📜 The Complete Developer Guide to React 19: A 2-part series on what’s coming in React 19, including useTransition, useActionState, useOptimistic, use, Server Components, Server Actions, ref as a prop, Diffs for Hydration Errors, Improved error reporting, Context as a provider, useDeferredValue initial value & more.
• 📜 Easy RAG for TypeScript and React Apps: Build a RAG system in TypeScript and React by processing text documents, generating embeddings, and utilizing a vector database for semantic search to answer user queries.
• 📜 Blending Markdown and React components in NextJS
• 📜 Higher Order Components (HOCs) in React: What They Are and How To Use Them
• 📜 Comprehensive React Testing: Handling API Calls with Mock Service Worker
• 📜 Using the inert attribute in React
• 📜 Authoring CSS in modern JavaScript apps
• 📦 Midday V1 - Starter kit based on Next.js, Turborepo, Shadcn & more
• 📦 Bulletproof-React - scalable React architecture repo - now updated with Next.js examples
• 📦 Astro 4.15 - Astro Actions, Use rewrites for i18n fallbacks, libSQL remotes in @astrojs/db, Timeout option in client:idle, Swap helpers for ViewTransitions
• 🎥 Lee Robinson - Build anything with v0 (3D games, interactive apps)
• 🎥 Jack Herrington - Using AI Structured Output with NextJS & React

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

Run GitHub Actions up to 2x faster at half the cost

Blacksmith runs your GitHub Actions substantially faster by running them on modern gaming CPUs. Integrating Blacksmith is a one-line code change. 100+ companies like Ashby, GitBook, Superblocks, and Slope use Blacksmith to help developers merge code faster.

📱 React-Native

At the time we’re writing this, the React Native Core Contributor Summit is happening in Wrocław.

It will be followed by the React Universe conf on Thursday and Friday. A lot of exciting talks are planned, and you can follow along on Youtube. Some highlights: A new debugger, The New Architecture, Expo DOM Components, Static Hermes.

So we will probably have more React Native news for you next week!

• 💸 React Native Mastery - The only course you need to Master React Native & Expo
• 👀 Re.Pack is adding support for Rspack: The alternative, webpack-compatible bundler for React Native will probably see major speed gains with this change.
• 🐦 React Native IDE will integrate Storybook into IDE's preview mode
• 🐦 React Three Fiber running on react-native-webgpu: We’ve seen examples of Three.js running with react-native-webgpu. Aaron Grider from SpaceX is currently working on React Three Fiber support, bringing its declarative API to React Native land.
• 📜 Create and run fast end-to-end tests using Moropo and Expo: with Maestro
• 📜 How to Develop a Super App with React Native?: Use of a custom native module for communication between mini-apps differs from the Repack approach, which leverages Webpack to generate modular and independent JavaScript bundles for each mini-app.
• 📖 Expo documentation update: Local First Architecture, DOM Components, Native project upgrade helper for SDK 51.
• 📖 Expo Application Services (EAS) Pricing: EAS Update and Build concurrencies get cheaper as of September 1st.
• 📦 react-native-macos 0.75
• 🎥 Minute React Native - React Native WebGPU Explained in under 2 Minutes
• 🎥 Dan’s Lab - How to build a QR Code Scanner with Expo
• 🎥 Simon Grimm - Expo DOM Components are Wild
• 🎥 Chain React 2024 - YouTube playlist available

🔀 Other

• 📜 Inside ECMAScript: JavaScript Standard Gets an Extra Stage
• 📜 The web's clipboard, and how it stores data of different types
• 📜 JavaScript Generators Explained, But On A Senior-Level
• 📜 AggregateError in JavaScript
• 📦 ThreeJS 168
• 📦 Style-observer - A MutationObserver for CSS
• 📦 Effect 3.7 - With HttpApi, a declarative way to define api endpoints
• 📦 Node 22.8 - module.enableCompileCache(), vm.createContext() with freezable globalThis, coverage thresholds
• 📦 Sherif 1.0 - Opinionated, zero-config linter for JavaScript monorepos
• 📦 Safari Technology Preview 202 - Lots of CSS features
• 📦 i-html - inline-html import element

🤭 Fun

See ya! 👋