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.
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.
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:
Tweet
Share