Hi everyone!

It's the conference season: the ViteConf replay is available, React Advanced just finished, and more to come.

The Next.js conference starts in a few hours. We'll probably get a Next.js 13 announcement, along with nested layouts, and some other super cool stuff that starts with Turbo 🤭. Let's discuss that next week.

We also have all the hosts agreeing to improve their Next.js support at the same time: Netlify, Cloudflare, Microsoft...

Don't miss William Candillon's React-Native video season 5 which starts today!

I recorded a podcast episode about Docusaurus 2.0 with PodRocket last month. Totally forgot to mention it 😅 I want to do more podcast episodes in the future, so please invite me! 😉

💡 Check this newsletter on Twitter - visual format 🎨

💸 Sponsor

How come professionals in every other industry have specialized tools, but web developers are still stuck using the browser that their grandma is using for shopping on Amazon?

If you're opening localhost:3000 in any other browser except Sizzy, you're wasting hours of your precious time.

Before Sizzy: web development is stressing you out, responsive design is hard, you have an overwhelming amount of opened tabs and apps.

After Sizzy: all the tools you need are in one place, responsive design is a breeze, no more context switching.

You can download it here and try it for free for 14 days!

⚛️ React

Why We're Breaking Up with CSS-in-JS

Sam is a maintainer of Emotion, one of the most popular CSS-in-JS libs. He explains the advantages and disadvantages of CSS-in-JS, with a focus on runtime libraries problems. For his company Spot, the cost of serializing styles was too high. They replaced Emotion by Sass modules (CSS modules + Sass) with a CSS utility system. On Docusaurus, we use CSS modules and I confirm that it is a good no-runtime and relatively simple alternative. DX is not as good but still quite acceptable.

This article has started many interesting discussions. It has been known for a while that CSS-in-JS libraries with runtime cause performance problems. Dan Abramov confirms and does not want to use any runtime on the new React doc site. Ryan Florence mentions performance problems with Chakra, which uses Emotion.

Tailwind remains a good alternative. For me, it can be put in the CSS-in-JS no-runtime category, especially in a React context where Tailwind styling is done via JSX. Some question its maintainability, but in practice it works quite well.

Qwik React

Qwik is an innovative SPA framework that avoids performance issues related to client-side hydration. It can now integrate with React through a qwikify$() function to wrap any existing React component. client: directives (inspired by Astro) allow to control when the React component will be hydrated with a lot of granularity. The demo integrates Material UI in a Qwik app. See also this video. I think it's a good solution to avoid doing an all-in on this new framework, and try it gradually. We can also keep the cross-platform properties of React, while adopting Qwik to improve performance on the web.

Fully Typed Web Apps

Kent C. Dodds explains the interest of having end to end type-safety, from the DB to the UI, through the different boundaries: network, localstorage, DB... He talks about validation (schema, type guards), type generation (Prisma) and conventions (Remix). He explains how this experience is possible with Remix, thanks to inference: it is better to use typeof than as.

Building an interactive WebGL experience in Next.js

Vercel explains how they created an impressive immersive signup experience for the Next.js conf, based on React-Three-Fiber. It's still complex to understand without 3D / WebGL / Three.js experience, but the deconstruction in successive steps is interesting and gives an insight into the mindset of doing creative dev.

