React Newsletter #309

React 18 is now available on npm 🚨


This week's issue is sponsored by Unlayer.

Unlayer provides a drag-and-drop email editor, page builder and popup builder that embeds in your SaaS app. Their React components make it super easy, so you can seamlessly integrate it with the rest of your app.

👉 Check it out (for free).


React 18 is now available on npm 🚨

This is not a drill. React 18 is finally available, with out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.


Articles

The 1st Annual OSScars

In honor of the Academy Awards, we gave out OSScars to nine different OSS projects in yesterday's issue of our Bytes Newsletter. Check it out to see why Remix won Best Adapted Screenplay, Next.js won Best Director, and more.

Creating a React Library for Consistent Data Visualization

Krystal Campioni (a staff front-end developer at Shopify) writes about the work that Shopify developers have put into creating Polaris Viz -- a React data viz library that other teams can rely on to quickly implement data visualization without having to solve the same problems over and over again.

How Wix Applied Multi-threading to Node.js and Cut Thousands of SSR Pods and Money

Guy Treger (a senior software engineer at Wix) wrote about changes his team made to Wix's Server-Side-Rendering architecture, which resulted in some significant efficiency gains.

Preemptive Memoization In React Is Probably Not Evil (Yet)

Zhenghao He writes about why you might still end up using useMemo/useCallback everywhere even though you want to avoid premature optimization


Tutorials

Write React Components Using State Machines With Xstate

This tutorial by Rahul Padalkar gives a helpful introduction to state machines and Xstate, and it walks you through how to use it when building React apps.

How To Create and Validate a React Form With Hooks

This article demonstrates how to use Hooks to implement a React login form with validation that will run whenever a user leaves (blurs) a field or tries to submit the form. [sponsored]

Using React Native Skia to Build a 60 FPS Free-hand Drawing App

This tutorial walks you through each step of building a free-hand drawing app using React Native's version of Skia (a very popular, open-source 2D graphics engine made by Google and used in Flutter, Chrome, and Android).


Projects

Leva

A React-first components GUI created by Poimandres (the folks behind react-spring, zustand, and react-three-fiber).

GitLanding

A collection of React components for creating landing pages for your open-source projects.


Videos

The Story of Next.js

We spent a month making this 12-minute video on how Next.js took over the world -- and how it's really just a culmination of the last 20 years of web development. I think you'll really like it.

React Trends: Interview with React Query creator Tanner Linsley

In this hour-long video, the Retool team interviews Tanner Linsley about his open source work, React trends in 2022, and the challenges of building complex, data-driven UI experiences in React.

Neumorphism in React Native

In this 37-minute video, William Candillon shows you how to use react-native-skia to implement neumorphic designs from Figma.

made with ❤️ by ui.dev