React Advanced 2025

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.

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.

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.

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. 

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.

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.

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!

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!

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:A quick history of 3D on the webThe current state of the React Three ecosystemGetting started live by building a XR react appThe role AI can play in building 3D experiencesWhy 3D is becoming a frontier for expressing your creative and engineering skillsWhether 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.

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.

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 & React Native are a great fit for revolutionizing how game UI are built.

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.

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

Astro islands are a powerful primitive that allow you to take your statically rendered content, and gradually add interactive components as you go. Discover what client directives can do, when to use them, and how to communicate state between your islands effectively.