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.
<Image/> AVIF Support for 20% smaller imagesKrzysztof 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.
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.
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.
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.
In this tutorial, Francisco Mendes walks through each step of building a responsive navbar with Tailwind CSS and some React components.
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.
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.
A repo created by Josh Nussbaum that takes React Hook examples and ports them to Svelte.
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).