Bookmarks (133)

What Does 'use client' Do? — Dan continues his recent stream of insightful posts with a shorter, more practical look at how to think about the use client and use server directives React Server Components introduced and how they let you elegantly structure a client/server app as “a single program spanning two environments” – a concept that Dan thinks could easily outlive React and...

New Course: Next.js Fundamentals, v4 — Master Next.js with Scott Moss. Learn React Server Components, Server Actions, dynamic routing, authentication, caching, and edge functions. Create a modern React app, deploy it to Vercel, and level up your skills.

The Mega April React Labs Update — Every once in a while, the React team drops a ‘Labs’ post where they bring us up to speed with some major new features and what the team is working on. Here, we learn about two new features ready to try out today in react@experimental: View Transitions and the <Activity> component. There are several other features in...

Yet Another React Lightbox — Works with React 16.8+, 17 and 18, supports numerous input methods, preloads images, supports video slides, zooming, and a high level of customization and there’s an online playground so you can see how it (sc)rolls. GitHub repo.

Reactylon: A React Framework for XR — A framework that builds upon Microsoft’s Babylon.js 3D engine and React to offer a way to create immersive extended reality experiences on the Web. Write 3D scenes in JSX and Reactylon makes them a (virtual) reality – the docs include numerous live demos with code. GitHub repo.

What Engineers Get Wrong About Communication — Learn and avoid mistakes like forgetting about your users and hoarding information.

🤖 react-native-ai: On-Device LLM Execution in React Native — Provides first-class compatibility with the Vercel AI SDK, allowing you to use familiar functions like streamText and generateText but with locally run models.

Storybook 9 Beta — A strong step forward for the popular UI ‘frontend workshop’ with numerous experimental features from Storybook 8 becoming stable. v9 has a strong focus on component testing with interaction, visual, and accessibility testing out of the box. React Native support is another big win.

React Compiler Enters Release Candidate Stage — With a plan first unveiled in early 2024, React Compiler has been undergoing a lot of development since and is now here in a ‘stable and near-final’ form, pending a final release in the coming months. The team has also been collaborating with the swc project and experimental swc support is included as part of this release.

ChartDB: Open Source Database Schema Diagram Editor — Create a new schema from scratch or quickly import your existing one. Supports Postgres, MySQL, SQL Server, SQLite, and more, and is built using React. You can deploy it for yourself or try an online demo here. AGPL licensed.

React Three Map 1.0: Bring 3D Objects into 2D Maps — A bridge between React Three Fiber with react-map-gl that can result in intriguing results like this.

Spectacle: Create Sleek React-Powered Presentations — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, add interactive elements, scrollable code blocks, graphics effects, and more.

Frimousse: A Lightweight, Unstyled, and Composable Emoji Picker for React — The picker is accessible and won’t display any emojis that aren’t supported on the device. You can explore some demos here.

Unbork Your Laravel App (Live) — Laravel is so in right now. Join us for a hands-on session using a demo app to track errors, replay sessions, trace slowdowns, and maybe even let the robots help. RSVP here.

Tailwind vs Linaria: A Performance Investigation — Linaria offers a way to write CSS directly in JS but get real CSS files at build-time.

Impossible Components — Dan Abramov continues with his series of ‘big picture’ posts with a look at the idea of so-called ‘impossible’ components that mix server-only and client-only features and how React Server Components can help bridge that divide, culminating in an example you can experiment with for yourself.

Agent Hooks: Hooks That Bring Agents Into Your App — You could wire this sort of thing together yourself, but it provides an interesting abstraction.

RedwoodJS Evolving into Redwood GraphQL and RedwoodSDK — The full-stack React-based framework is shaking things up with the existing GraphQL-oriented framework becoming Redwood GraphQL and RedwoodSDK being a more general app abstraction set to be explained properly in the coming weeks.

Advanced React in the Wild — A round-up of case studies showing how five different engineering teams have pushed React to the limit in production and their real-world wins in areas like performance, Core Web Vitals, caching, and more. A lot to enjoy here!

JSX Over the Wire — Dan Abramov builds on last week’s epic React for Two Computers with thoughts on the evolution of passing data from server to client, contrasting traditional REST endpoints with a BFF approach that builds screen-specific ViewModels mirroring React’s component tree. An enjoyable train of thought for anyone interested in how and why client/server apps are organized the way they are...

React Day: Free Online Event with Expert Talks on Modern React — Join Frontend Nation’s React Day on April 29 - a FREE online event with top experts like Kent C. Dodds, Tejas Kumar, & more. Get real-world insights into performance, UI for AI, & modern frontend techniques. Get your free ticket now.

Fastify + React – 7x Faster than Next.js? — Node’s Fastify framework has a mature plugin for Vite integration (explained in detail here), including @fastify/react which just hit version 1.0 and makes it easy to create fast, featureful (though obviously less so than Next.js) React apps atop Fastify. How fast? Very, it seems.

Creating an AI Chat Experience with React and OpenAI — If you’d rather create your own streaming chat UI for OpenAI’s models (such as for the new API-only GPT 4.1 models) Robin has some pointers for getting started.

react-photo-sphere-viewer: A Component to View Photo Spheres — This is one of those cases where a live demo is valuable. It’s basically a way to navigate specially-taken 360 degree photos (think Google Street View - kinda).

Konva: A JavaScript 2D Canvas Library — The native Canvas API is good, but Konva is an abstraction that sits on top and provides a more structured way to work with shapes, styling, events, and animations (demos with code). It also has extra integration libraries for Vue, Svelte and React.

