#​394 — July 24, 2024

Read on the Web
Together with  Clerk
React Status

The Results of State of React 2023 — The State of React 2023 survey ran last December but the results from over 13,000 respondents have finally landed. It’s packed with interesting tidbits, but we learn:

Devographics

Build a Waitlist with Clerk User Metadata — Discover how to implement a waitlist in your app using Clerk's user metadata, including setting up an admin dashboard for efficient user access management. This guide simplifies controlling user entry and enhances your app's onboarding workflow.

Clerk | Complete User Management sponsor

How Airbnb Smoothly Upgrades React — Airbnb has recently completed an upgrade of all its Web-facing sites from React 16 to React 18. Few of us get to work on such large systems, but Airbnb’s strategies and processes could provide some inspiration for your own upgrades.

Andre Wiggins (Airbnb)

📺 Over on YouTube, Theo has a video about how the New York Times saw performance improvements by upgrading to React 18, too. (We recently featured the NYT's post that inspired Theo's take.)

IN BRIEF:

  • Astro 4.12 has been released with experimental support for server islands, a way to integrate static HTML and server-side generated components. You can see a demo here.

  • Vercel's Turbopack bundler is moving home into Next.js's monorepo. While it's not Next.js-exclusive, the Vercel team wants to focus on its development more and thinks it'll be a better place to do that.

How to Choose the Best Rendering Strategy for Your App — Get a feel for the differences between Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR).

Alice Alexandra Moore (Vercel)

DRY – A Common Source of Bad Abstractions — The pursuit of avoiding repetition at all costs can sometimes result in crude, hard to maintain code. Think about the actual concerns involved and you might find a better way to break things down.

Swizec Teller

Use useId() Instead of Hand-Making IDs — Why to use useId instead of hand-made IDs to link two DOM nodes for accessibility.

Brad Westfall

📄 How to Optimize Next.js App Performance with Lazy Loading Tapas Adhikary

📄 Rendering Prisma Queries with React Table: The Low-Code Way Yiming (ZenStack)

🛠  Code, Tools & Libraries

React Native Filament: A 3D Rendering Engine for React Native — It’s fast, native 3D rendering with a React touch. Rendering takes place on a separate thread for efficiency, and on iOS, Filament uses the efficient native Metal API. GitHub repo and some pretty good docs, too.

Marc Rousavy

📅  React DayPicker: A Component to Create Date Picker Controls — There are a lot of date selection components out there, but not many are ten years old with 6000 GitHub stars. DayPicker focuses on providing the basics for you to then style and customize as you wish - it complies with modern accessibility requirements too. GitHub repo.

Giampaolo Bellavite

📰 Classifieds

🦑 React Rally is back! Aug 12-14 Park City UT, workshops, learning, and networking. Use discount code ReactStatus for 25% off.

🐘 Postgres user? Be sure to check out our sister newsletter, Postgres Weekly.

🗺️  GeoStyler 15.0: UI Components for Map Styling — Build flexible user interfaces for map styling in the browser.

GeoStyler