Hi everyone!

Many great articles this week, in particular a very first pragmatic feedback on using Server Components at Shopify.

Newsletter is late this week because I'm trying to create a landing page for it: cf.thisweekinreact.com. I'm using a brand new stack (Remix, Tailwind, Cloudflare Pages), but I have some SSL issues and Cloudflare refuses to communicate with Revue API 😅.

I'm also using more emojis to "categorize" links. Please let me know if you find this useful 🤷‍♂️?

🙏 Support the newsletter:

😘 Recommend it to your friends: it really helps!
💸 Sponsorise This Week In React
😍 Write testimonials on Twitter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

React

Shopify: React Server Components best practices

Cathryn's feedback on the usage of Servers Components at Shopify, which she learned to use through their new Hydrogen framework. Without best practices, you might not leverage this new React feature properly and end-up with a bundle larger than it could be.

She advises to use Shared Components by default, instead of Client Components (what we use today). For interactivity, extract some Client Components with the finest granularity. Then try to convert the rest to Server Components if it's possible. The composition patterns (usage of children) that we sometimes use to optimize can also be used to interleave components of different types.

She offers a real decision tree, which she illustrates with 2 examples: newsletter signup and product FAQ.

A Shopify tutorial using server components has also been published: Rapid Development with Hydrogen: Building a Product Page

How to write performant React apps with Context

Nadia explains how you can optimize rendering on a complex React form using the React context. First, you have to separate into 2 contexts and hooks useFormData() and useFormAPI(). Do not forget to memorize properly the api object. We can eventually split the state into several smaller contexts.

These techniques may not scale as well as a real state manager, but are still useful to know in case you can't use one.

The "best" way to manage icons in React.js

There are many ways to use icons in React, each with different tradeoffs.

.svg files cannot be styled in CSS. React components that render SVG (also applies to SVGR) are convenient, but they inline the SVG markup in the HTML output and makes the page heavier. In my experience, we see this problem very quickly on a static pages (or SSR) that uses the same icon many times.

Ben offers a great, lesser-known alternative: using SVG sprites.

Extras:

📜 How to Setup React Native Web in a Remix project: React-Native-Web integrates well with Remix, as any CSS-in-JS lib.
📜 Offline React Query: Dominik presents limits of React-Query 3 to handle offline or network issues, and introduces new v4 (in alpha) that might help you ship better offline-first apps.
📜 Rendering 3D in React made easy with react-three-fiber: nice intro to Three.js and R3f.
📖 Partytown: new doc site + pages to integrate with Next.js and Remix
🐦 "A simple composition trick to avoid re-rendering a component": same composition technique as the one used with Server Components 😏 (first article)
📦 Gatsby 4.7: with new option: trailingSlash
📦 Yerba: Electron Turborepo monorepo with Next.js, Typescript, Vite...
📦 Lamina: layer-based shader material for Three.js + React-Three-Fiber
🔗 Remix Routing Demo
🔗 Remix Bug Report Test: Remix suggests to report framework bugs by creating failing tests 😏
🔗 remix.guide: kind-of HackerNews for Remix content

💸 Sponsors

Stream: powerful Chat & Feeds for React & React-Native

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Flutter, Android, Angular, Compose, Unreal and iOS. It also supports Expo managed workflow.

Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

React-Native

🧵 Andrew Clark: "I can't prove this but I suspect if someone built a Next.js/Remix/etc for React Native (i.e. single codebase for client and server) they would make a trillion dollars": I don't know exactly what Andrew has in mind, but this is a very interesting topic to discuss! I'm particularly interested in the usage of Server Components in React-Native (or at least some Server-Driven UI) and co-locating data requirements with screens (think Remix/loader, Next.js/getServerProps but for React-Navigation)
🧵 Satyajit Sahoo: "Seeing many people compare React Navigation to React Router..."
📜 Displaying a List in React Native: Map Method or FlatList Component
📜 Expo EAS + LogRocket: Unlimited Possibilities for Your Expo Apps
📖 React-Navigation - Organizing Types: new doc
📦 React-Native 0.68.0-rc.1: new branche and RC already available, as the release cycle is becoming faster
📦 expo-e2e-demo: demo running Detox e2e tests on an Expo app with GitHub actions
📦 React Location on React Native POC: integrates the React-Location lib with React-Native to enable the render-as-you-fetch pattern
🐦 "We rebuilt the docs of NativeBase using Nativebase"
👥 App.js Conf 2022: 8-10 June Krakow (CFP). I still have my 2020 ticket so hopefully you'll see me there 😉
👥 React Native London February 2022: meetup (live stream) with Quin Jung (Expo) talking about the brand new EAS Updates
🎥 Limitless App Development with Expo and React Native

Partners

Start React Native: learn everything about gestures and animations with William Candillon
React-Native Weekly: stay up-to-date React-Native core updates
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
ES.next News: learn about the latest in JavaScript and cross-platform tools
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
Software Mansion: the co-creators of React Native and the technological core of many tech companies

Other

A list of every web API in Deno

Luca (Deno contributor) mentions exhaustively all the web APIs supported by Deno. No surprise it's a good platform to deploy Remix applications.

This is probably in response to the new web APIs announced last week for Node.js 18. Also read: fetch() In Node.js Core: Why You Should Care.

Immutability isn't free

Funny story, in a backend context but largely applicable to React apps. The usage of FP and immutability led to bad performances related to array copying and an O(n2) algorithm. Moving back to mutable code significantly increased the performances.

Note: it is also possible to get better performances with immutability by using vector tries and structural sharing, used internally by libs such as ImmutableJS.

Netlify Scheduled Functions

Quirrel (serverless cron jobs SaaS) and its creator Simon (see his post) both join Netlify, which introduced a new Scheduled Functions feature in beta.

This kind of feature is clearly lacking in the current serverless landscape. Note that Blitz (Simon is a contributor) pivots to Blitz Toolkit to provide similar services. We couldn't be surprised to see Vercel make an offer 😏