Bookmarks (131)

Superglue 1.0: A Way for React to ❤️ Ruby on Rails — Superglue is a library for bringing Ruby on Rails and React closer together in a way that feels as natural as Rails’ default Hotwire and Stimulus-based approach to the frontend.

Protect Against Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

react-nil 2.0: A React 'Null Renderer' — An interesting experiment to use React in situations where you don’t need it to render anything, but you want to use hooks, suspense, context, and other bits of the React lifecycle. Like in, say, a Node app. Maybe this CodeSandbox example will provoke some ideas.

Accessibility Essentials Every React Developer Should Know — If you’re an experienced frontend developer, these might be second nature to you by now, but this is a good roundup of the entry level ‘table stakes’ for frontend accessibility.

Write CSS Like a Pro — Kevin Powell shares how to create a responsive website from scratch using modern CSS features (such as nesting, utility classes, custom properties, and more). This detailed video course also dives into adding additional polish via animations, view transitions, and more.

Five Years of React Native at Shopify — Five years ago, Shopify said React Native was the future for mobile development at their company and they really meant it with every mobile app moving to RN over time. Here’s what they learnt along the way and why they’re sticking with it.

An Early Look at React's Experimental Animations API — <ViewTransition /> is based on the powerful browser-based View Transition API (unsupported in Firefox for now). It’s only in pre-release versions of React so far, but Matt comes armed with examples and demos for you to get an early feel for the potential.

Building a React Login Page Template — Discover how to create a seamless React login page template with session-based authentication. Enhance your app's security and user experience using react-router-dom for efficient route protection.

Introducing TanStack Start — Imagine if the folks behind TanStack Router, Query, etc. realized they had all the pieces to create a full-stack React framework: that’s TanStack Start. You get full-document SSR, streaming, server functions, and more, out of the box. Could 2025 be TanStack Start's year? Maybe!

You Don't Need Next.js — As much as Next.js is considered the React meta-framework of choice, if your requirements are modest, simply going with plain React has numerous benefits in terms of simplicity and speed. This post looks at a real example and the tradeoffs made.

react-error-boundary 5.0: A Reusable Error Boundary Component — Supporting all React renderers (including React DOM and React Native), you can use this to wrap components and then ‘catch’ errors and render a fallback UI as appropriate.

Docusaurus 3.7: The Docs-Oriented Static Site Generator — The big update for the popular React-powered site generator is React 19 compatibility and all new Docusaurus sites will use React 19 out of the box. And, if you’re using SVGR to seamlessly import and use SVG files as components, you can now more easily configure SVGR to your needs.

React-Toastify 11: In-Page Notifications Made Easy — There’s an elaborate demo page here but essentially it’s a flexible, easy to style and customize ‘toast’ style notifications system. GitHub repo.

React-Leaflet 5.0: React Components for Leaflet Maps — Leaflet is a popular JavaScript library for creating interactive maps. This library brings support direct to React 19.

Smarter Tools and Best Practices for Mobile Debugging — Join our hands-on workshop to explore practical strategies and tools for React Native debugging.

Five Tips to Effectively Optimize INP in React Apps — Experience-informed recommendations for optimization techniques to improving performance with specific focus on the Interaction to Next Paint (INP) metric.

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.

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!

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.

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.

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.

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..

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.

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...

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.

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.

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.

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.

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.

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.

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.

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.

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.

📉 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.

🦋 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.

Radon IDE 1.0: An IDE for React Native Development — Formerly known as React Native IDE, Radon is an extension that significantly extends either VS Code or Cursor into a fully fledged IDE for React Native (and Expo) development. It is a paid product, however, but all the money is funneled back into open source React Native development and the feature set might convince...

MUI X 7.23.0: Advanced React Components for Complex Use Cases — We’ve diligently linked to each new release of this popular suite of React components, but never featured it “properly”, so it’s about time we did! MUI X is a well rounded suite of professionally designed and MIT-licensed components. v7.23.0 improves the data grid component and adds full React 19 support.

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.

React Data Fetching Patterns — Not about how to fetch data in React apps, but some common patterns to structure said fetching.

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.

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.

TinyBase v5.4: A Reactive Data Store for Local-First Apps — A powerful reactive data store you could essentially use as the entire backend of your app. v5.4 ups the ante with a WebSocket synchronization server that runs on Cloudflare Durable Objects.

React Swipeable: Swipe Event Handler Hook — Customizable, lightweight hook that provides all the information needed to manage swipe interactions. GitHub repo.

🩻 dwv-react: A React DICOM-Format Medical Image Viewer — DICOM is a standard for distributing medical images, such as from CT or MRI scans.

▶  Building a Teleprompter App in 30 Minutes with AI — Building apps with AI powered tools isn’t that unusual nowadays, but if you’ve never seen the process, this is a good look at the process all the way through to deployment. He uses Vercel’s v0, Replit and Cursor.

Tremor: React Component Suite for Dashboards and Charts — Built with React, Tailwind CSS, and Radix UI, you can use Tremor by either copy and pasting the components or via their npm package. You get all the typical dashboard UI elements like charts, progress indicators, activity trackers, accordions, tables, etc.