Name: React Advanced 2025
Start: 2025-11-27T23:00:00.000Z
End: 2025-12-01T22:59:00.000Z

Most "generative UI" today is little more than glorified tool calling of premade components. Most people are not willing to experiment with truly generated experiences on the fly out of a fear of lack of familiarity and not wanting to create unreliable/unstable UIs for users. This is a skill issue. Let me show you how.

The Real Potential of Generative UI

Shawn Swyx Wang

In this workshop, we'll go beyond the fundamentals and explore some of the more powerful features React Query has to offer. You'll gain a deeper understanding of how it works under the hood and learn how to write scalable, maintainable React Query code.Together, we'll build a simple example app and incrementally enhance it with one core objective in mind: delivering the best possible user experience. That means snappy interactions, minimal layout shifts, and avoiding unnecessary loading spinners wherever we can.To achieve this, we'll dive into advanced techniques like various forms of prefetching (including integration with route loaders), seeding the query cache, crafting smooth paginated experiences, and even persisting query state through full page reloads using persistence plugins.Note: You should have prior knowledge about React Query if you attend this workshop.

React Query - Beyond the Basics

Dominik Dorfmeister

Traditional chat interfaces only return text, but what if your AI assistant could render custom React components directly in the conversation? In this lightning talk, we’ll explore generative UI - where chat applications stream contextually appropriate React components instead of plain text responses. When users ask about sales data, they get interactive charts. When they search for properties, they get rich product cards. Through code examples, you’ll see how to build chat interfaces where AI intelligently selects and renders React components populated with real-time data from semantic search and vector databases. You’ll walk away with practical patterns for implementing this technique and understanding how modern data platforms enable these dynamic, visual conversational experiences that go far beyond simple text responses.

Beyond Chat Bubbles: Building React Apps Where AI Generates Your UI

Jesse Hall

It's easy to forget what the creators of React knew from the start: that React is not only for building web pages. Most of us have heard of React Native, that renders to native mobile components, but React doesn't have to render to "components" at all. There's React PDF to generate PDFs and Ink for building UI in the terminal.At my company, we've built a way for developers to use React to build plugins for our webapp that render to our custom components, giving us full control over the UI design (the "how"), whilst giving the plugin developer full control UX (the "what").In my talk, I'll explain what it's like to build a React renderer and reconciler, what they are and how to use them.I'd like to do a live demo showing how React can be used to convert html to markdown. And then I'd like to demonstrate how React can render to the Real World, by controlling IOT devices.

React Beyond the DOM

Erik Rasmussen

Getting to a production-ready React application is about more than just choosing a framework. To ship features efficiently, developers need a reliable pipeline that can handle everything, from linting to bundling, as quickly and accurately as possible. In this talk, we will explore how modern tools like Rolldown and Oxc can speed up your development workflow, how they can help in your project today and what is planned for the future.

Rust Meets React: Diving Into the Next Generation Build Pipeline for React Apps

Alexander Lichter

In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework (aka Remix) along with React's new "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.

Modern React Architecture

Brad Westfall

The tech sector has an elephant in the room: we use too much energy. In 2024, the World Bank estimated the internet to account for 1-4% of global greenhouse emissions, similar to aviation. The good news is: there are documented and measurable opportunities to improve. From code to infrastructure. In this talk, we’ll look at best practices from the W3C’s new Web Sustainability Guidelines and beyond, focusing on lessons you can apply today.

The Future of the Web Is Green: On the Web Sustainability Guidelines

Hidde de Vries

We keep hearing that React Server Components (RSC) are the future. And that they're supposed to be the best for performance. And just the best in general. But how valid is that claim? Let's measure and find out!To do this, I went slightly crazy and implemented one app in three different ways: using Client-Side Rendering (CSR), Server-Side Rendering (SSR), and React Server Components (RSC). Then, measured the difference. And now ready to show it to you.In this talk, we'll take a look at what initial load performance is, how to measure it, and what's the difference between rendering patterns: from the implementation perspective, differences in performance graphs, and in terms of actual performance numbers.

