This Week In React 110: Fresh, Hydrogen, Next.js, Remix, Storybook, useEffect, MJML, MDX, React-Native, ES2022...

Hi everyone!

Another busy week with lots of releases Hydrogen 1.0, Fresh 1.0, Next.js 12.2, React-Native 0.69...

I liked Josh Comeau's article on MDX-based emailing: this is exactly the setup I want to adopt for this newsletter .

Speaking of this newsletter, I'm still looking for a solution to make the content more "digestible". What do you think about the idea of a daily newsletter? That means a more frequent email, but also a much shorter one.

Support the newsletter:

• Recommend it to your friends: it really helps!
• Sponsor This Week In React
• Write testimonials on Twitter
• Retweet the latest Twitter thread
• Reply to thisemail:feedback is welcome
• Follow onLinkedIn

If you like this newsletter, subscribe in priority there:

• ThisWeekInReact.com
• ReactHebdo.fr

React

Fresh 1.0

The Preact framework officially supported by Deno is now v1 and considered production-ready. Fresh reminds me of a mix between Remix and Astro: no JS by default, progressive enhancement, multi-page app with islands architecture. There is no build step: you deploy directly your TypeScript/Deno app to the Edge in a few seconds.

How We Built Hydrogen

Hydrogen, Shopify's React meta-framework for building e-commerce stores, just went v1.0 and was one of the first to rely on React Server Components. This article is an interesting feedback on the creation of the framework, detailing various choices made over time: React Server Components, Vite, Tailwind, preloading/waterfall, GraphQL fragments...

Next.js 12.2

Latest version of Next.js. The main theme is the gradual adoption of the Edge and standardized web APIs: middleware, but also API routes and SSR. There are also improvements on images, and a system of SWC plugins in WebAssembly.

My Wonderful HTML Email Workflow

Josh Comeau explains how he writes his emails with MDX, then uses MJML, React and Next.js to create the final HTML output that will work in all email clients, sent through ConvertKit, and will also be available on the web.

Data Flow in Remix

The initial model of React can be summarized asui = f(state). The problem is that this model does not really take into account network synchronization (i.e. API calls). Jim explains how Remix takes the React model and includes the network, thus reducing the need for local state management.

You Might Not Need an Effect

New doc page written by Dan Abramov, just merged to the beta site. Effects exist for synchronization with an external system. Many anti-patterns are presented with concrete examples and even challenges. Even experienced devs should read it. Some things may surprise: likeusing setState while rendering. I particularly liked theuseSyncExternalStoreexample.

What is the recommended way to load data for React 18?

Dan Abramov explains on Reddit why data fetching via useEffect is not ideal. However, there is no need to rewrite your application on the spot if it doesn't have any UX issue: those problems are not new in React 18, just better documented. See also comments on React-Native data-fetching.

Extras:

• How to add a theme switcher to Storybook: shows how to leverage Storybook toolbar to add a theme switch. Convenient tip: displays component in both light/dark mode.
• React Query FAQs: Dominik from React-Query answers the 3 most common questions.
• The React core team finally have opinions about CSS: good summary of current trends: increasing use of no-runtime CSS-in-JS.
• Cut build times with Gatsby Runner: new experimental Netlify plugin to reduce Gatsby build time by delaying image processing.
• State Machines on the Edge+Modeling React in XState
• Demystifying The New Gatsby Framework
• Should we use Lexical to edit our legal graph?
• Storybook in 100 Seconds
• Front-end frameworks popularity (React, Vue, Angular and Svelte)
• Verbum: text editor based on React and Lexical (new Facebook project to replace Draft.js)
• Storybook Variants Addon: convenient addon: add toolbar dropdown to display all variants of a story at once. No extra code needed: based on Controls.
• Create-T3-App: modern stack to start a project: Next.js, Prisma, TypeScript, tRPC, Tailwind...
• Gatsby 4.17: perf improvements
• Recoil Sync 0.1+Refine 0.1
• Vavite: Develop server-side applications with Vite
• Preact will compile out unused class components
• Qwik-React is coming

Sponsors

How to sponsor this newsletter

Storetasker: Freelance Shopify Devs network

Hey! This is Tim from Storetasker. We run the best Shopify dev freelance network. I would love for you to apply if you enjoy building Shopify sites or are excited about leveraging Shopify'scutting-edge React frameworkfor building custom storefronts:Hydrogen.

Accepted devs on the network work on a freelance basis, and we present them with great opportunities to work on some of the best Shopify brands (Alo Yoga, Chubbies, JUDY & many many more).

The great thing about Storetasker is that devs aren't in competition with each other - they just pick up the jobs that match their interests. Beyond that - it's a very tight-knit community.

Feel free to apply directly via thislinkto join.

TechTree - Introducing This Week in React Bounty Board

TechTree is building the firstsocial-economic platform for developers- a place to help you unlock the real value of your knowledge and network!

The first major feature on TechTree is Bounties, a tool to help youearn money by referring your friendsto open roles at top VC backed tech startups or find a job that might be right for you!

To help show you around, I have gone ahead and created my very ownBounty board-a selection of remote, React related roles for you to apply to or refer your network to. There has been over $300k worth of Bounties claimed on TechTree so far!

Looking to hire React developers? You can post Bounties of your own to be featured on my Bounty board! Read more and get startedhere.

React-Native

Announcing React Native 0.69

First version of React-Native to support React 18. To use the new features of Concurrent React, you will have to migrate to the new architecture first. The Hermes distribution mode has also changed: each version of React-Native will be associated with a Hermes version guaranteed compatible.

Extras:

• react-native-zephyr: Formidable Labs published a new React-Native type-safe styling solution inspired by Tailwind. Focusing on mobile usage, notcross-platformfor now.
• react-native-app-clip: Expo config plugin to create an iOS App Clip, permitting to users to test your app without even installing it (demo).
• react-native-safari-extension
• link-native-assets-expo-config-plugin
• RNR 240 - What's New in Expo SDK 45
• React-Native vs Flutter popularity
• Reanimated useAnimatedSensor() demo
• Reanimated PR: reduce bundle size on Web by 80%

Other

• ES2022 Features: Ecma International just validated the ES2022 spec. Overview of all the features included:.at(), Error Cause, top-level await...
• Defensive CSS: CSS tips to make your CSS more robust.
• Style Queries: CSS Container Queries is not just about layouts.
• StackOverflow Developer Survey 2022: React remains very used and liked. Svelte and Phoenix are good challengers.
• Histoire: A new way to write stories: Storybook challenger coming from the Vue ecosystem.
• FnApi: new project from Donny (swc creator) to reduce API calls boilerplate
• Prisma 4.0
• Turborepo 1.3
• SPAs: theory versuspractice