Sébastien Lorber

This Week In React #93: Server Components, Remix, Gatsby, React-Native-Web, Perf, Immutability, Stately, TypeScript, Deno...

This Week In React #93: Server Components, Remix, Gatsby, React-Native-Web, Perf, Immutability, Stately, TypeScript, Deno...

Sébastien Lorber's photo
Sébastien Lorber
·

7 min read

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:

💸 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

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:

Oreilly in bottle of wine

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!

ReactReact NativeJavaScriptTypeScript