I Measured React Server Components’ Performance So You Don’t Have To

Nadia Makarevich

By treating documentation as React building blocks, we can generate a one‑page README, an interactive API reference, or a fully branded design‑system site from the same source of truth.The result is always‑accurate API documentation, MDX pages, and interactive examples that stay updated every time you push code, no more stale documentation or forgotten types. I’ll show how React Server Components fits perfectly into making it easy to have accurate, up-to-date documentation as extensible as any UI.

Composing Documentation

Travis Arnold

Server-side rendering (SSR) is back in the spotlight – and React is evolving fast. In this workshop, we’ll go deep into the mechanics, performance trade-offs, and modern techniques of SSR with React.js. You'll start by building an SSR app from scratch – no frameworks, just raw renderToString and hydrateRoot—to truly understand how React renders on the server and hydrates on the client. From there, we'll upgrade to React 18’s streaming capabilities using renderToPipeableStream, implement selective hydration using Suspense, and integrate data fetching directly into the server render cycle. We’ll look at React Server Components (RSC), showing how they complement SSR. We'll also cover hydration strategies, how to prevent mismatches, and how to cache or stream HTML effectively for real-world performance. Finally, we’ll bridge our manual SSR work into production frameworks like Next.js.

Exploring Server Side Rendering

Krasimir Tsonev

There are many ways to manage state in modern React applications, but the URL itself is a powerful hidden state manager that’s often overlooked.This talk introduces `nuqs`, a library that simplifies URL state management in React. We’ll explore the benefits this approach: shareability, history navigation, and declarative client-server interaction.Through a live demo, you’ll learn how to migrate from React.useState to nuqs’ useQueryState while we navigate concepts like client-only vs server-aware search parameters. We’ll also cover good practices for type-safe, pretty URLs, and how to avoid common pitfalls such as browser rate limits and URL size constraints.If you’ve ever wondered what state belongs in the URL, and how to scale it, this talk will give you the answers.

Type-Safe URL State Management in React With nuqs

François Best

In this hands-on talk, I’ll build a simple app for iOS, Android, and the web—then monetize all three platforms in just 20 minutes. Using React Native, Expo, and RevenueCat, I’ll demonstrate how easy it is to create monetized apps today.

Building & Monetizing a React Native App for Three Platforms in 20 Minutes

Perttu Lähteenlahti

Handling async operations in UI components can be tricky – flickering pending states, inefficient state updates, and unstable user experiences are common issues. Building accessible UI components presents additional challenges, as meeting accessibility requirements often requires extra effort, which can add complexity to the development process.In the context of the Next.js App Router, this session will demonstrate how React Server Components streamline data fetching, while other React 19 tools help manage mutations, loading states, and optimistic updates more effectively. We’ll combine these with Ariakit to simplify the process of building interactive, accessible UI components with less boilerplate. You’ll leave with practical strategies for managing async operations while ensuring a smooth, reliable user experience.

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Gain insights into optimizing server-side rendering, enhancing application interactivity through Server Actions and React 19 hooks, and mastering form creation for robust data handling and validation. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Hands-on React Server Components, Server Actions, and Forms

In this workshop, we will build our first AI Agent – completely from scratch. We will cover the fundamentals of LLMs, explore Retrieval-Augmented Generation (RAG), and learn how to use function calling to connect AI with external tools.By the end, you will have a working AI agent that can autonomously decide which functions and data sources to use. No prior AI experience is required, but basic knowledge of TypeScript is recommended.After this workshop, you will be able to...<ul><li>Understand how Large Language Models (LLMs) work and how they process and generate text.</li><li>Leverage LLMs for specific tasks by designing prompts and integrating them into applications.</li><li>Implement Retrieval-Augmented Generation (RAG) to enhance AI responses with external knowledge.</li><li>Use function calling in AI systems to interact dynamically with APIs and data sources.</li><li>Build an AI agent that autonomously selects the right tools and data to complete user tasks efficiently</li></ul>Who is this workshop for?No prior knowledge of Artificial Intelligence is necessary, as we’ll cover all the essential concepts during the workshop.We’ll build the AI agent in a React app, but the core logic will be framework-agnostic and written in TypeScript.

