This Week In React #110: Fresh, Hydrogen, Next.js, Remix, Storybook, useEffect, MJML, MDX, React-Native, ES2022...
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...
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 as
ui = 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: like using setState while rendering 😱. I particularly liked the
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.
📜 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.
📈 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
💡 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’s cutting-edge React framework for 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 this link to join.
TechTree - Introducing This Week in React Bounty Board
TechTree is building the first social-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 you earn money by referring your friends to 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 own Bounty 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 started here.
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.
📦 react-native-zephyr: Formidable Labs published a new React-Native type-safe styling solution inspired by Tailwind. Focusing on mobile usage, not cross-platform for 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).
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