Name: React Advanced 2026
Start: 2026-10-23T08:00:00.000Z
End: 2026-10-26T22:00:00.000Z

Lera

Seungho Park

Alem Tuzlak

Violina Popova

Thibault Van den Broecke

HT Sahin

Gerson Enriquez

David Barry

Mykhaylo Ryechkin

Boris Karaivanov

Vitor Barbosa

Leesa Ward

Sanketh Kumar

Denis Radin

Tamara

Basseydou OUATTARA

Julián Parrilla Calvo

quinton sheppard

Fathima Fasna

Sean Leow

Adrian Williams

Artur Rybak

Dimitrios Tampakis

Yakovlev Eugen

eran

Va Da

Joel E.

Varun

Ben Durrant

Jessica Aguerrevere Clements

Michael Chiche

Hubert Altar

mudra

What happens when HTML steps inside the canvas? In this hands-on live coding session, we’ll explore the new HTML-in-Canvas API and the creative possibilities it unlocks. We’ll build from scratch, covering core concepts like pixel manipulation, simple effects, and basic shaders. The focus is on practical building blocks you can take and experiment with, no prior experience required.

The Web Is Fun Again! Exploring the New HTML-in-Canvas API

Amit Sheen

Building app-like UX on the web has historically meant reaching for an SPA. You ship the data layer to the browser, manage a client cache, juggle loading states, coordinate mutations, and write a lot of code to keep the UI feeling fast and fresh. The result can be great, but the cost is high, and the model gets harder to maintain as your app grows.Next.js takes a different path. Since React Server Components first landed, we’ve been working toward a way to build where each piece of your app runs where it belongs, while the mental model stays the same: components. In this talk, you’ll see how that translates into instant-feeling UX, streamed UI, fresh data, coordinated updates, caching across the stack, and strong Core Web Vitals that hold up as your product scales.xt.

What RSCs Can Do in Next.js Today

Aurora Scharff

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 along with React's "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

“Open-source is dead”, according to X/Twitter. After all, why would we need to install tons of dependencies (with vulnerabilities and supply chain attacks ramping up), when our AI agents can re-implement everything for us?To be fair, rumours of its death have been strongly exaggerated: the world still needs open-source more than ever. But the role of OSS maintainers is changing. From floods of AI slop PRs to newfound superpowers with fine-tuned agentic workflows to help with triage and maintenance, what does the job of maintainers look like at the age of AI?

Maintaining Open-Source at the Age of AI

François Best

React developers (amongst others, ofc) know one golden rule: never use dangerouslySetInnerHtml on user input. Yet, as we're integrating Large Language Models (LLMs) into our applications, we often make a fatal mistake. We're treating AI output as a trusted source. This is fine. Well, not automatically....Let’s look at OWASP LLM05 and how "Improper Output Handling" affects web security. Therefore, let's discuss examples of how safe inputs can trick models, leading to vulnerabilities such as XSS and injection attacks. By the end, you’ll learn how to be "professionally pessimistic" for AI. You’ll see how to sanitize LLM data, safely render Markdown, and manage AI-generated content. Let's approach technology with caution, I look forward to exploring this with you!

Dangerous Reactivity: Why AI Output Is React's New XSS

Ramona Schwering

For decades, frontend performance has been guided by the simple principle that faster is better. We optimize load times, reduce latency, and remove every unnecessary delay from the user journey.While building streaming AI interfaces with React, I discovered that traditional performance metrics do not tell the whole story. In AI products, users do not just experience a before and after. They experience a during. They watch responses stream in, follow reasoning traces, observe tool execution and form opinions about the system long before an answer is complete.In this talk, I want to share lessons learned from building production AI experiences, including streaming architectures, rendering strategies and real-time interfaces. We will explore why time to first token, streaming consistency and the quality of the waiting experience can matter just as much as raw speed.You will leave with practical insights for building AI-powered React applications and a new perspective on what performance means when users are watching the system think.

When Waiting Becomes a Feature: Rethinking Performance for AI Applications

Muhyideen Akindele

Last year I presented a brand new integration of React Native into Unreal Engine. This year I am taking it a step further, and to show the progress on this new approach I will show you how to create a real game UI in Unreal Engine using React Native.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.