Getting Started With AI (-Agents) in the Browser

Nico Martin

In the TV series Knight Rider, the concept of an intelligent car was pure sci-fi. Over 40 years later, we now have the tools to bring it to life - purely in the browser. This talk explores combining AI techniques like RAG and function calling with advanced browser APIs (e.g., WebBluetooth) to create a browser-based AI agent with personality, memory, and autonomy, powered by WebAssembly and WebGPU - fully offline and privacy-preserving!

Let’s build K.I.T.T. With JavaScript

Much like the promise of cake in Portal, login forms are everywhere in web development. While they may seem functional at first glance, many users with disabilities encounter a maze of invisible walls, from keyboard traps to inaccessible CAPTCHAs. It's as if GLaDOS designed these forms herself to test us! In this practical session, we will debug the accessibility issues of a real React login component live, similar to traversing those test chambers: Using an actual screen reader, we'll show how minor improvements, such as proper ARIA implementation and effective focus management, can transform a complex test chamber into a smooth user experience. Additionally, we will address the common pitfalls that GLaDOS might throw at us in both the Portal universe and the real world of accessibility, especially concerning authentication processes and its special needs as written down in the WCAG. So grab your portal gun—let's work together to break down these barriers and ensure that authentication truly works for everyone. The cake might be a lie, but accessibility doesn't have to be!

The Cake Is a Lie... And So Is Your Login’s Accessibility

Ramona Schwering

Much like the promise of cake in Portal, login forms are everywhere in web development. While they may seem functional at first glance, many users with disabilities encounter a maze of invisible walls, from keyboard traps to inaccessible CAPTCHAs. It's as if GLaDOS designed these forms herself to test us!In this practical walkthrough, we will debug the accessibility issues of a real React login component live, similar to traversing those test chambers: Using an actual screen reader, we'll show how minor improvements, such as proper ARIA implementation and effective focus management, can transform a complex test chamber into a smooth user experience. Additionally, we will address the common pitfalls that GLaDOS might throw at us in both the Portal universe and the real world of accessibility, especially concerning authentication processes and its special needs. So grab your portal gun—let's work together to break down these barriers and ensure that authentication truly works for everyone. The cake might be a lie, but accessibility doesn't have to be!

3D on the web is no longer just about fancy tech demos — it’s now used to build high-quality tools, visualizations, games, and immersive experiences. In this talk, we’ll explore why, what, and how to build production-ready 3D web apps with React in 2025 — and whether AI can help. What we’ll cover:<ul><li>A quick history of 3D on the web</li><li>The current state of the React Three ecosystem</li><li>Getting started live by building a XR react app</li><li>The role AI can play in building 3D experiences</li><li>Why 3D is becoming a frontier for expressing your creative and engineering skills</li></ul>Whether you're just curious about 3D or already building apps with the React Three ecosystem, this talk will show you what’s coming, what’s already possible — and how to get started with React and 3D.

Building 3D Web Apps in 2025 – React, XR & AI?

Bela Bohlender

React’s styling landscape is evolving fast. With Server Components, Tailwind v4, and the next era of CSS standards, our old habits need an upgrade. In this talk, we’ll put CSS Modules, Tailwind CSS, and CSS-in-JS to the test against real-world demands like server-side rendering, streaming UI, scalable theming, and runtime performance. You’ll learn how styling choices impact payload size, async behavior, and design system consistency at scale. We’ll break down hidden trade-offs between utility-first, scoped CSS, and runtime CSS-in-JS approaches. Expect a practical decision-making framework you can apply immediately to your projects, one that balances developer experience with production performance. You’ll leave with a modern roadmap for building React apps that are styled to last.

Rethinking React Styling for the RSC Era

Bree Hall

