~reactstatus | Bookmarks (155)

4. Enhancing The New York Times' Web Performance with React 18 — Late in 2023, the team at The New York Times set out to take full advantage of React 18 on its flagship news site. This was an interesting case study looking at the challenges faced in upgrading, and the significant benefits they managed to take advantage of.

5. Puck: A Self-Hosted Drag-and-Drop Editor for React — Sitting somewhere between an old-school WYSIWYG-powered CMS and a headless one, Puck enables content teams to author content using real React components. Want to see a demo? Of course.

3. Why Use Redux Today? — The maintainer of the popular Redux state management library gave a talk at React Summit 2024 where he gave a thorough introduction to the history of Redux, how it grew, and the benefits it continues to provide. There are detailed slides if you’d prefer not to watch the video.

3. MistCSS: Build Components with Just CSS — Forget about CSS-in-JS, what about JS-from-CSS? This approach provided a way to compile CSS-only React components into a TypeScript equivalent, but as of the recent v1.0 release it went a step further and doesn't generate or require any JavaScript at all.. A neat idea.

2. Functional UI Kit: A Unified Figma and React UI Component Kit — Despite many attempts, it doesn’t feel like anyone has really perfected the Figma - React connection yet, but this was a good attempt to bridge the design/code gap, funded by Figma’s Community Creators Fund. No updates in several months, however..

6. Bulletproof React: A Scalable Architecture for Production Apps — A popular opinionated guide to how you can structure a large scale React app. It’s had a few major updates over the years, but notably now includes a Next.js version, with both app router and page router approaches.

Introducing Authentication Support for React Router — Clerk announces beta support for React Router, including pre-built UI components, server utilities, and low level utilities for any of your custom flows. You can use React Router both as a framework or library with Clerk.

1. How to Start a React Project in 2024 — It seems appropriate we started out 2024 with a look at the pros and cons of a few approaches to kicking off a React app. I bet we'll be getting a 2025 edition soon too!

Uniffi for React Native: Rust-Powered Turbo Modules — Mozilla and Filament have released a new tool for building React Native Turbo Modules (a way to interact with native platform APIs) using Rust.

React Spinners: A Collection of 'Loading Spinner' Components — A simple approach for loading, progress, and similar indicators in a wide variety of formats. GitHub repo.

Ref Callbacks, React 19 and the Compiler — Two years since his first article on callback refs, it turns out, in hindsight, some of the things included in that piece “were not 100% correct”. It’s time to revisit the subject.

React v19 Released (For Real This Time) — An early Christmas present! First teased in the React Labs February 2024 post, React 19 has been cooking for long enough (and in beta for 8 months) there’s already a wealth of content out there, like the React 19 upgrade guide, an explanation of the compiler, cheat sheets, and a roundup of what’s new in React...

Complete Intro to React v9: New Project, Modern Stack — Join Brian Holt in building a pizza delivery app from scratch. Master hooks, TanStack Router, testing, and React 19 features in this comprehensive guide to modern React development. No prior React experience needed.

My React Tech Stack for 2025 — After a year of research, building React apps, and creating a full-stack course, Robin shares what he’s settled on as his broader stack going forward for React apps into the new year. There’s little that's surprising here, but it’s good to see all these suggestions come together in one place.

Next.js 15.1: Now Officially Supporting React 19 — As (almost) the de facto React framework, it’s no surprise a Next.js release quickly followed the React 19 announcement. As well as React 19 support, there are improvements for debugging errors (shown in this post), after() is now stable, and forbidden() and unauthorized() are two new experimental ways to trigger 403 and 401 errors.

How React Compiler Performs on Real Code — Based on her talk at React Advanced this piece summarizes the problem the React Compiler is trying to solve, how that problem is solved in its absence, and how the compiler works on real code.

Why We Switched to Astro (and Why It Might Interest You) — Why did Dato CMS take their old Next 13-powered site and rebuild it with Astro? It’s interesting to see the thought process and considerations they went through.

Rockpack 5.0: An Alternative React App Starter — A tool aiming to get React project setup time as low as possible, complete with server side rendering support, bundling, linting and testing. Think Create React App, but more. GitHub repo.

Onlook: An Open-Source 'Figma'-Style Design App for React — A new open source, local-first Figma style design app (for Windows, Linux and macOS) that targets React use cases. You can design layouts directly on a live page and instantly write your changes to code. Early days but looks very promising. GitHub repo.

🦋 react-bluesky-embed: Embed Bluesky Functionality in Your App — A lot of folks think social microblogging site Bluesky is ‘having its moment’. If you’re one of them, you can now embed that functionality right into your own app.

Verification Input: Customizable, Masked Input Component — Check out the demos on the homepage, but this is well suited for entering OTP codes, certain types of password, and the like. GitHub repo.

Component Testing RSCs with Storybook — Testing server components can be tricky because they span the frontend/backend divide, but Storybook offers a way and here’s how.

Introducing <Waitlist/> Mode - A Virtual Queue for Your App — Waitlist is a new sign-up mode and component that lets users register interest and join a waitlist for early access to your product. Manage user access and onboarding all within your Clerk Dashboard. Read our changelog announcement for more details.

📉 How To Improve 'Interaction to Next Paint' in React — Interaction to Next Paint (INP) is a common Web performance metric based on the latency and responsiveness of an app to user interactions, and Google even uses it as part of its ranking mechanism. Jacob offers up lots of advice and resources for improving your INP situation in React apps.