#318 — December 14, 2022
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?
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.
‘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.
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.
👆 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)
🛠 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.
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.
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.
React Spring 9.6
↳ Spring physics-based animation library.
React Bootstrap 2.7
↳ Bootstrap components built with React.
↳ Composable state management library.
🙂 Emoji Mart 5.4
↳ Emoji picker component.
↳ End-to-end typesafe APIs without schemas or code generation.
Software Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.
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.
🎄 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.)