I will go in depth describing a brand new integration of React Native into Unreal Engine. Gaming has long been lagging behind mobile and web in the ease of building a good UI , especially for data heavy games. The gaming world has long embraced the idea of web - games like Civilization 7 launch with fully Web UI by embedding a specialized browser. I think React &amp; React Native are a great fit for revolutionizing how game UI are built.

React Native as a Gaming UI System in Unreal Engine

Danny Povolotski

Micro Frontends are one of the tools to ensure scalability in large-scale applications. To properly use micro frontends some of the key properties of a monolith need to be given up. This can result in severe drawbacks that are especially visible in regulated industries such as healthcare.In this talk we'll look at a large-scale web application that was developed for one of the world's leading medical technology suppliers. In particular, we investigate how the project managed to use best practices of both, the centralized and distributed computing area, to be scalable yet fully compliant to regulatory aspects.

React-First Micro Frontends in Regulated Industries

Florian Rappl

SSR, Core Web Vitals, and accessibility sound familiar? If you're struggling with these aspects of web development, you're not alone!But what if the key to tackling them was already open on your screen? Yes, Chrome DevTools can be your best friend!In this talk, we'll dive into practical ways to use your favourite browser to find performance issues, fix tricky accessibility mistakes, and improve those Web Vitals scores.Learn how to turn DevTools insights into tangible improvements. Are you ready to make your browser your next teammate?See you there!

Chrome DevTools, for Super Fast SSR Applications!

Luca Del Puppo

Node.js was announced in 2009 as a single-threaded JavaScript runtime. In 2018, it became multi-threaded, and no one noticed.What can worker_threads do? What are they useful for? What's the best way of communicating between two threads?

Node.js: More Threads Than You Think

Paolo Insogna

Ever wondered how React Native DevTools work under the hood? I went down the rabbit hole, reverse-engineered the whole thing, and figured out how to inject custom code - no forks, just a bit of hackery. In this talk, I’ll walk you through the journey: how the DevTools architecture works, how I hooked into it cleanly, and how that led to building a framework for writing your own plugins, complete with React-based UIs and sandboxed execution. Let’s make DevTools truly extensible.

How I Hacked React Native DevTools (And Built a Plugin Framework)

Szymon Chmal

LLMs are not just fancy search engines: they lay the ground for building autonomous and intelligent pieces of software, aka agents. Companies are investing massively in generative AI infrastructures. To get their money's worth, they need developers that can make the best out of an LLM, and that could be you. Discover the TypeScript stack for LLM-based development in this 3 hours workshop. Connect to your favorite model with the Vercel AI SDK and turn lines of code into AI agents with Mastra.ai.

Build LLM agents in TypeScript with Mastra and Vercel AI SDK

Eric Burel

Next.js applications of today struggle with an architectural contradiction: entire routes must be either fully static or fully dynamic, forcing developers to sacrifice performance for freshness or vice versa. This all or nothing approach leads to redundant computation, increased costs, and slower user experiences.In this session, we'll explore Cache Components — an experimental Next.js feature that introduces function-level caching through the `'use cache'` directive. Building on React's streaming capabilities and Partial Prerendering infrastructure, we'll demonstrate how to achieve granular control over what gets precomputed into static shells versus what streams dynamically. You'll learn practical patterns for common scenarios like expensive computations, real-time data requirements, and the sophisticated middle ground between them. We'll examine production migrations showing improved compute cost reductions and reduced Time to First Byte from global edge locations.You'll leave with a new mental model for caching—not as a performance afterthought, but as a first-class architectural decision that lives alongside your components. Instead of choosing between "static" or "dynamic" routes, you'll understand how to compose cached and streaming content within the same component tree, creating applications that are both performant and architecturally honest about their data requirements.

From Segments to Suspense: The Future of Next.js Caching

Wyatt Johnson

A case study explores the Streaming company's journey of building automated testing layers within a complex, multidimensional React monorepo and achieving quality contribution feedback within minutes.

Fast-Tracking Quality for Hundreds of React Applications With Automated Testing Layers

