This Week In React #168: TanStack, RSC, preload, shadcn-ui, Catalyst, rsc-cache, WishList, VisionOS, Hermes, release-profiler...

Hi everyone!

Merry Christmas and Happy New Year! 🥂

The newsletter is back for another year. Despite the holiday season we still had some interesting news, notably regarding the TanStack. Developers probably took this opportunity to work on their own open-source side projects 😄!

Don't forget to answer the State of React Native 2023 survey, it's your last chance!

Once again, this issue now has 2 authors Benedikt is helping me.

I hope to find time to write a full 2023 retrospective of the newsletter. Until then, if you are curious, I write monthly reports on my Indie Hackers page for 2 years now.

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

💸 Sponsor

A newsletter helping flex your product muscle

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

TanStack Router 1.0

The highly anticipated TanStack Router launched as stable 1.0 with a nice 🐦 trailer, just in time for Christmas. This new router pushes the boundary of what is possible in terms of type-safety, url state management (search params) and caching, among other things.

The SSR guide reference a @tanstack/react-start package, probably a teaser for an upcoming 🐦 TanStack Start framework

Other recent TanStack packages that you might have missed:

• 📦 TanStack Config - Tool for publishing and maintaining high-quality JavaScript packages
  


• 📦 TanStack Store - Framework agnostic, type-safe store with reactive framework adapters
  

• 💸 From Dreamweaver to JSX: The Evolution of Visual Dev Tools for the Web
  


• 👀 React Docs PR - React-DOM static resource loading functions
  


• 👀 Next.js PR - Next.js is exploring moving to Lightning CSS
  


• 👀 Remix PR - SPA Mode
  


• 🐦 useMemo to become a better version of context selectors: It turns out selectors do not compose well, and the plan is to improve useMemo to kind of act like a selector!


• 🐦 SkipRenderOnClient - interesting trick to optimize hydration performance
  


• 🐦 Million.js joins Y Combinator
  


• 📜 React Server Components: the Good, the Bad, and the Ugly: Critical, but well-informed take on the status quo of using RSC.


• 📜 Thoughts on Remix: Balanced view on Remix - where it came from, their philosophy and how it compares to Next.js.


• 📜 More Than You Need to Know About ReactDOM.­flushSync: Detailed and interactive look at React-DOM flushSync() method, a rarely used but sometimes crucial method enabling you to opt-out of React state update batching.


• 📜 Remix + MDX - How this site is built: Vite features and plugins work together to power Remix + MDX.


• 📜 The View Transition API: A New Way to Animate Page Transitions: Also shows how to use it in React Router and Remix.


• 📜 What should we ship?: Detailed blog post about the vercel.com relaunch.


• 📜 Future of Storybook in 2024: The themes for Storybook in 2024 will be application development (as opposed to isolated component development), enhanced support for non-React frameworks, and improved story generation (using AI).


• 📜 How to make Storybook 2-4x faster - v7.6 comes with perf improvement options, enabled by default in v8.0
  


• 📜 Next.js 14 Parallel Routes: Simultaneously render multiple pages within the same layout (useful for dashboards).


• 📜 Next.js 14 Intercepting Routes
  


• 📜 Understanding React’s useFormState and useFormStatus Hooks
  


• 📜 Diving into Server Actions in Next.js 14
  


• 📦 rsc-cache - cache expensive RSCs, with Next.js integration
  


• 📦 Catalyst - Modern UI kit for React: New official React UI kit from the Tailwind team. It's a paid product requiring a Tailwind UI license. There's also a free Headless UI update, now in v2.0 alpha.


• 📦 Tokenami - Atomic CSS in the style attribute: Modern type-safe styling solution with theming, responsive variant support. Supports React and Solid.


• 📦 shadcn-ui 0.5 - new components (Carousel, Drawer, Pagination, Resizable, Sonner) and CLI improvements
  


• 📦 StyleX 0.4.1 - ESLint and Rollup plugin improvements, autocomplete, performance, reduced runtime size, support for CSS layers...
  


• 📦 Storybook 8.0.0 alpha 4 - no react peer dependency anymore
  


• 📦 TWC - Create reusable Tailwind CSS + React components
  


• 📦 MDXTS - Build interactive, type-safe content and documentation in MDX, TypeScript, and React
  


• 📦 Plate - Rich-text editor framework for React, customizable, including a plugin system
  


• 📦 next-route-handler-pipe - Function pipelines for Next.js route handlers
  

💸 Sponsor

ShipFast - Ship your startup in days, not weeks

The Next.js boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.

• App Router or Page Router


• JavaScript or TypeScript


• Money-back guarantee, refundable within 7 days

📱 React-Native

• 💸 Galaxies.dev - Master React Native & Save 25% on PRO with code GALAXIES24
  


• 📊 State of React Native 2023 survey - Last-call, closing on Friday 5
  


• 👀 RFC: Moving away from Obj-C on Apple platforms: Moving to Swift will only start after the move to the New Architecture has been completed.


• 👀 hermes-jsi-demos - Use Hermes with JSI on desktop without any frameworks
  


• 👀 jsi-rs - Write ultra fast React Native modules in Rust
  


• 🐦 Expo SDK 50 optimizing bundle size with platform shaking
  


• 🐦 Chain React 2024 announced for July 17-19
  


• 🐦 Top React Native Tweets of 2023
  


• 📜 WishList Release scrapped: After a year of development, Margelo decided not to release their library aimed at solving performance problems for lists in React Native.


• 📜 Bringing React Native libraries to Apple Vision Pro: the new out-of-tree VisionOS platform will support JS libs automatically. Most native libs will simply need to add a visionos platform to the podspec.


• 📜 How to Properly Read Xcode Error
  


• 📜 JavaScript Achieves Breakthrough Performance with Static Hermes
  


• 📦 react-native-release-profiler - passively profile JS/Hermes in production and release builds
  


• 📦 expo-video-metadata: Retrieve information such as duration, dimensions, orientation, and codec for local and remote video files.


• 📦 react-native-macos 0.73.1
  


• 📦 react-native-windows 0.73.2
  


• 📦 Bootstrap a universal File-based Expo app with Tailwind styles: New create-expo-app template using Expo Router v3 and NativeWind v4.


• 🎙 React Native Show 32 - React Native for Apple Vision Pro and visionOS
  


• 🎙️ RNR 284 - React Native Rewind - 2023 in Review
  


• 🎙️ Rocket Ship 23 - Why you should use React Native in 2024
  

🔀 Other

• 👀 TypeScript 5.4 PR - Add auto-import for the package.json imports field
  


• 📜 Frontend predictions for 2024
  


• 📜 JavaScript Frameworks - Heading into 2024
  


• 📜 Alternate Futures for “Web Components”
  


• 📜 Why JavaScript promises aren't technically monads
  


• 📜 Shadow DOM and the problem of encapsulation
  


• 📦 ESLint v9.0.0-alpha.0
  


• 📦 quick-lint-js. 3.0 - TypeScript bug finder
  

🤭 Fun

See ya! 👋