Crafting UI for Games in Unreal Engine With React Native

Danny Povolotski

We built a product fully on TanStack Query and skipped adding a state management layer. It worked for a while, then it broke in ways we didn’t expect.This talk dives into how TanStack Query works, what we got wrong, and how to use it properly. From missing optimistic updates to confusing server and client state, we’ll break down the lessons learned and what patterns actually scale when your app grows.

How Not to Use TanStack Query

Neciu Dan

Every web app needs icons, and there are surprisingly many ways to load them: img tags, icon fonts, inline SVGs, SVG sprites, and Icon components. Most teams pick one by habit or choose what's easy. The choice affects bundle size, accessibility, caching, rendering quality, and developer experience.This talk walks through each approach, how it actually works under the hood, and what it costs you. We'll compare them, showing network requests, bundle impact, and loading speed.  We will show you a simple decision framework you can apply to your own projects; by the end, you'll know not just which option is "best," but which is right for your specific constraints.

Many Ways to Put an Icon on Screen. Which Should You Use?

Eric Fennis

React has changed a lot in the last year: React 19, 19.1 and now 19.2 brought a stable React Compiler, new hooks like useEffectEvent, the &lt;Activity /&gt; API, and better SSR primitives such as Partial Pre rendering. And moreIn this talk we’ll take a demo React app that’s full of effects, memoization and “old school” patterns, and modernize it step by step.

Modernizing Your React App: Compiler, useEffectEvent, Activity & Friends

Vitor Alencar

Agentic development feels like magic to some teams and overhyped to others. Harnesses like Claude Code or Codex have been built around the local loop, the way things have always been done: a single developer changing code before opening a PR. Inside real organizations, agents hit walls: repo boundaries that demand human attention, a lack of episodic memory across sessions and unresolved questions around trust and permissions.Fixing this requires a higher level of abstraction: the *meta-harness*. Just as meta-frameworks like Next.js or Remix let React stay simple while giving developers what they need to ship, a meta-harness keeps the agent CLI focused on its job while bringing the components teams need to be effective: <ul><li>cross-repo orchestration, testing, and change tracking for greater autonomy,</li><li>session memory that understands decisions and extracts tribal knowledge,</li><li>collaboration features for easier handoffs, reviews, shareable sessions and</li><li>security primitives like sandboxes, remote execution, and clearly scoped agent permissions.</li></ul>This talk argues that the meta-harness - a layer above any single lab or agent - is the missing piece for integrating agents into how we build software across the stack.

The Meta-Harness: Scaling Agentic Development Beyond the CLI

Max Kless

This talk is about an experiment I wanted to try and carried out. I wondered what if we gave React components self-healing properties? What if instead of developers checking Sentry for crashes and then fixing and sending it to prod, the component fixes the crash on its own at runtime? In this talk, we will discuss this exact possibility and whether we can really make it work and what the drawbacks are...

Self-Healing UI: Beautiful Idea, Brutal Data

Rohit Singh

You know how to build client apps—but where do client developers fit in the new world of ChatGPT and MCP? If you’ve used GraphQL before, it turns out your knowledge translates directly. This talk demonstrates how to build MCP apps using Apollo Client’s new open source AI apps integration along with the open source Apollo MCP server with patterns you already use:<ol><li>Fragment colocation → Tool design: Structure MCP tools as component data requirements</li><li>Query optimization → Tool call patterns: Minimize LLM roundtrips with the same performance thinking</li><li>Type safety → Tool schemas: Apply GraphQL’s type discipline to MCP definitions</li></ol>A live demo builds an MCP app querying a GraphQL API, showing how best practices from GraphQL client development apply to MCP apps.

Building MCP Apps With React and GraphQL Patterns You Already Know

Jerel Miller

At TAIT, we build the full automation stack behind the world's biggest live experiences, from the systems that move stages and fly performers to the React interface that operators use to control them. Our frontends can't lag, freeze, or crash while hardware is moving, or someone can get hurt. This talk covers the architecture and performance patterns behind that interface, and what it teaches us about building any React app where failure isn’t an option.

When React Meets Rock: Building Safe and Performant UI for Live Entertainment