Bogdan Plieshka

We're an industry that solves impossible technical challenges, builds systems serving billions, and automates the world - yet we haven't figured out how to sit at a desk without destroying our bodies. I learned this the hard way: active engineer → COVID couch potato → 41-year-old developer with chronic pain. The research reveals I was just one predictable data point in a massive pattern.This isn't about being "out of shape." Within hours of sitting, arteries lose elasticity and blood pressure spikes. After one day, insulin dysfunction kicks in. Within days, 4,500+ genes rewire themselves and fat-burning enzymes shut down by 90%. Structural adaptations create "tech neck," and spinal damage now appears in children as young as 9. We're systematically breaking our bodies while building the digital world.Here's what shocked me most: exercise can't save us. You can't out-train 8 hours of sitting damage. The solution isn't better ergonomics - it's a complete mental reframe of how we work and live as developers. I'll share the latest research and specific strategies that can shift your trajectory from inevitable decline to sustainable vitality. Because the alternative isn't just pain - it's a future where we can't move freely through life at all.

Shifting the Trajectory: Undoing the Damage of Working in Front of a Computer Screen

Georgios Diamantopoulos

This hands-on workshop teaches developers how to build privacy-first, on-device AI applications using React Native and Apple’s Foundation Models. Participants will implement real-world LLM features like text generation, streaming responses, and structured outputs with type-safe schemas.Goals:<ul><li>Understand on-device LLM fundamentals and trade-offs</li><li>Set up React Native with Apple’s new Foundation Models</li><li>Build a sample app using text generation and streaming responses</li><li>Integrate structured outputs and experiment with schema validation (Zod)</li><li>Explore advanced topics like adapters, privacy, and Vercel AI integration</li></ul>

On-Device LLMs with Apple Intelligence and React Native

Pawel Sawicki

This talk explores how to effectively run React Server Components (RSC) in highly available Kubernetes clusters. It covers the shift toward a Full Stack Experience in modern React development, where components interact directly with databases, caching layers, and messaging systems. You will learn practical strategies for caching dynamic data, managing server actions, and deploying RSC at scale with Kubernetes. The session also includes real-world lessons on avoiding common pitfalls.

React Server Components in Kubernetes: Ship Happens

Jan Peer Stöcklmair

Master real-time communication in React and React Native! We'll explore WebSockets, WebRTC, and the future with WebTransport to build highly interactive, live applications across web and mobile platforms.

React Realtime: From Sockets to Streams (Web & Native)

Violina Popova

The original Final Fantasy IX was a masterclass in creative constraint – pushing the PlayStation’s hardware to its limits with tricks like pre-rendered backgrounds and low-res models. In this talk, Joe Hart recreates the magic in React, diving into WebGL, canvas positioning, and CSS hacks that should probably be illegal. It’s part love letter to retro games, part deep dive into browser APIs, and part performance art.

Final Fantasy IX in React: Fighting the Browser, One Frame at a Time

Joe Hart

A few lines of code and UI theme will follow any colour that you want. Do you want it? Explore the OKLCH colour space for creating dynamic themes! This colour model ensures better a11y, predictable color transformations and supports the wide-gamut P3 colors. When it comes to changing colours by code, RGB, HSL, or LCH can lead to low contrast and poor accessibility; but OKLCH is specifically designed to avoid unexpected results with colour transformations. This talk will guide you on implementing dynamic themes using OKLCH in your React project along with Tailwind CSS, helping you automatically generate accessible palettes with vibrant, accurate colours.

Automatic and Accessible Dynamic Themes With OKLCH Color Space

Nina Torgunakova

