SWR 2.0 and Vite 4.0 released

#​318 — December 14, 2022

Read on the Web

React Status

SWR 2.0: Improved React Hooks for Data Fetching — The second major release of SWR (Stale-While-Revalidate) includes new mutation APIs, improved optimistic UI capabilities, new developer tools, as well as improved support for concurrent rendering.

Ding, Liu, Kobayashi, and Xu

Vite 4.0 Released — From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box. Vite’s new React plugin that leans upon SWC (above) presents a new option for React developers looking for even more speed, particularly when using Fast Refresh.

Evan You and Vite Contributors

The Developer’s Guide to Designing Notification Systems — So your CTO has just handed you a project to revamp your product’s notification system adding new channels and sophistication. What are the best practices?

Courier.com sponsor

Avoid These Common useState Pitfalls“You first need to become aware of the potential problems around useState in order to avoid them,” so Johannes takes us on an example-led journey to do just that.

Johannes Kettmann

‘No, React Native is Not the Future’ — How Standard Notes reduced their codebases from three to one and ultimately replaced React Native using—oddly—React Native as a bridge over to their core web app.

Crafting Privacy

IN BRIEF:

A visual roadmap of React topics if you’re learning and want to know the broad lay of the land.

Josh W Comeau has updated his popular Why React Re-Renders article.

Optimizing Web Fonts in Next.js 13 — An interesting post on optimizing fonts that also shows how the @next/font module can improve privacy by self-hosting Web fonts rather than using Google Fonts, say.

Lydia Hallie

👆 A New Approach for Pointer Events in React Native — A look at a new experimental cross-platform pointer API for React Native apps that involves leaning upon work already done for the Web Platform more generally.

Luna Wei and Vincent Riemer (Meta)

Accelerate App Development with SDK Building Blocks from Stream

Stream sponsor

🛠 Code and Tools

visx: Airbnb’s Low Level Visualization Components — Bring your own state management, animation library, or CSS-in-JS solution – visx is designed to slot into pretty much any React codebase. Demos aplenty.

Airbnb

Reacton: A Pure Python ‘Port’ of React for ipywidgets — If you ever have to work in the Python-based notebook space, this React-like way to create Python based UIs may be of interest. There’s a live demo here.

Maarten A. Breddels

Scene.js 1.7: A CSS Timeline-Based Animation Library — Plenty of examples on the site. Has components for React, Vue and Svelte.

Daybrush

Quickly Integrate Location with Existing Platforms

Radar sponsor

A (Future) Tool to Make React Native Screens A/B Testable — This appears to be a teaser for a commercial product, but it looks promising and they answer several questions about how it works here.

App Toggle

React Spring 9.6
↳ Spring physics-based animation library.

React Bootstrap 2.7
↳ Bootstrap components built with React.

Kea 3.1
↳ Composable state management library.

🙂 Emoji Mart 5.4
↳ Emoji picker component.

tRPC 10.5
↳ End-to-end typesafe APIs without schemas or code generation.

Jobs

Software Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Stickermule

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

🎄 And one for Christmas

▶  Creating a 3D Christmas Experience with Three.js and react‑three‑fiber — Afraid that working through yet another video tutorial over the holiday may not be exactly seasonal? It can be: this three.js and react-three-fiber walkthrough has a festive twist. (17 minutes.)

Wawa Sensei