(Erik) Lars Olson

How many times have you had to tell Claude Code to stop reaching for useEffect?React’s flexibility is a strength for developers, but it often leads AI tools in the wrong direction, introducing subtle bugs and drifting away from production-ready code without clear guidance.In this talk, Abhijeet Prasad, maintainer of Braintrust’s AI observability SDKs, shares practical ways to keep your agents on track and writing production-ready React. You will start with simple guardrails and skills that shape better behaviour, then move toward a more powerful setup: an eval pipeline that continuously improves your agents by driving updates to lint rules, skills, and agent instructions.

Teaching AI to Write Production-Ready React

Abhijeet Prasad

After spending nearly a decade building Android and Flutter applications, I became used to workflows that made it easy to understand how an application was put together. Finding the source behind a widget, understanding runtime behaviour, and navigating a large codebase felt relatively straightforward.When I started working on large frontend applications, I found myself spending far more time searching than solving. Something as simple as identifying where a UI element was implemented could involve jumping between browser DevTools, source files, network panels, terminal windows, and multiple layers of abstraction.That experience led me to start building Inspectra.This talk is a case study on the engineering challenges involved in building a modern developer tooling platform from scratch.We'll explore:<ul><li>The challenges of understanding large frontend applications</li><li>Runtime inspection and component introspection</li><li>Mapping runtime elements back to source code</li><li>Browser-to-editor communication and source navigation</li><li>Debugging inside embedded runtime environments</li><li>Design decisions, trade-offs, and failed experiments</li><li>What developer tooling can do to reduce context switching and improve productivity</li></ul>This isn't a product demo. It's a practical look at the engineering problems behind developer tooling and the lessons learned while trying to solve them.Attendees will leave with a better understanding of how modern DevTools work under the hood and what it takes to build tooling that developers genuinely want to use.

Finding the Source: Building a Better Frontend Developer Experience

Hema Sai Charan Kothamasu

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

AI can generate a React component in seconds. The hard part is changing a real React or Next.js codebase safely: knowing what is dead, where logic is duplicated, which boundaries a refactor crosses, and how a change affects the component graph or design system.Coding agents infer this from a prompt and a few open files. That works for local changes, but it misses the repo-wide context that makes larger changes risky. In this talk, Bart shows how agentic engineering changes when Fallow gives the agent deterministic facts about dead code and duplication, architecture boundaries, React hotspots, and design-token drift. The productivity gain comes from giving developers and agents the same map of the system before they edit and a reliable way to verify the result.

Agentic Engineering for React Teams: Give Your Coding Agent a Map

Bart Waardenburg

React Server Components are often treated as a framework feature, but they make more sense as a serialization format and a runtime primitive. This talk presents how that mental model changes the way we think about rendering boundaries, composition, and system design in React. Drawing on real implementation experience, I'll show why this shift matters and what it makes possible beyond the assumptions of a single framework, especially for complex systems like a <a href="https://focusreactive.com/react-cms/" target="_blank">React CMS,</a> where server-first composition and serialization directly shape how content, workflows, and UI are modeled.

React Server Components Are a Serialization Format, Not a Framework Feature

Viktor Lázár

Let an AI model patch your accessibility tree live, and the first thing it will teach you is how it fails. Not occasionally, reliably, in specific, learnable ways: confident but wrong ARIA states, patches that compile but break keyboard flow, fixes that pass an automated audit while making the actual screen reader experience worse.This talk is not a victory lap for a clever pipeline. It's the failure modes first, then the architecture that exists specifically because of them. We'll look at why static linters structurally can't catch dynamic ARIA bugs, what it actually takes to make an AI-generated accessibility patch safe to apply automatically, and the much larger lesson underneath: the accessibility tree is downstream of component state, not of markup which means most AI-accessibility tooling is analyzing the wrong layer entirely.You'll leave with a concrete mental model for the gap between markup-level and state-level accessibility analysis, a typed validation pattern for constraining what an AI agent is allowed to touch in your UI, and an honest account of where this approach still falls short because if a talk about AI and accessibility doesn't tell you where it breaks, it hasn't been tested enough yet.