Craft immersive XR educational experiences through declarative 3D rendering with this advanced workshop. Leverage React Three Fiber's component-based architecture to build a gamified solar system explorer featuring dynamic orbital mechanics, interactive raycasting, and WebGL optimizations. Master performance-critical techniques including InstancedMesh implementation, reactive state management, and WebXR integration while creating engaging STEM visualizations. This workshop bridges theoretical physics concepts with practical front-end development, demonstrating how Three.js can transform educational content through spatial computing paradigms.Agenda:<ol><li>Introduction to React Three Fiber and Three.js: Setting up the project environment</li><li>Building the Solar System Scene: Creating planets, orbits, and space backgrounds with animations</li><li> Interactivity and Gamification: Raycasting for object selection and interaction</li><li>Performance Optimization: Using InstancedMesh for efficient rendering</li><li>WebXR Integration: Enabling AR/VR experiences in the browser</li></ol>

Gamified 3D Solar System Explorer: An Interactive Learning Journey with Three.js

Houda Mouttalib

This workshop bridges the long-standing gap between React developers and production-ready delivery. Many front-end developers know how to build great interfaces but they stumble when it comes to building, testing, deploying, and monitoring those apps in real-world environments.This workshop gives React developers the DevOps superpowers they need.You’ll learn how to:<ul><li>Dockerize your React application for development and production following best practices from Docker Captain Leader.</li><li>Build scalable CI/CD pipelines using GitHub Actions</li><li>Optimize your apps for performance and reliability</li></ul>This is not theory. It’s not a shallow overview. This is a production-focused, real-world workshop by a front-end developer who lives and breathes this every day.

DevOps for React Developers: From Code to Production

Kristiyan Velkov

Which state library is the right choice for your app – Redux, MobX, Zustand, Jotai, or no state manager at all? In this talk, we’ll compare them using real metrics in a realistic data-heavy app that visualises large datasets with live data charts and 3D rendering.

State Wars: Benchmarking State Management Strategies in Data-Heavy React Apps

Elina Denisova

This talk explores how to transform React components into standards-based Web Components, unlocking the ability to share UI elements across Angular, Vue, Svelte, and even vanilla JavaScript applications. While frameworks like Angular and Vue offer native support for this kind of interoperability, React doesn't – at least, not out of the box.This talk demystifies how to achieve similar results in React using supported patterns and tooling. By bridging the gap between React and the Web Components standard, we can promote true component reusability, reduce duplication, and simplify integration in micro frontends and design systems. Attendees will learn practical techniques, tooling options, and real-world benefits of this powerful architectural strategy.

Write Once, Use Everywhere: React Meets Web Components

Hadar Geva

Get ready for an annual deep dive into the latest trends in React and Web development. Learn from engineers behind the framework ecosystem and early adopters at the main React Conference in the UK.The concept of the event is both about covering all you need to catch up on in the React ecosystem, combined with deep technical exploration of the latest architectural trends, new feature adoption, and efficient ways to solve complex problems.Engage in discussion rooms, hallway track with experts, hands-on practical workshops, and tens of insightful talks. Engineers of any level are welcome but be prepared for hardcore.

React Advanced

Get ready for an annual deep dive into the latest trends in React and Web development. Learn from engineers behind the framework ecosystem and early adopters at the main <a href="https://reactadvanced.com/">React Conference in the UK</a>.The concept of the event is both about covering all you need to catch up on in the React ecosystem, combined with deep technical exploration of the latest architectural trends, new feature adoption, and efficient ways to solve complex problems.Engage in discussion rooms, hallway track with experts, hands-on practical workshops, and tens of insightful talks. Engineers of any level are welcome but be prepared for hardcore.

React Advanced 2025

FocusReactive

Hygraph

Sentry

Bloomberg

Bryntum

Cloudflare

Auth0 by Okta

Move faster with intuitive React UI tools

Sentry is essential for monitoring application code quality. From Error tracking to Performance monitoring, developers can see clearer, solve quicker, and learn continuously about their applications — from frontend to backend.&nbsp;

Enhance user authentication, simplify identity management, and provide a seamless login experience.

Level up your app's authentication with Auth0 by Okta

With 10,000+ front-end apps + one of the world’s largest JavaScript/TypeScript codebases, @TechAtBloomberg is deeply committed to using JS/TS in building the world's most trusted information network for finance pros.

React Advanced 2025

We will be diving deep