📨 #170: Waku, Remix, Donuts, RSC resentment, React 19, Aria Components, Storybook, Postgres Components, hydration, streams, VisionOS, atob, Maestro, Orbit, Tamagui, VisionCamera...
Hi everyone!
This week we had some really great React articles, but also interesting releases from Waku and Remix. The community shared mitigated but interesting feedback on React Server Components, regarding complexity and ownership.
On the React Native side, it's calm. We are eagerly waiting for the Expo SDK 50 which this time is released much later than the beta. We are also waiting for the official launch of VisionOS, a new platform that React Native will support.
I just celebrated 10 years of React experience 🙉 It's hard to believe how my career changed thanks to React, considering I used to really dislike JavaScript.
💡 Check this newsletter on Twitter - visual format 🎨
As always, thanks for supporting us on your favorite platform:
- 🦋 Bluesky
- ✖️ X / Twitter
Don't miss the next email!
💸 Sponsor
CMS with Inline Visual editing for Next.js, Remix and Gatsby
Set up a project in just 1 minute with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework.
Content editors can easily use these blocks to compose pages visually, just like using a word processor, without compromising the design system.
React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Collaboration, Scheduled Publishing, Multilanguage, Integrations with external data sources, Approval Workflow, Single Sign-On, Multiple environments, Backup and Change history.
Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 8,500 users worldwide.
Get started today!
⚛️ React
This release introduces a new createPage API for creating layouts and pages programmatically. This notably marks the shift of Waku from being a React Server Components learning experience to becoming a real production-ready React framework. A lightweight file-based page route is expected for v0.20.
This joyful and awesome interactive article uses the donut analogy (client component with a “children” hole) to explain how client/server components can be interleaved. It also covers more advanced RSC composition topics. Today I learned about that fancy server action render prop trick!
- 💸 Take the Developer Nation Survey - For each completed response, Developer Nation will donate to one of the charities of respondents’ choosing!
- 🐦 Dan Abramov - “React Server Components does not require a server”: Another important reminder that RSCs can all run at build time too, and the CI is your server. You can deploy a completely static Next.js site using RSCs to S3 or GitHub Pages.
- 🐦 React v19 is coming - React v18.3 is not planned
- 🐦 Pre-rendering (SSG) is coming to Remix
- 👀 React Postgres Components: Render React SSR using V8 inside Postgres RPC? Sounds crazy, but works!
- 📜 React Libraries for 2024: As every year, Robin Wieruch updated his list of recommended React libraries, a good way to discover many libs of the ecosystem.
- 📜 Kind of annoyed at React: Cassidy shares a reasonable take on the current state of React that seems to resonate with the community, notably 🐦 Tanner Linsley using React with increasing resentment.
- 📜 React, where are you going?: Matteo builds on top of Cassidy’s take and explains his frustration regarding React ownership and increasing complexity. He advocates for a financially sustainable community-driven framework. What struck me is that adding RSC support to their lib React-Bricks decreased the DX (also confirmed by a few others, 🐦 tweet).
- 📜 Streams and React Server Components: Even apart from RSC, this is a great deep dive into the Streams APIs from a Waku contributor.
- 📜 Server-side rendering local dates without FOUC: It’s common to get React hydration mismatches when trying to render time in the user timezone. This suggests to inline a script to modify the DOM SSR-rendered time just before React hydrates to avoid the mismatch.
- 📜 How to setup Client-Server Relaying in Next.js: Explains how we can render a dynamic value on the server, and then let SWR take over that value on the client.
- 📜 Say Hello to Panda CSS - The New CSS-in-JS Library with Zero Runtime
- 📜 Build Dynamic Forms with React Hook Form
- 📦 Remix 2.5 - SPA mode: Deploy Remix apps without a server (e.g. on GitHub pages) using SPA mode, generating a single
index.htmlfile. - 📦 React-Aria-Components + Tailwind starter kit - New set of beautifully styled component that you can modify
- 🎥 A Beginner’s Guide to Storybook 7 with React - free Egghead course
- 🔐 Critical security vulnerability in @clerk/nextjs - upgrade to 4.29.3
Don't miss the next email!
💸 Sponsor
Process Documents using React PDF Library by Apryse
Transform your applications with Apryse's React PDF Library. Seamlessly integrate an exceptional viewer experience for web, mobile, and desktop. View, edit, redact and annotate with support for PDFs, Microsoft Office, video, images, HTML, and more.
Start your free trial today.
📱 React-Native
- 💸 Moropo - Build and Run Open Source React Native Tests Directly From Your Browser
- 👀 Expo 50 launch live stream announced for January 31, 2024
- 👀 atob() and btoa() were just added to Hermes
- 👀 ChatGPT React Native Buddy
- 📅 App.js Conf Call for Papers is ending January 28
- 📜 Unlocking New Possibilities with Maestro: Beyond Automated Testing: Introduction on how to do automatic visual testing of React Native apps using Maestro.
- 📦 Official Tamagui design system Figma released: Create designs using Tamagui components in Figma.
- 📦 React Native Test App 3.0: Microsoft’s test app for library authors. Mainly a clean-up release, dropping Node 14, React Native 0.65 and earlier, as well as Flipper.
- 📦 React Native visionOS with new CLI commands: visionOS will soon be available and the community is racing to get React Native ready for it.
- 📦 vision-camera-resize-plugin - Frame Processor plugin for fast buffer resizing
- 📦 Expo Orbit 1.0.2
- 🎥 Simon Grimm - Better than React Native Stylesheet - Unistyles
- 🎙️ Rocket Ship 25 - EAS, Expo Prebuild & SDK 50 with Kadi Kraman
- 🎙️ React Native Show 33 - React Native at Scale With Rafael Mendiola
🔀 Other
- 📜 Module Federation added to Rspack
- 📜 Rust-Based JavaScript Linters: Fast, But No Typed Linting Right Now
- 📜 npm in Review: A 2023 Retrospective on Growth, Security, and Quirky Facts
- 📜 Is htmx Just Another JavaScript Framework?
- 📜 Designing better target sizes (in CSS)
- 📜 Node.js Security Progress Report
- 📦 Node.js 21.6 - permission model improvements
- 📦 gql.tada - TypeScript that understands GraphQL
- 📦 Lightning CSS 1.23
- 📦 Prettier 3.2 - JSONC, Angular’s ICU expression
- 📦 fsx - Modern filesystem API for JavaScript
🤭 Fun
See ya! 👋