Healing the Accessibility Tree: What Actually Breaks When AI Touches Your ARIA

Sulagna Ghosh

As React applications scale, asynchronous logic often turns into a source of fragility and frustration. Scattered useEffect hooks, ad-hoc retries, manual loading states, and inconsistent error handling create race conditions, memory leaks, and business logic that’s nearly impossible to test reliably.This talk introduces Effect-TS - a powerful, type-safe toolkit that brings clarity and control to async workflows in React. Instead of functional programming theory, we’ll focus on practical, battle-tested patterns that solve real production problems:<ul><li>Separating effects from execution for better composability</li><li>Typed error channels that eliminate silent failures and runtime surprises</li><li>Declarative retries, cancellation, and parallel execution</li><li>Bulletproof handling of component unmounts and stale requests</li><li>Smooth, incremental adoption in existing React or Expo codebases</li><li>Attendees will leave with concrete strategies to transform chaotic async code into logic that is predictable, testable, and maintainable - even in large, complex applications.</li></ul>

Controlling Async Chaos in React with Effect-TS

Stop prompting. Start orchestrating. In four intense hours you'll go from using Claude Code like a faster autocomplete to commanding it like a senior engineer commands a team: engineering its context, deploying fleets of subagents, locking it down with hooks, and turning it loose on work that runs without you.Every Claude Code user hits a ceiling where the easy wins run out. The agent handles small stuff beautifully, then loses the thread on anything real. The difference between that ceiling and real mastery isn't better prompts. It's control. This workshop is about control.You'll spend the whole four hours inside CLASH, a real full-stack application, handed to you fully built so nothing stands between you and the hard parts. A serious codebase is the point: it's the only place agentic engineering shows you whether it actually holds up.The throughline is context. Treated carelessly, the context window fills with noise until the agent drifts. Treated as a resource you engineer, it becomes the biggest lever you have. From there the toolkit opens up. Repeatable work becomes a reusable Skill. Noisy, exploratory work goes to subagents that run in their own isolated context, several at once when the job allows. Hard rules become hooks the agent cannot cross. Your own systems come into reach through MCP.Then you let go of the wheel, carefully. The same agent that pairs with you can run headless in a pipeline, drive a long task to a defined finish on its own, or live inside your software through the Agent SDK. We close by setting two greenfield methodologies, Spec Kit and BMAD, side by side, so you leave knowing not just how to drive the agent but which approach fits which problem.Two ideas hold it together: context is king, and you push it, you own it. This was never about generating code faster. It's about staying in command while the agent does more.This is an advanced session for engineers, tech leads, and architects who already use Claude Code every day and want to reach the top of the curve. We move fast, and we start in the deep end.

Claude Code: Black Belt

Pawel Sawicki

Styled-components lost against Tailwind, partly due to better performance while trading it for a unique API. Can’t you have both, a fast runtime and a familiar API?We replaced styled-components with a build-time compiler in next-yak without changing a single line of user code and saw surprising results: INP improved over 10%, our SSR latency and our pod count dropped significantly. But the path there wasn’t simple.This talk is about three problems that make compile-time CSS-in-JS genuinely hard: dynamic interpolations, cross-file references and build-time evaluation. I will show what we solved, how we solved it and what we couldn’t fully solve and why the remaining gap is a harder problem than it looks.

The Internals of compile-time CSS-in-JS

Luca Schneider

Frontend apps morph at lightspeed, obliterating traditional test automation in their wake – CSS flips, components explode on re-render, and your test suite? Total carnage, half of it flaming red!Buckle up: I'm unleashing a game-changer – harnessing the browser's Accessibility Tree (the secret sauce powering screen readers) for AI-fueled, bulletproof tests. Forget fragile selectors; these bad boys are framework-agnostic, refactor-proof, and redesign-demolishing!Live demo + battle-tested examples incoming: Watch maintenance evaporate, flakiness vanish, and accessibility skyrocket as your ultimate sidekick. Who's ready to future-proof their tests?

Stop Testing the DOM: AI + Accessibility for Resilient React Test Automation

Yashpreet Bathla

