This Week In React #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...
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.
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.
Make useRef lazy — 4 ways: suggest 4 different ways to lazy init the value of a
useRefhook. 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
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.mdxfiles 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
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
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
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
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.
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
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
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.
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.
Modern CSS Reset / Global Styles: Josh Comeau comments on his CSS reset