This Week In React #177 : Skia, Pigment, Mist, Storybook, shadcn/ui, Hydration Diff, Geiger, MDXTS, Remotion, WinterJS...

Hi everyone!

This week it's particularly exciting to see React Native Skia reaching 1.0. But we also have many other interesting releases to look at: Pigment, Storybook, Tailwind, Rolldown, MDXTS...

There were also some fun ones, such as Mist and Geist. I'm really curious to know what you think of them. Would you use these?

I'm trying to monitor more closely weak signals (PRs, RFCs and tweets), do you find this kind of news valuable?

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

💸 Sponsor

In-App Subscriptions Made Easy

RevenueCat gives you everything you need to monetize, analyze, and grow your app business. Effortlessly control customer access and entitlements, manage data, and experiment with pricing. See why over 30,000 apps trust RevenueCat to power their in-app purchase infrastructure.

⚛️ React

Pigment CSS

The MUI team is working on Pigment, their own zero-runtime CSS-in-JS to replace Emotion in Material UI v6. The first versions have been published to npm, including a Next.js withPigment() plugin. Olivier explains in a 🐦 tweet the motivations to create a new solution, and how it compares to existing ones (Panda, StyleX, Tailwind). Unlike all others, this one will ease the adoption for existing Emotion and Styled-Components users.

Storybook 8

This new major version of Storybook comes with many improvements, including:

Experimental React Server Components support
Faster React control auto-generation (through react-docgen)
Faster static builds in "test mode" (CLI flag --test)
Built-in visual testing (through Chromatic)
Re-architected Vite support, Vitest, Vite 5
Improved mobile/desktop UI/UX

💸 Dive into React PDF viewing with Apryse. Seamless integration with PDF.js for an elevated experience. Learn more from our blog.
🐦 Sebastian Markbåge recommends to use package.json “imports” for dependency injection instead of Context
👀 React Core PR - Add Diffs to Hydration Warnings: The React team is working on improving the React hydration error messages by displaying a diff. You can get a 🐦 preview from the unit tests.
👀 React 19 - its not fine: React 19 currently 🐦 breaks the “its-fine” package, notably used to bridge React context from one renderer to another. It seems the React team is investigating bringing first-class support for this feature, although it looks like a challenging problem to solve.
👀 Next.js PR merged - add Lightning CSS: A new experimental opt-in CSS loader should be available soon.
👀 Remix RFC - Action Functions: new RFC suggests to implement React actions functions and reduce indirection/boilerplate. It should be implemented first on the client-side, and later add support for RPC “use server” directive.
👀 Vercel - Support for Remix + Vite
📖 The Framework Field Guide: A polished three-part series of books that teaches you Angular, React and Vue all at once, helping you figure out the differences between frameworks, and including many interactive examples. The first part "Fundamentals" is available.
📅 React Paris - 22 March: Next week I'll go to React Paris, and hope to meet some of you there. The conference is sold-out but you can still watch it online with a -20% discount.
📜 React Compiler & React 19 - forget about memoization soon?: Great overview of what we know about the upcoming compiler, its release timeframe and what kind of React code we might get rid of.
📜 Navigating the future of frontend: Well-documented article to better understand the current direction of the frontend ecosystem, including React with its Server Components.
📜 Component Testing with SafeTest vs. Cypress vs. WebdriverIO: The newly released Netflix SafeTest framework was recently roasted by competitors in 2 detailed articles, illustrated with React test examples.
📜 A Next.js package for managing third-party libraries: Presents the work of the Chrome Aurora team, notably the @next/third-parties package that enables you to efficiently load third-party scripts and embeds in a Next.js project
📜 Implicit Assertions: Explains why a React render smoke test remains useful.
📜 You can now deploy the Remotion Studio
📜 How To Transform ReactJS Animation into Video - The Lightweight Version of Remotion
📜 How to safely use dangerouslySetInnerHTML in React
📜 Progressively Enhance Handling Your Forms With React.js Server Actions
📜 Best Practices for Writing Tests with React Testing Library
📦 WinterJS 1.0 - WinterCG-compatible JS runtime built on Rust and SpiderMonkey: this new runtime claims to be the fastest, and can now run Next.js. A Hacker News RSC demo is available, and they plan to migrate their own Next.js frontend to it soon.
📦 React Geiger: It’s like the audio version of WhyDidYouRender, emitting little audio farts whenever React re-renders. That’s a fun idea, but could actually be useful too.
📦 MistCSS - Write React components using CSS only: A crazy JS-from-CSS tool that permits to generate React components directly from CSS files, including Tailwind support 🤪.
📦 Shadcn/ui - March 2024 Update - New components: Breadcrumb, One-Time-Password Input
📦 MDXTS (Beta) - The Content & Documentation SDK for React: “It's sort of a mashup of Contentlayer + Storybook”
📦 Astro 4.5 - Dev Audit UI, View Transition improvements, Multi-CDN, Shiki 1.0…
📦 Remix-Dev-Tools 4.0 - now Vite/ESM-only, new docs site
📦 BlockNote 0.12 - Block-Based rich text editor - New website and features
📦 next-cache-toolbar - A toolbar that helps to identify data cache entries
🎥 Theo - New JS Framework Just Dropped (TanStack Start)
🎥 Jack Herrington - Forms Management with Next.js App Router
🎙️ This Month in React - February 2024 - React 19 (but more details), Apple tries to kill PWAs

💸 Sponsor

Refine - Open source Retool Alternative

The sweet spot between the low code and traditional development for CRUD-heavy applications.

As an open-source React meta-framework designed for Enterprise applications, Refine offers a headless solution ideal for tasks like admin panels, dashboards, and internal tools.

While low-code tools may offer initial promise, they often fall short in handling complex scenarios due to scalability issues, limited customization options, and the risk of vendor lock-in.

Refine enables teams to rapidly develop production-ready apps while maintaining flexibility.

📱 React-Native

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

🎥 William Candillon - Time to Fly - React Native Skia 1.0

Exciting major release of React Native Skia, with an inspiring launch video! This library was first released back in 2021 by William Candillon and Christian Falch and has been heavily supported by Shopify for a long time. Now, they’ve finally released a 1.0 and it’s packed with improvements and new features: Thanks to a new Paragraph API, Skia can now render rich text layouts, combining system fonts and custom fonts. Animations Hooks make it easier to build performant animations with the already existing RN Reanimated and Gesture Handler integration. Another highlight for me personally: RN Skia now also supports the web as a platform, via a package called canvaskit-js!