Optimistic UI makes apps feel instant by showing results before the server confirms them. In most apps that's a fine trade-off. In financial applications, showing a user an incorrect balance even for 200ms is a trust problem that compounds. This talk explores the tension between perceived performance and correctness, the React patterns that resolve it, and why "optimistic" is a UX promise your architecture needs to be able to keep.

Optimistic UI Is Lying to Your Users: Here's How to Do It Honestly

Patrick-Mary Nwakeze

React 19’s new use() API is often introduced through data fetching: pass a Promise, suspend while it’s pending, and render when the data is ready. But for many React apps, the bigger performance problem is not just waiting for data — it is shipping, executing, and hydrating too much JavaScript too early. Because use() can suspend on any Promise, it opens a bigger performance opportunity: what if a React app could wait not only for data, but for any resource that determines when different parts of the UI should load, render, or hydrate?In this talk, we’ll explore use() as a primitive for resource-driven performance. We’ll start with the familiar data-fetching pattern, then expand the model through several different use cases: selectively loading component code and remote modules, delaying hydration and interactivity based on viewport and user intent, prioritizing critical UI, and even creating SSR-only components.Through practical examples, we’ll see how these use()-driven patterns can help us avoid common performance problems in heavy React pages: too much JavaScript, too much hydration work, and too many components competing for network and CPU before the user actually needs them.By the end of the talk, you’ll see use() not just as a data-fetching API, but as a new way to control when React components should load, render, and hydrate — helping us build faster pages and more intentional user experiences.

The Power of Use: Resource-Driven Performance in React 19

Gil Eckstein

What if your React app could understand users without sending their data anywhere?Modern browsers can now run meaningful machine learning locally. This talk shows how to use in-browser ML to build React interfaces that personalize, adapt, and respond in real time, while staying fast, private, and predictable in production.

The Browser Is the Brain: Building Smart React UIs with In-Browser ML

Vishnudhasan Govindarajan

In this hands-on workshop, you’ll learn how to integrate AI directly into your application using TanStack AI. We’ll build a working AI chat feature end-to-end, starting from server setup and finishing with a streaming client, tool calling, human-in-the-loop workflows, and real debugging using TanStack DevTools. Through guided exercises, you’ll learn how to set up TanStack AI on the server, connect a client application to a streaming AI backend, build a functional chat interface, create your first AI tools, and implement approval flows so humans can stay in control when tools are invoked. By the end of the session, you’ll understand the core building blocks of AI-powered applications and walk away with a solid foundation for adding intelligent chat and tool capabilities to your own apps. Workshop outcomesWhen you're finished with this workshop you will:<ul><li>Understand how to set up TanStack AI on the server and wire it to a provider (like OpenAI)</li><li>Know how to connect a client app to a streaming AI endpoint and handle incremental updates cleanly</li><li>Build a functional chat UI with a solid state model for messages, streaming tokens, and tool results</li><li>Create and use your first AI tools with clear inputs, outputs, and predictable behavior</li><li>Build human-in-the-loop workflows with tool approvals so your app can ask for confirmation before executing sensitive actions</li><li>Debug and inspect your AI app using TanStack DevTools, including tool calls, responses, and streaming behavior</li></ul>What you'll learn TanStack AI gives you the primitives to build real AI features, not just a demo prompt box. This workshop focuses on wiring everything together properly, from server-side streaming to client UX, then layering in tools, approvals, and debugging so the final result is something you can confidently evolve into production features. You’ll learn the following through these exercises:<ul><li>Server setup - Configure TanStack AI on the server, connect to your model provider, and expose endpoints that support streaming chat</li><li>Streaming and SSE - Implement and consume streaming responses, understand the lifecycle of a stream, and build UI that stays responsive while tokens arrive</li><li>Chat UI and state - Build a chat interface that handles message history, partial responses, loading states, and tool outputs in a clean way</li><li>Tools - Define tools, validate inputs, return structured outputs, and integrate tool results back into the conversation flow</li><li>Human in the loop - Add approval steps for tool execution, implement “approve/deny” flows, and keep users in control when actions matter</li><li>Debugging with TanStack DevTools - Inspect requests, responses, tool calls, timing, and streaming behavior so you can troubleshoot fast and iterate safely</li></ul>Prerequisites This workshop assumes you can build and run a React + TypeScript app locally and you are comfortable working with a basic server setup.<ul><li>Basic understanding of SSE and streaming is required (we’ll use streaming heavily throughout the workshop)</li><li>Experience with React is required (components, state, props, rendering lists)</li><li>Basic TypeScript knowledge is required (we’ll rely on types for tools and structured outputs)</li><li>You will need an OpenAI API key with available credits to use during the workshop exercises</li></ul>

