This Week In React #93: Server Components, Remix, Gatsby, React-Native-Web, Perf, Immutability, Stately, TypeScript, Deno...
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
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
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.
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.
📜 How to Setup React Native Web in a Remix project: React-Native-Web integrates well with Remix, as any CSS-in-JS lib.
📜 Rendering 3D in React made easy with react-three-fiber: nice intro to Three.js and R3f.
🐦 "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:
📦 Yerba: Electron Turborepo monorepo with Next.js, Typescript, Vite...
📦 Lamina: layer-based shader material for Three.js + React-Three-Fiber
🔗 Remix Bug Report Test: Remix suggests to report framework bugs by creating failing tests 😏
🔗 remix.guide: kind-of HackerNews for Remix content
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.
Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.
🧵 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/
getServerPropsbut for React-Navigation)
🧵 Satyajit Sahoo: "Seeing many people compare React Navigation to React Router..."
📖 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
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.
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
Luca (Deno contributor) mentions exhaustively all the web APIs supported by Deno. No surprise it's a good platform to deploy Remix applications.
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(n^2) algorithm. Moving back to mutable code significantly increased the performances.
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 😏
Stately Editor public beta: low-code tool to create app logic visually based on state machines and state charts. By the creator of XState.
Babel 7.17.0: includes new decorators proposal (stage 2)
Monitor Exports from Packages in Monorepos: using Jest snapshots +
codeownersto monitor changes in libs public API surface 🤔
"Nobody at Facebook has worked on Jest for years": some Hacker News drama
Vercel - The evolution of the Web: 2021 retrospective