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

Hi everyone!

Epic fail last week, I sent the React-Native section in French 😅 Nobody complained so maybe nobody read it 😨

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:

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.

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.

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.

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.

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 useSyncExternalStore example.

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 sponsor this newsletter

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 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.

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.