• 👀 React Cache API Pull-Request: exposes a new React.experimental_cache API
• 📖 New beta doc - cloneElement
• 📦 Vitest Preview: permits to visually debug Vitest tests. Little brother of Jest Preview.
• 📦 Outstatic - A static CMS for Next.js: new Git-based CMS that integrates nicely with Next.js. Simple user-friendly editor with the ability to upload images.
• 📜 Netlify - Background and Scheduled API Routes for Next.js: Netlify using its background functions to call Next.js API based on cron expressions.
• 📜 Cloudflare Pages support for Next.js Edge Runtime: Cloudflare now supports Next.js, only via the experimental-edge runtime that can run on Cloudflare Workers (unlike the Node.js runtime). Their solution is based on Vercel Build Output API, which seems to pave the way for better portability of edge-first frameworks between different clouds.
• 📜 Microsoft - Extending Next.js support in Azure Static Web Apps: Azure will now support Next.js SSR (previously: only SSG).
• 📜 Persist inputs after a form submit in Remix: proposes a progressive enhancement solution to keep the values of a form after a submission. 2 solutions: return the values in the Remix action or use the flash session.
• 📜 Currying Layout Component Patterns in Next.js: suggest to parametrize the getLayout of Next.js to create Layout variants without leading to unmount/remount. Nice trick today, might become less relevant with the upcoming nested layouts support.
• 📜 Throwing vs. Returning responses in Remix
• 📜 Lessons learned from moving to Recoil.js
• 📜 Separate API Layers In React Apps
• 🎥 Is the new React use hook a footgun?
• 🎥 React Advanced London 2022 - Day 1
• 🧵 Lottie vs Rive: Lottie is quite popular in the React ecosystem but its competitor Rive looks much more performant at runtime.
• 🐦 Zustand code in a tweet
• 🔗 New website for Storybook

💸 Sponsor

How 1000s of software engineers stay productive without burning out

You know that the output of your work matters more than the number of hours you put in. Sunsama has been the insider secret of 1000s of developers who use it to work less but achieve more.

Eliminate endless tab-switching with their JIRA, Github, and Notion integration. Timebox your day and create space for your hobbies and side-projects.

The best part? They're offering a 14-day free trial (no card needed) so you can start achieving more, today.

📱 React-Native

• 🎥 Headspace Player - “Can it be done in React Native?”: season 5 just started today 🤗
• 🤫 Some rumors going around about Expo SDK 47: a promising SDK!
• 🗣 The new architecture is here… what now? 3.0: React Advanced talk slides from Lorenzo (Microsoft).
• 📈 React-Native performance brenchmarks: Alexandre does daily benchmarks and compares the performance of the old VS the new architecture on various scenarios.
• 📖 Reassure documentation: Reassure has a brand new Docusaurus doc site 🤗
• 📖 Expo Docs Updates - new Flipper plugin integration guide
• 📦 create-react-native-library 0.25: Kotlin Turbo module template
• 📦 Expo Router 0.0.31
• 📦 Expo Router 0.0.33
• 📦 Realm JavaScript v11 - Hermes Support, Realm React, Flipper, and Much More
• 🎙️ RNR 249 - A Redux Maintainer’s Thoughts on RTK vs MST

🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer?

🔀 Other

• Let’s talk about web components: Interesting reading by Brad Frost on Web Components, which are not necessarily incompatible with React but can complement it (e.g.: a design system in a React app). The current difficulties (SSR) will eventually be overcome.
• Replit App: new app to code on your phone (made with Expo). There are templates to code in Next.js.
• Introducing Node.js 19 - Note: Node.js 18 enters LTS today!
• Introducing Stately Studio 1.0: XState state machine editor
• Vite 4 plans: upgrade to Rollup 3, es2020 compat...
• ViteConf 2022 replay
• Turborepo 1.6 - Use Turborepo in non-monorepos
• Solid 1.6
• Futuristic CSS
• Is There Too Much CSS Now?
• npm bin script confusion: Abusing ‘bin’ to hijack ‘node’ command
• Tailwind CSS v3.2: Dynamic breakpoints, multi-config, and container queries
• Tailwind CSS v3.2: revisiting my “feature creep” warning
• Can I DevTools - Compare the features of browsers DevTools.
• Vercel - Regional Edge Functions
• Deno - Which serverless edge platform has the fastest git deployments?
• Cloudflare Workers and micro-frontends: made for one another
• Blink: Intent to Ship: CSS Color Module Level 4 + color-mix()
• Release Notes for Safari Technology Preview 156
• WebKit Features in Safari 16.1
• JavaScript metaprogramming with the 2022-03 decorators API

🤭 Fun