Hi everyone!

The newsletter is late: a new React RFC gave me a lot of reading 😄 The article by Kent C. Dodds is quite long as well but worth it. We've got 2 articles highlighting Sandpack in 2 weeks, it's probably worth looking into!

It's moving well on the React-Native core side too, with new open discussions. We could even think that after the migration to the new architecture and the stabilization of public APIs, there could be a 1.0 release? It doesn't matter much in practice, but some apparently care deeply about having a major version.

There are also quite a few interesting new things in the frontend ecosystem. I'm particularly interested in Codeflow, Fontaine and Unplugin which may be of direct interest to Docusaurus.

Speaking of Docusaurus, I was invited to talk about it in the Changelog JS Party podcast.

💡 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

React RFC: First class support for promises and async/await

The React team decided to go back to an async/await model to simplify the use of Server Components. Problem: it is difficult to support async/await on Client Components. So they propose to introduce a use(promise) API on the client side. Unlike other hooks, use can be called conditionally. Later it could be used with other "usables" like the React context (in reality, you can already use useContext conditionally!). Using different APIs can also be seen as a feature: it allows to distinguish Server Components from Client Components.

This RFC gives rise to interesting debates. We wonder what the integration with data-fetching libraries will look like. The use of generators seems to be suitable for this case, but they are difficult to use in practice. We are waiting for a new RFC that will introduce a cache API.

The Web’s Next Transition

Kent C. Dodds offers a nice retrospective of the 3 main web architectures, very well illustrated and documented. He highlights the latest architecture, the trend of the moment: Progressively Enhanced Single-Page-Application. Remix is an implementation of this, with well thought abstractions that encourage to emulate the native behavior of the browser. I don't really agree that a server is absolutely necessary. Docusaurus is also a PESPA implementation that works well without JavaScript.

A World-Class Code Playground with Sandpack

Josh Comeau praises Sandpack, the CodeSandbox toolkit he uses to create interactive code playgrounds. It looks easy to use and very flexible!

📜 Streaming: is it worth it?: the authors of Qwik, Solid and Marko explain the advantages of streaming, and why it is difficult to adopt this technique. In a React context, the libraries used (Helmet, CSS-in-JS, Redux...) must be compatible for streaming to be effective.
📜 Storybook - First-class Vite support: 7.0 will soon be in beta: support for Vite without config, pre-bundling, no more need for Webpack, support for new ones like Vue 2, Lit and Svelte...
📜 Moving From React to htmx: feedback (article + video) on a successful migration from React to htmx. We are in a Python backend context, their conclusions would probably be different in a JavaScript context where all devs are full-stack. The JS dev did the POC and lost his job afterwards 😅.
📜 Prioritise content over components: interesting ideas on React components design from different perspectives: designer, developer and content author (CMS)
📜 A little semantic HTML trick for React components: explains how to respect the semantics of HTML by passing the DOM element to be created in props.
📜 Using Web Components With Next (or Any SSR Framework)
📜 Exploring how virtual DOM is implemented in React
📜 Lazy-load React components in Remix
🐦 React tip: isFocused should almost never be a prop
🚧 Streaming SSR in Preact prototype
🧑‍🎓 Create a 3D site with Game Controls in Spline and React (video)
🎨 Satori + React-Three-Fiber demo
🎨 Satori + SVG code syntax highlighting demo
🎙️ Docusaurus 2 is a pretty big deal
🎥 In Defense of useEffect
🎥 Making React Context Fast!
📦 Planby - React.js based component for schedules and timelines
📦 Gatsby v5 beta
📦 Astro 1.5
📦 SWR 2.0 RC

💸 Sponsor

Chain React - The US React Native Conference - May 17-19 2023 Portland Oregon

Chain React returning for the 4th annual premiere React Native conference in May of 2023. The best minds, companies, and partners you won't want to miss.

Workshops | May 17, 2023 - We have three exciting workshops for all different skill levels! These exclusive workshops happen on May 17th at the official Speaker's hotel. There, you'll learn, mingle, and get direct access to experts.
Conference | May 18-19, 2023 - Our main event! This is where companies announce big news, developers share secrets, and lifelong friendships are made. The main conference is never live-streamed.

📱 React-Native

2022: How can we improve React Native?

The React-Native team would like to have feedback on what needs to be improved in React-Native. Some points mentioned: CSS support (Yoga, gap, grid, shadows...), cross-platform support, version upgrades, debugging, keyboard, Metro symlinks...

💬 Restructuring React Native's Public API
📜 Setting up React Native Monorepo with Yarn Workspaces
📜 How to Use Module Federation with Re.Pack 3
🚧 Expo Router 0.0.27 + Layout API change RFC
🚧 React-Native Bottom Sheet v5 will have web support
🚧 React-Native Flex gap support coming?
📖 Expo docs improvements: "Running E2E tests on EAS Build now works on Android"
📦 Metro 0.73.0
📦 React-Native 0.70.3
🎥 Flip card Animation in React-Native Re-Animated 2
🎙️ React-Native-Radio 248 - Introducing Ignite v8: Maverick!

🧑‍💻 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

StackBlitz Codeflow

The StackBlitz WebContainers technology allows to run Node.js in the browser via WebAssembly. You can run VS Code, Next.js or Docusaurus directly in your browser, and not via a remote Docker container. Codeflow adds the whole layer of integration with GitHub that makes it easy to open, review or edit a pull-request by running it locally in a secure way: extremely useful for open-source projects.

They also launched Web Publisher, a simplified editing view for Markdown files (editor, preview, save button). Very handy for contributing to documentation on Git, even for less technical users. There is a real preview of the content, and not the degraded experience of the GitHub Markdown preview. This is an important need for Docusaurus users.

Fontaine - Automatic font fallback based on font metrics

Permits to avoid layout shifts when loading a custom font. Makes the fallback font the same size as the final font, so that the transition is smooth and does not impact the size of the text containers. Great idea!

This Week In React #120: use RFC, Sandpack, Storybook, React-Native, Codeflow, Fontaine, Unplugin, Node.js 19, TypeRunner...

💸 Sponsor

⚛️ React

💸 Sponsor

📱 React-Native

🧑‍💻 Jobs

🔀 Other

🤭 Fun