Building AI-Powered Apps with TanStack AI - From Setup to Chat Tools

Next.js 16 introduced cache components, a fundamentally new approach to caching that replaces implicit behavior with explicit, composable control. In this talk, I'll build a dashboard from scratch to show you how cache components work in practice: how the static shell gets prerendered and served instantly from the edge, how 'use cache' caches expensive data on your schedule, and how Suspense streams dynamic content in real time, all in the same route. You'll see the three 'use cache' variants in action, learn the donut pattern for maximum performance, understand why generateStaticParams matters more than you think, and walk away with practical patterns for cache invalidation that work in production.

Mastering Next.js Cache Components

Jonas Herrmannsdörfer

Almost a decade ago, React’s rendering algorithm was rebuilt, and with that it brought about new tools, ideas, and ways of building UI. But those tools arrived incrementally and were adopted in isolation, often framed as “optimizations” rather than part of a unified model. So are they truly independent ideas, or are they different expressions of the same underlying model made possible by the new rendering algorithm?Join us as we re-introduce "Async React" as the mental model for modern react and show how we can write more declarative code, embrace async-first as the default and let React handle the rest.

From Fiber to Async React

Nonso Otoh

Publishing a shared component library feels like a milestone, until a single change breaks multiple applications at once.While working on a monorepo at EPAM Systems powering 8 production applications for a global supply chain platform, we built a shared ecosystem of independently deployable frontend packages: authentication, navigation, app shell, user profile, and UI components. On paper, it promised consistency and speed. In reality, it introduced a new class of problems, subtle, cross-app, and often hard to debug.A mismatch in React versions led to duplicate instances and unpredictable behavior across apps. Small feature requests from different teams slowly turned shared components into overly flexible, inconsistent abstractions. Even “safe” refactors required coordinating across teams, managing rollouts, and avoiding breaking changes in production systems we didn’t fully control.This talk goes beyond best practices to explore the real trade-offs of shared frontend architecture at scale. I’ll walk through concrete failures, decisions, and constraints we faced — and the strategies that actually worked: strict dependency contracts, opinionated API design, staged migrations, and clear ownership models.If you’re building or maintaining shared packages in a monorepo or multi-app ecosystem, this talk will help you avoid common pitfalls and make better architectural decisions — before they impact multiple teams at once.

The Hidden Cost of Shared Frontend Code: Lessons From 8 Apps and One Monorepo

Mansi Manhas

Most React applications treat AI as a separate service: a backend calls an LLM, returns JSON, and a client component renders it. This works, but it misses something fundamental about how React Server Components actually model computation.RSCs do not just move rendering to the server. They make the server a first-class part of the React tree. And the server is exactly where AI inference belongs: close to data, streaming by design, and free from the browser's constraints.In this talk I'll show a concrete architecture where the AI call is the render. A Server Component reaches out to a language model, receives structured output, and streams typed React elements directly to the client with no extra API route, no serialization layer, and no client-side state for the AI response.We'll cover the happy path, the failure modes, and the real-world lessons from building this in production, including hallucination-resistant validation, Suspense boundaries for model latency, and the one architectural mistake that will destroy your Time-to-First-Byte.

The AI Call Is the Render: Server Components as the Intelligence Boundary

Semih Ozden

AI agents can do much more today than generate code. Used well, they can read code, inspect HTTP responses, analyze build logs, evaluate deployment metadata, and help systematically find performance, cost, and infrastructure issues.In this 3-hour workshop, we build a practical agent workflow for web applications. We start with an external audit of a running app, then analyse common issues in a Next.js codebase and connect the findings with infrastructure data such as logs, deployments, caching behaviour, and metrics. The Vercel CLI is used as a concrete example, but the concepts also apply to other platforms with a CLI or API, such as Cloudflare, Netlify, or AWS.Participants will learn how to create repeatable agent skills for audits and debugging, how to build safe read-only workflows, and how to structure results so they lead to concrete technical actions instead of vague recommendations.

