This Week In React #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...

React

This article explains how to integrate WebAssembly code into your React apps, based on Rust and Webpack. It takes a bit of gymnastics, but doesn't seem overwhelming.

On the other hand, this does mention the gain in performance, which will not necessarily be there, as Surma explained in this a fairly detailed article: Is WebAssembly magic performance pixie dust? TL.DR: WebAssembly with Rust or AssemblyScript is not necessarily faster than JavaScript (it depends on the program, and it may improve), but allows to have predictable performance as soon as the program starts, without waiting for the engine to warm up.

Note: Webpack also uses Wasm hash algos in AssemblyScript.

eBay released a nice-modal-react, already used internally, gives some explanation. It solves one important problem in particular: you probably have a <MyModal> component in your app (stateless or stateful) but it is not always easy to know where to render this component in your React tree. I found their approach interesting, also quite close to what I do: use a Provider at the top to manage the state of the modals so that it's not awkward to render them in a weird place (like... inside a button). The lib also handles animations, async open/close and other things.

The series continues. In this 3rd part Omar adds the ability to pre-loading the JS bundle of the target page when hovering a link or when it enters the viewport.

I like this series of articles because it discusses techniques used by all popular meta-frameworks: Next.js, Gatsby, Docusaurus, Remix... It's worth understanding how all this works at least once.

Nextra is a Next.js plugin using MDX to help you create content sites (docs, blog ...). The latest version upgrades to MDX 2.0 and Next.js 12.

It's a good alternative to Docusaurus (tool I'm working on), although it offers fewer features. It is particularly interesting if you want to stay in the Next.js ecosystem and need Server-Side-Rendering on some parts of your application.

Extras:

• Make useRef lazy — 4 ways: suggest 4 different ways to lazy init the value of a useRef hook. I personally like use-constant, and code is quite similar to once of those solutions.

• Parallax Powered by CSS Custom Properties: Jhey worked on some cool parallax animations for the new Kent C. Dodds website. This article is a great pragmatic way to see the power of syncing some values from JS to CSS using CSS vars and compute everything in CSS functions. React integration at the end.

• TypeScript React props: interfaces vs type aliases: there is some nuance to know when making a choice. Ben chooses interface by default but apart edge cases it doesn't matter too much.

• Redux v8.0.0-beta.0: rewritten in TypeScript, and prepare for React-18 with usage of useSyncExternalStore

• Storybook + Netlify CMS: demonstrates a possible integration between Storybook and a headless CMS based on Git, so that non-tech can still contribute by editing .stories.mdx files through a more convenient interface.

• Remix Tutorial: 6 hours with Kent C. Dodds 🤯 unrolling the Jokes App tutorial.

• Vercel support for Remix, with automatic configuration of caching headers

• Remix can be deployed on Deno

• SVGR 2: upgrades to SVGO 2, jsx runtime, rewritten in TS

• Gatsby Conf 2022 announced for the 2nd/3rd of March

• New React-Aria release, with a new useLongPress hook

• React Testing Library best practices

Partners

• 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

• Start React Native: learn everything about gestures and animations with William Candillon

• 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

React-Native

Expo publishes its timeline to depreciate the expo build command after 5 years of service, in favor of the new Expo Application Services, available for free since a few weeks. A timeline has been published, and we have over a year until the command stops working, or until SDK 47.

Extras:

• How to build a universal design system using React Native for Web, Tailwind CSS and Dripsy: interesting post. Particularly liked the usage of capsize to make font alignment consistent across platforms (this has been a pain for me in the past).

• New Skia demos on React-Native: FitBox, Breath, Gradient, Shaders. The imperative API seems to mimics the Flutter one (90% compatibility for now).

• react-native-sha: new lib demonstrating another time the benefits of JSI and C++: announced as 160x faster than JS SHA algorithms

• I was wondering why React-Native is using JSI with C++ instead of Rust. Found some answers leading to interesting discussions.

• ffmpeg-kit: allows the usage of FFmpeg for video processing embedded in mobile apps, including a React-Native interface.

• Some positive EAS + Hermes feedback

Other

Sells you Volta for managing your Node.js versions. As a reminder, it is a Rust tool, particularly suited for such a use-case and faster than JS alternatives.

I switched to Volta with my new Macbook M1 Pro. It is way faster than nvm / avn (although it may also be related to M1 ^^) and I had absolutely 0 problem. Nit: it does not read .nvmrc files as a fallback, which implies adding a new "volta" attribute in package.json.

Stefan explains that the need to use function overloads in TypeScript is less important since some TypeScript features (conditional types, variadic tuple types), but there are still some interesting use cases for it to know.

I personally like overloads, particularly to help me narrow a too wide API when certain conditions are met. Definitively something to have in your TS toolbelt. This other article is a good intro to function overloads.

Extras:

• JetBrains Fleet: JetBrains is working on a ligher IDE. I always preferred my IDEA Intellij to VSCode (mostly for the provided features). But I agree that the Java Swing interface is a bit heavy and old-school.

• TypeScript vs JSDoc JavaScript

• Modern CSS Reset / Global Styles: Josh Comeau comments on his CSS reset

• Introducing Svelte + Comparison with React and Vue

• yourhome.fb.com is using SvelteJS 😝

• Prettier 2.5: TypeScript 4.5, MDX v2 comment syntax

• The Vite Ecosystem

• Publish ESM and CJS in a single package

• What's New In DevTools (Chrome 97)

🎄🧁 Mark Dalgleish @markdalgleish

https://t.co/fhGaWwd4Nk