React Newsletter #288

Next.js 12, React Freeze, and Reselect v4.1

This week’s issue is sponsored by CARTO.

Looking to develop map visualizations or geospatial apps using React?

CARTO, the leading Location Intelligence platform, offers a complete toolkit of React templates, components and libraries for rapid geospatial app development. Find out more.

👉 Check out their developer resources.


Next.js 12 Released

  • Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds
  • React 18 Support: Native Next.js APIs are now supported, as well as Suspense
  • <Image/> AVIF Support for 20% smaller images
  • Native ES Modules Support
  • Middleware (beta): Enabling full flexibility in Next.js with code over configuration
  • URL Imports (alpha): Import packages from any URL, no installs required
  • React Server Components (alpha), including SSR streaming


Experimenting with React Freeze

Krzysztof Magiera (a former React Native Core Team member) writes about how and why he and his team created React Freeze -- a tiny library that uses the new React Suspense mechanism to prevent parts of the React component tree from rendering, while keeping its state (both React and native view / DOM element state) untouched. This makes it possible to pause updates of parts of the app that are not visible to the user at the moment, and hence shave off some rendering time.

Next.js 12 Performance Test: Builds Appear to be Slower, Not Faster

In this article, Tom Norton takes an in-depth look at the most wide-reaching difference-maker in the Next.js 12 update: the Rust compiler, which is reportedly built on swc to replace Babel. Tom provides a proper build performance comparison for 3 real-world use cases, alongside a “control” by testing between Next.js 11.1 and Next.js 12 to see if the new Rust compiler lives up to the speedy hype. Judging from the title of the article, you can probably guess that he still has a few doubts.

Building Paper Audio with NestJS, Jovo, and React

Calvin Flegal writes about the learnings he had while building his recent side project, Paper Audio -- a fast way to share short musical demos on Alexa and Google Home.


How to test a select element with React Testing Library

Cathal Mac Donnacha writes about how the approach he took when he recently needed to add tests with React Testing Library for a <select> element he was developing.

Create a Responsive Navbar using React and Tailwind

In this tutorial, Francisco Mendes walks through each step of building a responsive navbar with Tailwind CSS and some React components.


Reselect v4.1

Reselect is a library for creating memoized "selector" functions that just released v4.1 -- which comes with new cache size and result equality check options, direct selector customization, improved TS types, and more. The library is commonly used with Redux, but is also usable with any plain JS immutable data. Created by Mark Erikson.

Dripsy v3

A collection of unstyled, responsive UI primitives for React Native + Web, created by Fernando Rojo. v3 includes TypeScript autocomplete for custom themes, auto-memoized styles, new docs, and support for Expo 43 and Next.js 12.


A tiny, easy and powerful React state management library that doesn't require actions, reducers, selectors, connect, or providers. Created by Aral Roca.


React hooks for Material UI, created by Charles Stover. For each state, each hook accepts an optional default state and returns a state-setting utility function.

React Hooks in Svelte

A repo created by Josh Nussbaum that takes React Hook examples and ports them to Svelte.


Next.js Conf Keynote

This 27-minute keynote is billed as "the future of React and Next.js." If you're interested in either of those technologies, this is worth checking out (even if you play it at 2x speed).

made with ❤️ by