React for Two Computers — Dan Abramov returns to some deep thoughts that arose while putting together the popular ▶️ React for Two Computers talk he gave at React Conf 2024. You’ll need a very large coffee to make it through this post in one sitting, but it’s a technically-rich meditation on the architecture and theory underpinning ideas like React Server Components.

React Reconciliation: The Hidden Engine Behind Your Components — React’s reconciliation algorithm is the process by which React knows how to update the DOM based on changes to the virtual DOM and understanding how it works is essential for producing fast, efficient apps. A great look behind the scenes.

Deploy Your Next.js App to Cloudflare Workers with the Cloudflare Adapter for OpenNext — OpenNext is a build tool that transforms Next.js apps into packages optimized for development on platforms including AWS Lambda, Cloudflare Workers, and Netlify.

Accelerating Large-Scale Test Migration with LLMs — How Airbnb completed its first large-scale, LLM-driven code migration in moving from Enzyme to React Testing Library.

React Native 0.79: Faster Tooling and Much More — Metro, the React Native bundler, now starts much faster and makes package.json exports and imports field resolution stable. Android app startup also gets significantly faster.

Fancy Components: A Growing Library of Ready-to-Use Animated React Components — Includes a whole slew of components for doing various text animations, along with others for backgrounds, physics-related animations, SVG filters, and more. Try them out here.

React Email 4.0: Components for Creating Emails — React Email is a suite of unstyled React components for creating elegant emails. Now includes a new linting tool for analyzing links in outgoing emails, a spam scorer, and email client HTML/CSS compatibility checker, as well as a few new components.

TinyBase v6.0: A Reactive Data Store for Local-First Apps — We’re huge fans of this powerful reactive data store that can be used as the entire backend for many types of app. v6.0 adds no new functionality but brings React 19 support and goes ESM-only. It’s well worth investigating and has some compelling features - check out the homepage for more.

Learn How to Integrate Clerk with Your Lovable — Lovable integrates Clerk for custom domains, streamlined auth flows, and waitlist-powered onboarding.

JavaScript's Missing Link: Wasp Offers Full Stack Solution — A nice overview of what the Wasp team is trying to do in building a full-stack webapp framework around React, Node, and Prisma. It’s an increasingly powerful option if you’re looking for a more traditionally feeling full-stack approach.

React 19.1 Released — Not cool enough to get a full blog post on the official blog, but 19.1 brings a lot to the table in terms of fixes, small additions (e.g. support for streaming in edge environments), a new API for prerendering RSCs on the server (as supported in Parcel 2.14.0), and enhanced Suspense support. The headline feature, though, is ‘Owner Stacks’, a...

Svggles: A Way to Make SVGs More Interactive with React — Connect an SVG to a React component and add ways to enable visual interactions such as glow effects, animations, and pointer based effects. GitHub repo.

Next.js 15.2.3 Released Due to Security Vulnerability — This past weekend, a new version of Next.js was released to resolve a serious security vulnerability, which could allow the skipping of middleware (including that used for authentication). Self-hosted Next.js deployments need to be upgraded immediately. The news led to a lot of responses from extensive HN threads to deep dives into the vulnerability, and criticism...

Gemini: Google's AI App Adds 'Canvas' Mode for React Devs — Gemini is essentially Google’s answer to ChatGPT and now has a developer ‘canvas’ mode which can be used to create, iterate, and preview React and HTML code right in the browser. It’s free at a basic level, too, so if you have a Google account, you should get straight in.

Master Chrome's DevTools — Join Jon Kuperman for this video course diving into Chrome's DevTools. You'll go beyond console.log(), learning how to inspect, debug, and audit your web apps — tracking performance, identifying bottlenecks, making performance gains, and more. Level up your DevTools skills.

react-anchorme 5.0: Links Up URLs and Emails in Text — A component that uses Anchorme.js to detect linkable elements in text and create the links for them. Now supports React 19.

React Cookie Manager: A Customizable Component for Cookie Consent — A well-documented solution that will automatically block tracking if necessary and can easily be customized. You can try the live demo here, which is also an interactive page demonstrating its features.

json-edit-react: Component to Edit and View JSON/Object Data — An elegant, well presented component to take a JavaScript object, complete with nested objects, and show off the values, as well as allowing users to edit them. Has a neat demo on the homepage showing how flexible it is. GitHub repo.

Deploying a Next.js App to Production on Any Server — A popular article from last year that’s been updated for 2025 and Next.js 15.

▶  React Query API Design: Lessons Learned — You might know Dominik for all his work on React Query, TanStack Router, and his epic React Query - The Bad Parts series. Here, he walks us through the design choices made while building React Query and shares lessons and mistakes valuable to anyone building their own libraries. (30 minutes.)

A shadcn/ui + Tailwind v4 Dashboard Example with Code — The shadcn/ui team has open-sourced an app they built to test Tailwind v4 and React 19 support. It’s a dashboard supporting custom themes, colors and scaling, along with a neat, flexible data table. The code is here.

Bright: A React Server Component for Syntax Highlighting — Customizable and includes all of VS Code’s syntax highlighting themes, some of which are demonstrated on the page.

Typist 8.0: Tiptap-Based Rich Text Editor Component — Simple and opinionated. You can try several examples linked in the sidebar. Well suited for basic rich text situations like writing comments or messages and has a single-line mode. GitHub repo.

Meet the AI Coding Assistant Built for React — Augment gets your components, hooks, and state management. Ask anything about your frontend.

SSR Deep Dive for React Developers — Explore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.