React Newsletter #324

Bun beta, Refactoring large React components, and Five clever hacks for React Query and SWR


Retool is the fastest way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward in less time.

Check it out. We love using Retool and having them as a sponsor.


News

Bun v0.1 beta

This was by far the biggest news in the web dev world last week (23,000+ GH stars in the last 6 days). Bun is an all-in-one JavaScript runtime created by Jarred Sumner that claims to be 3x faster than Node and Deno at running SSR with React and 3x faster at multiple other benchmarks too.

It comes with a built-in bundler, transpiler, task runner and npm client, making it a potential replacement for other build tools like Webpack. Check out yesterday's Bytes for our full story on it.


Articles

How to Refactor Large React Components (The Story of a 2700-Line Component)

Mohammad Faisal wrote about his experience refactoring a very large React component for his self-driving car company, and shares what he learned, which other developers can apply when refactoring similarly large components.

How to animate multiplayer cursors

Chris Nicholas wrote this interesting article about how real-time, multiplayer cursors (which are becoming increasingly common in collaborative tools) are animated, and how the process is more difficult than it seems.

Migrating from Styleguidist to Storybook at Yelp

Two Yelp engineers (Kedar Vaidya and Benson Pan) wrote about how transitioning from Styleguidist to Storybook enabled their team to offer a faster and more user-friendly development environment for React components, along with better alignment with developer and designer workflows.

Build your own synthetic user testing

In this article, the New Relic team helps you learn all about the deep technical details of how synthetic monitoring works by walking you through how to build your own example. [sponsored]

A New Two-Repo Approach to React Native Development

This article takes a closer look at how this new, two-repo approach (one repo for the native parts and the other for the JavaScript parts) can improve efficiency and open up doors to other options in React Native.


Projects

Atomico

A small library for creating Web Components with "React-inspired syntax" like functions, hooks, and Vdom. Created by Matias Trujillo.

react-local-toast

Local toast helps you to provide feedback related to particular components on page. Created by Oleg Wock.

Bao.js

A fast, minimalist web framework for the Bun JavaScript runtime. It was created by Matt Reid and has similar syntax to Express.js. (Yes, we already have already have multiple Bun frameworks that have popped up in the last 6 days 🥲.)

eslint-plugin-validate-jsx-nesting

This appropriately named ESLint plugin makes it easy to find invalid HTML nesting in your JSX before it causes bugs. It's helpful for React and any other framework that uses JSX. Created by Manan Tank.


Videos

Five Clever Hacks for React-Query and SWR

In this 40-minute video, Jack Herrington shares five things you can do with react-query and swr that aren't just running a single query.

The Story of Next.js

We made this 12-minute video to explain how and why Next.js took over the world. It's been watched by over 325,000 developers, and we think you'll learn something from it too.

Interview with the creator of Bun

In this hour-long video, Theo Browne talks to Jarred Sumner (the solo creator of Bun) about everything you'd ever want to know about the past, present, and future of the new runtime.

made with ❤️ by ui.dev