Analysing and Optimising Web Apps with AI Agents: From Codebase to Infrastructure

State management has traditionally focused on synchronizing user interactions, frontend state, and backend persistence. But AI agents introduce a new type of actor into modern applications: autonomous workflows that can read, execute, and modify application state alongside human users.In this session, we explore how familiar frontend state management concepts can evolve into shared full-stack architectures where both humans and AI agents collaborate on the same data model. Using examples from modern React applications, we will examine sandboxed agent execution with forked state snapshots, deterministic merge strategies, concurrent updates between users and agents, and techniques for making agent actions observable and debuggable.Rather than treating AI as an external API call, this talk presents agents as first-class participants in application state transitions. We will extend familiar concepts such as state stores, reducers, event streams, and optimistic updates beyond the frontend into backend orchestration systems that keep human and agent state consistent.Attendees will leave with practical architectural patterns for building collaborative human + AI applications using ideas they already know from modern frontend development.

Human + AI Shared State Management: Extending Frontend Patterns Into Agentic Systems

Austin Zhang

After six interviews with people with disabilities about their daily struggles and opportunities they see in AI, it became clear that while standards and patterns have brought accessibility far, there are hard limits on how well one interface can adapt for all users.This led us to a different approach: instantly generated UI based on personal needs and context. Not adapting one interface, but exploring what AI makes possible when launching an app takes the same time as creating one on-the-fly.

Your UI Is Not My UI

Matt Seccafien

Simon Lenz

Component tests started in real browsers with Karma: high fidelity, but slow feedback and painful config. Jest + JSDOM made tests fast and easy, but emulation can miss rendering, layout, and browser APIs.Playwright and Vitest Browser Mode bring back browser-first testing with headless speed, parallel runs, and traces. We’ll compare the approaches and share migration tips for legacy code.

Component Testing in 2026, the Return of the Browser

Guy Nesher

I built an RSC renderer in Rust by reverse engineering React's Flight protocol. The wire format, the serializer, the streaming machinery. I got it wrong in ways that taught me exactly how React internals work. Then I integrated the canonical Fizz renderer and discovered why React's approach exists. This talk walks through the Flight wire format, the bugs that revealed React's design contracts, and the delta between a custom implementation and React's actual architecture.

I Reverse Engineered RSC. Then I Integrated Fizz.

Ryan Skinner

Frontend teams are increasingly using AI to speed up UI development by generating code directly from designs. While the results can look impressive, they often fall short in real production environments: incorrect components, missing accessibility, and broken design-system rules are common failure modes. In this talk, I’ll present a real-world Figma-to-Code case study that treats AI as part of the frontend infrastructure rather than a code generator. By teaching AI how a design system works and orchestrating a structured workflow, we moved from “cool demos” to production-ready UI code - an approach we now rely on in real product development, saving significant time while improving consistency, quality, and user experience.

From Figma to Production Code: Building a Reliable AI-Driven UI Workflow

Rivka Ungar

Browser-native AI video runtimes utilize technologies such as React, Web Workers, Web Codecs, Offscreen Canvas, and browser-compatible models to perform fully client-side video processing, thereby eliminating the need for large video files to be uploaded to the cloud before they can be processed.This talk will cover the technological challenges of dealing with thousands of video frames efficiently while conducting AI workloads on a large number of workers concurrently; how to handle browser memory constraints with respect to video frame processing, and how to create scalable video processing pipelines without relying on any back-end infrastructure.

Building a Browser-Native AI Video Runtime With React

Prithive Raj MuraliKrishnan

As React shifts from "Black Box" NPM packages to "Copy-Paste" components, we face a new crisis: How do we distribute complex state and security logic without locking down the UI?This talk breaks down the architecture of a multi-distribution system. We’ll explore using TanStack Query as a headless state machine to orchestrate multi-step authentication sequences and global error-handling patterns that bridge the gap between library and implementation. Learn how to ship "logic-heavy" components that give developers total UI freedom without sacrificing architectural integrity.

