This Week In React #84: React + Rust/WASM, preloading, eBay modals, Nextra, Parallax, Expo, Skia, TypeScript, Svelte...
React
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.
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
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
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
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.
Modern CSS Reset / Global Styles: Josh Comeau comments on his CSS reset