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:
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:
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
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 😏
Extras:
- Why Efficient Hydration in JavaScript Frameworks is so Challenging: Ryan Carniato (Solid) presents tradeoffs of various frontend apps hydration strategies, including Remix, Server Components, Astro, Qwik...
- 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)
- @tsconfig/strictest: because strict mode is not strict enough
- Wordle with TypeScript types 😝
- Monitor Exports from Packages in Monorepos: using Jest snapshots +
codeowners to monitor changes in libs public API surface 🤔
- Structuring your Storybook
- GitHub: New sponsors-only repositories, custom amounts, and more
- New option curl --json
- "Nobody at Facebook has worked on Jest for years": some Hacker News drama
- Vercel - The evolution of the Web: 2021 retrospective
- Flutter 2.10
- Announcing Flutter for Windows
- Push Notifications, WebXR, and better PWA support coming to iOS
- A TypeScript Perspective on Go: the 2021 Advent of Code
- DesignSystem.tools
- Vue 3 as the New Default
- Chrome 99: CSS Cascade Layers, a New Picker for Input Elements, and More
- Electron 17
- "Did ya know you probably should be using
interface rather than type where possible?"
- Stackshare: Top 100+ Developer Tools 2021
- Use Streams to Build High-Performing Node.js Applications
- Using fetch(), AbortSignal, And setTimeout() To Apply Retry Mechanics In JavaScript
- Yes, I can connect to a DB in CSS
- Custom Highlight API
- Wolvic: AR/VR browser
- When should you leverage Module Federation, and how?