The Dependency Paradox: Shipping 'Headless' Auth Logic via Shadcn & NPM

Naveen Chand

React re‑renders components on every state change. Signals write directly to the DOM – no re‑renders, no reconciler. I built four npm packages that run unmodified React components on signals. Live demo: building a signal from 3 lines of code, then flipping a real React app onto the signal engine. 123 tests pass.

I Replaced React's Renderer With Signals – Here's What Happened

Saman Abbasi

Ads Manager powers 84% of Meta's Ads Revenue, but its decade-old codebase was stuck on React class components — blocking modern patterns like hooks, Relay, and React Compiler. Manual migration of 10k+ components class to functional component was impractical. In this talk, I'll show how we built an AI codemod pipeline using Devmate that achieved a 5x speedup, migrating 3k+ components with a 99.6% success rate. I'll cover the tradeoffs between AST and AI codemods, how to classify components by complexity for targeted prompts, and the grading/eval strategies that made non-deterministic AI agents production-ready.

Class to Function Migration With AI Codemods: Migrating 10K+ Components at Scale

Shubham Chaurasia

When you think of it, browsers can be the perfect containers for running all sorts of workloads - Everybody has them, each tab is an isolated environment and they have a very rich API. So why not use the browsers in your organizations to act as containers to run your workloads and save money on servers? In this session I’ll explain the concept and demonstrate it running javascript (of course!) tasks for AI, concurrent batching, PDFs creation and more. This is the new cloud native!

Browsers are the New Containers

Dan Erez

Most enterprises are still experimenting with copilots, workshops, and prompt engineering. Aymeric skipped the experimentation phase entirely and deployed a fully operational AI workforce inside a $1B global Australian manufacturer.This is not a theoretical future-state presentation. It is a candid, behind-the-scenes look at what actually happens when autonomous AI agents are embedded into real operational environments: what breaks, what scales, how teams adapt, and what organisations must fundamentally rethink to succeed.

From Copilots to Colleagues: Deploying a 160-Agent AI Workforce Inside a $1B Enterprise

Aymeric Perfrement

Generative UI is currently one of the most explosive frontiers in frontend engineering. Modern UI frameworks like React are moving from static components to streaming, AI-generated micro-frontends.Andrey's talk explicitly references Google's A2UI protocol, which standardizes how agents emit declarative layout schemas that are safely interpreted and rendered by trusted client components. React component architecture, server actions, and client-side design patterns are exactly where this protocol must be implemented. Senior React developers are looking for ways to move past boring, messy chat-bubble boxes and build structural, design-compliant generative components.

After Chat: Generative UI as the Control Surface for Agents

Andrey Goryainov

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 2026

FocusReactive

Hygraph

Sentry

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;

Secure AI agents, humans, and whatever comes next

FocusReactive is an&nbsp;<meta charset="utf-8" id="isPasted">engineering-led <a href="https://focusreactive.com/services/headless-cms-expert-agency/">Headless CMS Agency</a>&nbsp;and&nbsp;<a href="https://focusreactive.com/next-js-expert-agency/">NextJS&nbsp;development experts</a>. Independent partners of Payload CMS, Sanity, Storyblok, Vercel and Shopify. Delivering&nbsp;<meta charset="utf-8" id="isPasted">Composable content platforms built for AI SEO, growing teams, and marketing velocity.

React Advanced 2026

We will be diving deep

Lera

Seungho Park

Alem Tuzlak

Lera

Violina Popova

Thibault Van den Broecke

HT Sahin

Gerson Enriquez

David Barry

Mykhaylo Ryechkin

Boris Karaivanov

Vitor Barbosa

Leesa Ward

Sanketh Kumar

Denis Radin

Tamara

Basseydou OUATTARA

Julián Parrilla Calvo

quinton sheppard

Fathima Fasna

Sean Leow

Adrian Williams

Artur Rybak

Dimitrios Tampakis

Yakovlev Eugen

eran

Va Da

Joel E.

Varun

Ben Durrant

Jessica Aguerrevere Clements

Michael Chiche

Hubert Altar

mudra

Total attendees