#​300 — August 3, 2022

Read on the Web

React Status

Docusaurus 2.0 Released — If you’ve not used Docusaurus yourself, you’ve almost certainly read sites built with it – it’s everywhere! After four years of effort, version 2.0 of the popular React-powered documentation-focused static site generator (but you could use it for other things) has dropped. This new version was rebuilt from scratch, and adds MDX support, a new plugin system, theming, dark mode, SPA navigation, offline support, and more. Roar!

Meta (Facebook)

From 500ms to 1.7ms in React — A sluggish customized grid triggered a journey to analyze and understand the bottlenecks involved, followed by making improvements leading to a dramatic performance improvement (or roaring fast, you could say).

Oren Farhi

The Default HTML Calendar vs. a Commercial React Calendar — Check out the differences between the default HTML Calendar and the KendoReact Calendar, as an example of a feature-rich commercial component. We'll look at consistency, customizability, accessibility and ease of development - let's dive in.

Progress KendoReact sponsor

Quick bits:

  • 3️⃣0️⃣0️⃣ Talking of dinosaurs, we've made it to issue 300! It's been fun doing React Status so far. Thanks for reading - I know some of you have been here since issue 1 (which now looks amazingly spartan in comparison)! :-)

  • The Discord team has announced it's moving to React Native for their Android app for improved consistency across platforms.

Jobs

Senior Software Engineer at This Dot Labs (Remote, Worldwide) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more.
This Dot Labs

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

Using the useState Hook with TypeScript — A quick example. “Mostly you can rely on TypeScript’s ability to automatically infer the type. However, sometimes you need to use type arguments from TypeScript to help the TS compiler out.”

Robin Wieruch

The Study of Shaders with React Three Fiber — A complete guide on how to use shaders with React Three Fiber, work with ‘uniforms and varyings’, and build dynamic, interactive and composable materials with them. A lot to enjoy here if you prefer the more visual and creative end of things.

Maxime Heckel

🛠 Code and Tools

React Mosaic 5.2: A React Component Tiling 'Window Manager' — Provides an API to organize and tile React components across a view. Demo here.

Kevin Verdieck

react-medium-image-zoom 5.0: Medium.com-Inspired Image Zooming — If you like the effect that Medium has, this is for you. It’s simple, effective, and the project has been around several years and is quite mature. Examples here.

Robert Pearce

Build Your Own Synthetic User Testing

New Relic sponsor

Embla Carousel 7: Carousel with Fluid Motion and 'Swipe Precision' — A much maligned UI element, but the examples worked pretty well for us. Library agnostic but has easy integrations for React, Vue, and Svelte, if you need them.

David Jerleke

react-use: A Large Collection of Useful Hooks — A real grab bag covering things from tracking battery state and geolocation to setting favicons, debouncing, and playing videos.

Va Da

⚡️ THE RAPID RELEASES ROUND

Redwood 2.2 – React-backed full-stack framework.
Gestalt 63.0 – Pinterest's React UI components.
React Native Boilerplate 3.5 – A starter template for RN apps.
React Mosaic 5.2 – React tiling window manager.
react-xr 4.1 – Create VR/AR apps on react-three-fiber.
Jotai 1.7.7 – Simple, flexible state management.
React Chrono 1.18 – Modern timeline component.
react-three-fiber 8.2.2 – React renderer for Three.js.
react-native-mmkv-storage 0.8 – Fast, encrypted mobile key-value store.