Name: React Summit US 2025
Start: 2025-11-18T13:00:00.000Z
End: 2025-11-21T22:59:00.000Z

Julian Burr

Olivier Tassinari

Kiril Peyanski

Nicolas Carlo

Lera

James Swinton-Bland

Seungho Park

Maya Shavin

Brian Whippo

Simon Ouyang

Daria Shabala

Oli Legat

Vitor Alencar

Mateusz Jagodziński

Rahul Nanwani

Richard Carrigan

Joran Quinten

Sander Vervaeke

Thibault Van den Broecke

David Pugh

Amanda Witecki

DACHCOM.DIGITAL

Kyle Langford

Houda Mouttalib

Lesley Oakey

Akash Hamirwasia

Mauro Bartolomeoli

Brittany Joiner

Matt Seccafien & Simon Lenz

Riccardo Erra

Ruben Casas

Henry Lie

Abhijeet Prasad

Joao Gaspar Silva

Una masterclass integral diseñada específicamente para desarrolladores de React listos para convertirse en ingenieros de AI. Aprende cómo tus habilidades existentes de React—pensamiento en componentes, gestión de estado, manejo de efectos y optimización del rendimiento—se traducen directamente en la construcción de aplicaciones de AI sofisticadas. Cubriremos todo el stack: integración de API de AI, respuestas en streaming, manejo de errores, persistencia de estado con Supabase y despliegue con Vercel.Traducción de habilidades:- Ciclo de vida de componentes → Ciclo de vida de conversación de AI- Gestión de estado → Gestión de contexto y memoria de AI- Manejo de efectos → Streaming de respuestas de AI y efectos secundarios- Optimización del rendimiento → Caché de AI y optimización de solicitudes- Patrones de prueba → Estrategias de prueba de interacción de AILo que construirás: Una herramienta completa de gestión de proyectos impulsada por AI que muestra patrones de integración de AI a nivel empresarial.

La Guía del Desarrollador de React para la Ingeniería de AI

The Workshop covers a range of topics including understanding Agents in AI workflows, utilizing specialized tools to enhance AI capabilities, exploring multi-agent systems and patterns, managing small agent networks for productivity, diving into React development and database setup, exploring advanced AI SDK features, and encouraging innovation with AI tools and agents.

A comprehensive workshop designed specifically for React developers ready to become AI engineers. Learn how your existing React skills—component thinking, state management, effect handling, and performance optimization—directly translate to building sophisticated AI applications. We'll cover the full stack: AI API integration, streaming responses, error handling, state persistence with Supabase, and deployment with Vercel.Skills Translation:- Component lifecycle → AI conversation lifecycle- State management → AI context and memory management- Effect handling → AI response streaming and side effects- Performance optimization → AI caching and request optimization- Testing patterns → AI interaction testing strategiesWhat you'll build: A complete AI-powered project management tool showcasing enterprise-level AI integration patterns.

The React Developer's Guide to AI Engineering

Niall Maher

En este masterclass, guiaré a los participantes a través de un proceso para construir aplicaciones full-stack usando Cursor. Cubriremos la configuración de workflows de Cursor, incluyendo reglas, comandos y modos personalizados, para agilizar el desarrollo. Usaremos Cursor para redactar PRDs, esquemas de base de datos, etc., y un simple SOW. Convertiremos notas en listas de verificación accionables para guiar la construcción, conectando el front end, API y base de datos.Además, crearemos workflows para depuración, pruebas, revisión y corrección de la aplicación mientras reducimos alucinaciones con prompts precisos. La sesión también incluirá un workflow de revisión de seguridad y técnicas para aplicar prompts para lograr un diseño de UI moderno. Los asistentes se irán con una aplicación funcional en su máquina y un proceso de desarrollo reutilizable.

Cómo Construir Aplicaciones Full-Stack Usando Cursor

Ray conducts a workshop on building full stack applications with Cursor, focusing on context engineering and leveraging rules like User Rules and Project Rules. Customizing tools and creating custom modes in Cursor for optimized workflows. Developing a resource hub for Cursor resources sharing. Utilizing Composer for efficient workflow planning. Investigating statement of work creation and managing resources. Implementing testing procedures and multiple models for feature development. Exploring agent.log history, hooks, and commands for workflow optimization. Creating custom commands, workflows integration, and code review processes. Troubleshooting browser bugs, creating linear tickets, and building reusable workflows with CodeRabbit integration. Developing meta workflows, custom rules, and efficient code review with a multi-step approach using Core Rabbit.

In this workshop, I’ll guide participants through a process for building full-stack applications using Cursor. We’ll cover setting up Cursor workflows, including rules, commands, and custom modes, to streamline development. We will use Cursor to draft PRDs, database schema, etc and a simple SOW. We’ll turn notes into actionable checklists to guide the build, connecting the front end, API, and database.Additionally, we’ll create workflows for debugging, testing, reviewing, and fixing the app while reducing hallucinations with precise prompts. The session will also include a security review workflow and techniques for applying prompts to achieve a modern UI design. Attendees will leave with a functioning app on their machine and a reusable development process.

How to Build Full-Stack Apps Using Cursor

 Shrey Shah

Mientras los desarrolladores recurren cada vez más a los asistentes de IA para todo, desde la creación de componentes hasta la generación de aplicaciones completas, queda una pregunta crítica: ¿qué tan buena es realmente la IA para comprender y escribir con fluidez código de React de calidad de producción? Esta charla va más allá del bombo publicitario para ofrecer una mirada sincera y detrás de escena a nuestro trabajo en la cuantificación de las capacidades de los modelos de lenguaje grandes, en el mundo real del desarrollo web. Exploraremos ideas clave de los benchmarks de la industria sobre su capacidad para construir aplicaciones web funcionales e interactivas utilizando tecnologías como Next.js. Compartiremos nuestras exploraciones en la construcción de un soporte de codificación full-stack más sólido para React usando Gemini. Únase a nosotros para una exploración basada en datos pero profundamente humana del estado actual y el potencial futuro de la generación de código de IA en el mundo de React.

How Good is AI at Coding React (really)?

Exploring AI's impact on React coding quality and the importance of context, tools, and practices in leveraging AI effectively. AI as a force multiplier, differences between vibe coding & AI-assisted engineering, AI models' competencies in React prompts, and React developers' favorable position amidst AI advancements. AI's implications for React development, complexity cliff in React work, and AI's design challenges for React developers. React work's complexity cliff, Design Arena benchmarks for AI design capabilities, AI's design challenges for React developers. AI's role in visual design control, Design Arena's insights on scaffolding impact, AI's UI scaffold capabilities and human judgment necessity. Vercell's Next.js evals, Webbench by ByteDance, and Web Dev Arena insights on AI performance in web development. Gemini 3 and GPT-5 catching up in design models, exploring website code generation, and design sensibility in AI for React workflow. Solving the purple problem in AI training, tips for using AI in React development for building sites, and managing AI like a junior developer. Evaluating AI's performance in complex tasks, lessons on using AI like a developer, and the importance of specificity and human oversight in AI usage. Enforcing productivity and supervision, addressing context failures through engineering and providing comprehensive context for agent performance. Template for context engineering, controlling tooling quality, using Context-7 for fresh docs and examples, leveraging MCP servers for real data, and improving overall quality loop. Connecting tools for closed-loop coding, Vive coding for rapid product creation, UI components for isolated, reusable components. UI components arena focus on isolated, reusable components and visual comparisons. Guidance for UI component generation and complex 3D and data visualization models for interactive experiences. AI assistants integration strategies for 3D and data visualization. Importance of specific details like libraries and scene descriptions for optimal AI assistance. Balancing control with AI model generation and the critical factors in AI code success or failure. Debugging workflow lessons applicable to all; New flow state in AI-assisted development focusing on orchestration and code creation; Gemini 3 launch for web development and design leadership. Website aesthetics and design improvements; Proactive tool utilization for React devs; Embrace AI for faster product development. AI in automated debugging with AI agents; Limitless potential of AI in coding quality; Image generation tools for slides; Addressing security and architectural regressions in AI-generated code. AI's Impact on Future Frameworks and Team Alignment in Workflow Standardization. Strategies for Context Bugs and Workflow Optimization.

While developers are increasingly turning to AI assistants for everything from component creation to generating full-blown apps, a critical question remains: just how good is AI at truly understanding and fluently writing production-quality React code? This talk moves beyond the hype to offer a candid, behind-the-scenes look at our work in quantifying the capabilities of large language models, in the real world of web development. We will explore key insights from industry benchmarks on their ability to build functional and interactive web applications using technologies like Next.js. We will share our explorations into building stronger full-stack coding support for React using Gemini. Join us for a data-driven yet deeply human exploration of the current state and future potential of AI code generation in the world of React.

Addy Osmani

Históricamente, Next.js ha tenido dos modos distintos de renderizado: Estático (para construir páginas prerenderizadas rápidas) y Dinámico (para mostrar datos frescos en tiempo de solicitud). Con el lanzamiento de la versión 16, Next.js ahora tiene un enfoque único llamado prerenderizado Parcial que ofrece lo mejor de ambos modos anteriores. En esta charla, Sam te mostrará cómo construir un Chatbot de IA moderno que aproveche las características más recientes de renderizado híbrido de Next.js, como las navegaciones instantáneas del lado del cliente a páginas renderizadas por el servidor.

Building a Hybrid AI Chatbot with Next.js 16

Sam discussing Next.js features including cache components for dynamic apps with a blend of static pre-rendering for speed. Discussing a dynamic app with personal data, utilizing cookies and a database for chatting, showcasing Next 16's cache components for hybrid static and dynamic pages. Making necessary changes for cache components in Next to improve page loading speed and user experience, utilizing Suspense DevTools for enhanced rendering control. Utilizing state for real-time updates from OpenAI's async iterable stream in the front end. Using generators to streamline text data transmission from OpenAI streams for efficient UI updates. Discussing the benefits of managing less client-side state and implementing optimistic rendering for instant UI feedback. Discussing the use of temporary client state, error handling, and the concept of optimistic rendering for responsive and instant applications in Next.js. Exploring features of Next 16, cache components, and the use cache directive for dynamic rendering and runtime prefetching in Next.js.

Historically, Next.js has had two distinct modes of rendering: Static (for building fast prerendered pages) and Dynamic (for showing fresh data at request-time). With the release of version 16, Next.js now has a single approach called Partial prerendering that offers the best of both previous modes. In this talk, Sam will show you how to build a modern AI Chatbot that takes advantage of Next.js’ newest hybrid rendering features, like instant client-side navigations to server-rendered pages.

Sam Selikoff

Únete a Tanner Linsley, creador de TanStack, mientras presenta TanStack Start - el framework full-stack para React y Solid. Hablará sobre cómo puede manejar los requisitos más exigentes de enrutamiento full-stack, cómo puedes tener aplicaciones ricas e interactivas, y por qué no necesitas comprometerte entre experiencias de aplicaciones del lado del cliente vs del lado del servidor.

TanStack Start 1.0 - Un Nuevo Framework Full Stack para React y Amigos

The speaker introduces Tanstack Start, emphasizing type safety for better development experiences. Tanstack Start offers a client-first approach with seamless server-side integration. Tanstack Router provides server-side solutions like SSR and API routes. The demo showcases Tanstack CLI usage and server functions. Tanstack Start enables isomorphic code with server-only logic. Enhanced data validation and URL state management are highlighted. TanStack Start enhances React development speed and quality. Integration of trpc with SSR data-only mode simplifies application migration. TanStackRouter focuses on type safety and advanced functionality compared to ReactRouter.

Join Tanner Linsley, creator of TanStack's as he unveils TanStack Start - the full-stack framework for React and Solid. He'll talk about how it can handle the beefiest of full-stack routing requirements, how you can have rich and interactive applications, and why you don't need to compromise between client-side vs server-side application experiences.

TanStack Start 1.0 - A New Full Stack Framework for React and Friends

Tanner Linsley

La gestión del estado es fácil, hasta que no lo es. Claro, useState() está bien para la gestión de estado de componentes simples, literalmente para eso es. Pero a medida que nuestras aplicaciones de React crecen en complejidad, la inevitable larga cadena de useStates hace que sea más difícil entender y mantener la lógica de la aplicación, convirtiendo nuestros componentes en máquinas de Rube Goldberg.React 19 abre todo un nuevo mundo de patrones de gestión de estado que realmente tienen sentido para el estado local, compartido y global. En esta charla, pasaremos de usar useState() en todas partes a descubrir cómo los componentes del servidor, los parámetros de URL y más pueden hacer que la gestión del estado sea mucho más sencilla. También revisaremos hooks clásicos, aprenderemos sobre nuevos hooks y veremos cómo las bibliotecas de gestión de estado de terceros y las aplicaciones local-first pueden ser útiles.Digamos adiós (en su mayoría) a useState(), y hola a un futuro donde la gestión del estado no es solo una pila de setStates.

Adiós, useState

Hello, React Summit and goodbye, you states. Introduction of the speaker, David K. P., creator of Xstate library. Discussion on challenges with useEffect, managing multiple useEffects, implications of state overuse, optimizing state management in React, enhancing form data handling, effective state management strategies, innovative state management approaches, state management best practices, exploring state management options, promoting best practices, and exploring state management tools.

State management is easy, until it's not. Sure, useState() is fine for simple component state management – that's literally what it's for. But as our React apps grow in complexity, the inevitable long chain of useStates make it more difficult to understand and maintain app logic, turning our components into Rube Goldberg machines.React 19 opens up a whole new world of state management patterns that actually make sense for local, shared, and global state. In this talk, we'll transition from using useState() everywhere to discovering how server components, URL parameters, and more can make state management much simpler. We'll also revisit classic hooks, learn about new hooks, and see how 3rd-party state management libraries and local-first apps can be useful.Let's say goodbye (mostly) to useState(), and hello to a future where state management isn't just a stack of setStates.

Goodbye, useState

David Khourshid

Únete a nosotros para aprender cómo construir tu propia interfaz similar a Zapier en días, no meses. Descubre cómo ahorrar más de 1,000 horas de diseño y codificación desde el principio, construyendo una interfaz de editor de flujo de trabajo compleja desde cero. Personalízala para la orquestación de AI, automatizaciones, visualización de procesos empresariales y otras necesidades de flujo de trabajo del mundo real. Workflow Builder SDK está diseñado para desplegar rápidamente interfaces de flujo de nodos que te permiten adaptar propiedades, diseños e interacciones para satisfacer flujos de trabajo empresariales únicos. Conéctalo con cualquier backend y reduce la dependencia de N8N, Make o Zapier para tus propias necesidades de automatización.Agenda y puntos clave:<ul><li>Explorar herramientas de diagramación: Entender y comparar bibliotecas para construir interfaces de usuario de diagramas en React. Analizamos las fortalezas, compensaciones y mejores casos de uso (Web/Canvas/SVG/DOM).</li><li>Práctico: Workflow Builder SDK: Construir una interfaz de editor de flujo de trabajo de AI del mundo real usando nuestro SDK y la base de React Flow.</li><li>Arquitectura Plug &amp; play: Implementar las características principales de un editor moderno:</li><ul><li>Nodos y bordes personalizados</li><li>Gestión de estado y soporte de arrastrar y soltar</li><li>Auto-layout, minimapa y controles de zoom</li><li>Barra lateral de edición de propiedades</li></ul><li>Mejorando la experiencia del usuario (UX): Aprende cómo mejorar la usabilidad y el atractivo visual. Usaremos Overflow - Componentes de UI de código abierto para agilizar el desarrollo y mantener el enfoque puramente en la lógica empresarial.</li></ul>

Construyendo la interfaz de editor de flujo de trabajo de AI en React con Workflow Builder SDK

Lucas introduces creating workflow editors with the Workflow and Builder SDK, focusing on diagramming. The workshop covers understanding diagrams, UI features, diagramming libraries like WebGL and SVG, React Flow library overview, customization in React Flow, Workflow Builder implementation, capabilities, and UI features. It also includes PDF export, source code overview, custom node creation, form behavior, AI agent features, custom object previews, dynamic tools list creation, Overflow UI library introduction, custom rebranding, and workflow customization overview.

Join us to learn how to build your own Zapier-like interface in days, not months. Discover how to save 1,000+ hours of design and coding upfront, building a complex workflow editor UI from scratch. Customize it for AI orchestration, automations, business processes visualization and other real-world workflow needs. Workflow Builder SDK is designed to quickly deploy node flow interfaces that let you tailor properties, layouts, and interactions to suit unique business workflows. Connect it with any backend and reduce the dependency on N8N, Make or Zapier for your own automation needs.Agenda and key takeaways:<ul><li>Explore diagramming tools: Understand and compare libraries for building diagram UIs in React. We analyze the strengths, trade-offs, and best use cases (Web/Canvas/SVG/DOM).</li><li>Hands-on: Workflow Builder SDK: Build a real-world AI workflow editor interface using our SDK and the React Flow foundation.</li><li>Plug &amp; play architecture: Implement the core features of a modern editor:</li><ul><li>Custom nodes and edges</li><li>State management and drag-and-drop support</li><li>Auto-layout, minimap, and zoom controls</li><li>Property-editing sidebar</li></ul><li>Polishing user experience (UX): Learn how to enhance usability and visual appeal. We'll use Overflow - Open Source UI components to streamline development and keep the focus purely on business logic.</li></ul>

Building AI workflow editor UI in React with Workflow Builder SDK

Łukasz Jaźwa

¿Cómo haces que una aplicación de React se actualice a 120fps? Muchas de nuestras aplicaciones de React funcionan felizmente impulsadas por eventos, pero a veces necesitamos entrar en tiempo real, ya sea para un efecto de partículas, animación, héroe 3D o incluso un juego. Es hora del bucle prohibido. Juntos veremos (brevemente) cuándo y cómo hacer un bucle de actualizaciones de estado en React.

React at 120FPS: Cuándo Hacer un Bucle

This talk explores challenges and architecture decisions for realtime apps in React, focusing on frame updates and performance at high refresh rates. It delves into optimizing frame animation, managing synchronization, achieving frame rate independence, and implementing physics in animations. The discussion includes resolving data sharing issues, decoupling data for improved focus, enhancing simulation with external state, customizing animation behaviors, and optimizing continuous updates with Kuta. The talk also covers experimenting with ball physics, tool optimization, and enhancing rendering performance through Canvas, React3Fiber, Sandpack, and Kuta for animations.

How do you make a React app update at 120fps? Many of our React apps are happily event driven but sometimes we need to break into real-time, whether it is for a particle effect, animation, 3D hero or even a game. Time for the forbidden loop. Together we will (briefly) look at when and how to loop state updates in React.

React at 120FPS: When to Loop

Kristopher  Baumgartner

En grandes proyectos de React, los toggles de características y las construcciones condicionales pueden volverse rápidamente desordenados. ¿Qué pasaría si se pudieran agregar o eliminar características completas simplemente colocando o quitando una carpeta de tu proyecto? En esta masterclass, mostraré cómo una arquitectura de plugins hace que las aplicaciones de React sean más modulares y fáciles de mantener, con ejemplos de código prácticos de nuestro producto. Conclusiones para la audiencia: - Cómo estructurar aplicaciones de React para que las características vivan dentro de plugins autónomos. - Cómo esta arquitectura simplifica las construcciones y despliegues al excluir características no deseadas desde la fuente. - Patrones prácticos que puedes adoptar de inmediato para hacer tu base de código de React más modular.

Plug and Play Design: Construyendo Aplicaciones React Extensibles

Mateusz Jagodziński, principal developer at Synergy Codes, shares insights on Plug and Play Design Building Extendable React Applications, discussing feature flags, modularity, and real-world use cases. Challenges of feature flags, the concept of alternative modular design for feature management, and the importance of modularity in code organization and development. Configurability and limitations in feature management, showcasing a plugin-based design for flexible tool versions and code manipulation. Explanation of plug and play design for code manipulation and version control with full type safety in TypeScript projects. Exposing functions to register new plugins, organizing plugins' logic within individual folders, and implementing a build setup with a replacement mechanism for plugin files. Replacing missing plugins with a fallback code, enforcing restriction on direct plugin imports, and visualizing the relationship between plugins, adapters, and application components. Exploring pros and cons of self-contained plugins, addressing implementation overhead, and discussing the value of enforced modularity for AI coding tools. Discussing plugin management decisions based on client needs and the scalability of the approach with changing requirements and minor tweaks. Handling plugin version tracking, automated testing challenges, and feature control based on environments. Adapters and maintaining plugin compatibility through iterations and cosmetic changes, leveraging existing solutions for simplicity. Discussing the implications of not shipping separate builds for multiple customers and considering the benefits of smaller bundle size. Exploring the ease of trying out new features with separate plugins to assess overhead and developer experience.

In large React projects, feature toggles and conditional builds can quickly become messy. What if entire features could be added—or removed—just by dropping a folder in or out of your project? In this talk, I’ll show how a plugin architecture makes React applications more modular and easier to maintain, with practical code examples from our product. Audience Takeaways: - How to structure React applications so features live inside self-contained plugins. - How this architecture simplifies builds and deployments by excluding unwanted features at the source. - Practical patterns you can adopt immediately to make your React codebase more modular.

Plug and Play Design: Building Extendable React Applications

React Compiler ha existido por un tiempo, pero ¿cómo se sostiene en proyectos del mundo real? En esta charla, compartiré mi experiencia adoptando React Compiler en mi producto slantit.app, los desafíos prácticos que encontré y cómo los depuré y solucioné. También recorreré el impacto medible que tuvo y lo que deberías saber antes de usarlo en tus propios proyectos.

Lecciones de la Adopción de React Compiler

Akash Hamilwasia presenting at React Summit 2025, shares React Compiler learnings and works on an AI audio platform. Memoization in React helps optimize UI performance by preventing unnecessary re-renders. React Compiler offers automatic memoization through static code analysis. React rules emphasize purity and immutability. The compiler analyzes and memoizes code changes for optimization. React Compiler package usage improves performance through code analysis. Understanding reactivity issues is crucial for handling React state. Compiler optimization requires correct dependency arrays and usage of external libraries. Measure React Compiler impact using React Profiler for optimization and real user impact analysis.

React Compiler has been around for a while, but how does it hold up in real-world projects? In this talk, I’ll share my experience adopting React Compiler in my product slantit.app, the practical challenges I ran into, and how I debugged and worked around them. I’ll also walk through the measurable impact it had, and what you should know before using it in your own projects.

Lessons From Adopting React Compiler

React Server Components están cambiando la forma en que pensamos sobre la arquitectura de componentes, pero en la práctica, la mayoría de las UIs del mundo real no viven puramente en el servidor o el cliente. En esta charla, exploraremos cómo construir componentes híbridos que abarquen ambos, manteniendo una separación clara de preocupaciones mientras se ofrece interactividad y rendimiento.

React Components for both the Client & the Server

Kiko shares the process of building UI components for both client and server sides, highlighting performance benefits and challenges of using server components. Building a reusable UI library with server and client components, aiming for similarity and adaptability. Adding interactivity to a data table in a Next.js application by incorporating client components for reactivity and customization. Building customization by incorporating a custom cell, resolving errors between client and server components, and optimizing syntax highlighting and markdown processing. Achieving composition pattern at the component level by separating client and server parts, maintaining an agnostic component part, and optimizing rendering for client-specific functionalities. Achieving client-server performance optimization by keeping rendering tree agnostic, enabling separate client component extraction, and promoting interactivity within components.

React Server Components are changing how we think about component architecture-but in practice, most real-world UIs don’t live purely on the server or the client. In this talk, we’ll explore how to build hybrid components that span both, maintaining a clean separation of concerns while delivering interactivity and performance.

Esta masterclass explora cómo aprovechar las herramientas impulsadas por AI de Sentry (Seer, MCP y Agent Monitoring) para optimizar la depuración, el monitoreo de errores y la observabilidad en aplicaciones full-stack. Guía a los participantes a través de <ul><li>Configurar Sentry desde cero</li><li>Instrumentar errores, registros y trazas</li><li>Usar las características de Sentry AI para detectar y remediar problemas de manera más eficiente</li></ul>Esta masterclass es beneficiosa para ingenieros de software, SREs, practicantes de DevOps y líderes de ingeniería que desean mejorar la observabilidad, reducir el tiempo de resolución y explorar el uso de AI para asistir en la depuración en sistemas de producción.

Depuración con Sentry AI usando Seer, MCP y Agent Monitoring

Morning, workshop introduction by Paul from Sentry. Setting up a React and Node app with Sentry integration. Exploring error tracking and new AI tools. Advanced integration with tracing, replay, React router integration, and error boundaries. SEER overview capturing detailed error information. AI analysis for root cause analysis and automated fixes. Utilizing logs for detailed information and error resolution with AI debugger support. MCP server integration for local context access and historical data.

This workshop explores how to leverage Sentry’s AI-driven tools (Seer, MCP and Agent Monitoring) to streamline debugging, error monitoring, and observability in full-stack applications. It guides participants through <ul><li>Setting up Sentry from scratch</li><li>Instrumenting errors, logs, and tracing</li><li>Using Sentry AI features to detect and remediate issues more efficiently</li></ul>This workshop is beneficial for software engineers, SREs, DevOps practitioners, and engineering leads who want to level up observability, reduce time to resolution, and explore using AI to assist debugging in production systems.

Debugging with Sentry AI using Seer, MCP, and Agent Monitoring

Paul Jaffré

Esta charla explora cómo construimos un sistema impulsado por AI que transforma diseños de Figma en código React listo para producción utilizando el Sistema de Diseño personalizado de Razorpay. Aprende cómo resolvimos el problema de la inconsistencia de marca en herramientas genéricas de AI y creamos una solución que entiende nuestro lenguaje de diseño único, permitiendo un desarrollo más rápido sin comprometer la calidad.

Diseño a Código Usando un Sistema de Diseño Personalizado con AI

Chaitanya, Principal Engineer at Atlassian, discusses the design system at Razorpay, the impact of AI on UI development, and the integration of AI with design systems for enhanced productivity. Detailed prompts for AI to build UI components can be cumbersome. Imagine a seamless process where AI interprets Figma designs to create UI. Leveraging design expertise and focusing on business logic, not writing detailed AI prompts. Blade's MCP server facilitates the magic of transforming Figma designs into UI code by collaborating with Figma and OpenAI.

This talk explores how we built an AI-powered system that transforms Figma designs into production-ready React code using Razorpay’s custom Design System. Learn how we solved the problem of brand inconsistency in generic AI tools and created a solution that understands our unique design language, enabling faster development without compromising on quality.

Design to Code Using a Custom Design System with AI

Chaitanya Deorukhkar

No te ascienden por tus habilidades de comunicación, pero en el momento en que asumes un rol de liderazgo, se convierten en tu activo más importante. Ya sea que seas un ingeniero creciendo en influencia o un gerente liderando un equipo, saber cómo navegar el lado humano del trabajo es esencial.En esta sesión, cubriremos cinco de las conversaciones más difíciles que enfrentarás en el trabajo: bajo rendimiento, dar retroalimentación, decir "no", crecimiento profesional y establecer límites.Te irás con marcos prácticos y repetibles para abordar cada conversación con claridad y confianza, construyendo confianza, fortaleciendo la colaboración y presentándote como el tipo de líder con el que la gente quiere trabajar.

5 Conversaciones Difíciles que los Gerentes Necesitan Tener

Kellie emphasizes the importance of having tough conversations in management, addressing underperformance using the care framework and support strategies. The STAR framework is highlighted for handling difficult feedback effectively. Effective communication with superiors involves acknowledging trade-offs and framing discussions around revenue impact. Setting clear communication boundaries is crucial for work-life balance and team efficiency. Encouraging a feedback culture, addressing promotion discussions transparently, and handling micromanagement concerns with empathy are key points discussed.

You don’t get promoted for your communication skills—but the moment you step into leadership, they become your most important asset. Whether you’re an engineer growing into influence or a manager leading a team, knowing how to navigate the human side of work is essential.In this session, we’ll cover five of the toughest conversations you’ll face at work: underperformance, giving feedback, saying “no,” career growth, and setting boundaries.You’ll walk away with practical, repeatable frameworks to approach each conversation with clarity and confidence—building trust, strengthening collaboration, and showing up as the kind of leader people want to work with.

5 Tough Conversations Managers Need to Have

Kelly Vaughn

En este masterclass, exploraremos las últimas características de React: Server Components, Server Functions y forms. Descubre cómo optimizar el server-side rendering, construir experiencias de usuario fluidas con React Suspense y Transitions, y mejorar la interactividad de la aplicación con Server Functions y los nuevos hooks de React 19. Diseñado para desarrolladores de todos los niveles, este masterclass proporciona habilidades prácticas para construir aplicaciones web escalables y de alto rendimiento.

Práctica de React Server Components, Server Functions y Forms en el Next.js App Router

Today's workshop introduces React Server Components, AppRouter, and new React features. Building a CRUD app with React 19 covers server and client components, static website rendering, MPAs, and SPAs. SSR, SSG, and metaframeworks like Next.js are explored. Implementing server components, customizing error pages, adding interactivity, handling loading states, and building performant interactive apps are key workshop topics.

In this workshop, we will explore React's latest features: Server Components, Server Functions, and forms. Discover how to optimize server-side rendering, build smooth user experiences with React Suspense and Transitions, and enhance application interactivity with Server Functions and new React 19 hooks. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Hands-on React Server Components, Server Functions, and Forms in the Next.js App Router

Aurora Scharff

Pequeñas animaciones pueden hacer que las UIs sean más agradables y mejorar la experiencia del usuario. En esta charla, exploraremos cómo agregar estas animaciones a tus aplicaciones de React, utilizando desde simples transiciones de CSS hasta un movimiento más complejo basado en spring.Recorreremos ejemplos prácticos para mostrar cómo estas animaciones pueden mejorar la experiencia del usuario sin interponerse en el camino. Además, discutiremos cómo mantenerlas funcionando sin problemas y asegurarnos de que sean accesibles para todos.

Guía Práctica de Animación en React

The importance of animations in enhancing user experience by bridging the gap between user expectations and digital interfaces. Practical examples of creating animations using CSS transitions and keyframes for smooth and complex effects. Utilizing timing functions with cubic Bezier curves for diverse animations and accessibility considerations. Introducing Vue Transitions as a powerful web API for seamless animations with broad browser support. Customizing Vue Transitions for unique effects, optimizing usage with unique names and global disabling, and transitioning to Spring-based animations for natural UI interactions. Exploring FramerMotion and Motion Library for React animations, configuring spring behavior for smooth effects, and enhancing animations with Motion and CSS for improved user experience.

Small animations can make UIs more delightful and improve user experience. In this talk, we’ll explore how to add these animation to your React apps, using everything from simple CSS transitions to more complex spring-based motion.We'll walk through practical examples to show how these animations can enhance user experience without getting in the way. Plus, we'll discuss how to keep them running smoothly and make sure they're accessible to everyone.

Practical Guide to Animation in React

Kateryna Porshnieva

La charla explicará qué es React Strict DOM, por qué se creó, cómo fue adoptado en Meta, cómo se está utilizando, los resultados hasta ahora y los posibles próximos pasos.

React Strict Dom: React multiplataforma basado en la web

Talk on cross-platform React using ReactStrict DOM to unify web and native React, standardizing for consistent UI development. Fragmentation challenges in React due to lack of standardized styling systems, impacting development efficiency and product consistency. Exploring unsuccessful cross-platform React approaches and the importance of minimizing migration costs. Enabling web developers to build native apps with React Native while enhancing it with web APIs for seamless code migration. Benefits of code sharing for cross-platform apps, AI integration for React Strict DOM, and the future vision for React Native as a web renderer. Unified styling in React Native, Tailwind integration, and UI best practices. Flexibility and readiness in React DOM, potential inclusion in React Foundations, and considerations for reversibility of decisions in React DOM.

The talk will explain what React Strict DOM is, why it was created, how it was adopted at Meta, how it's being used, the results so far, and the potential next steps.

React Strict Dom: Cross-Platform React Based on the Web

Nicolas Gallagher

Renderizar una aplicación de React con renderizado del lado del servidor (SSR) puede sentirse agridulce: por un lado, SSR asegura una carga rápida de la página y un gran SEO al renderizar toda la página en el servidor, sin embargo, el cliente debe descargar e hidratar todos estos componentes para hacer la página interactiva. Para páginas con mucho contenido, esto puede llevar a una cantidad significativa de JavaScript siendo cargado y ejecutado, causando tiempos de interacción más lentos y problemas de rendimiento importantes.  En Wix, enfrentamos un desafío significativo: ¿cómo podríamos ofrecer tiempos de interacción rapidísimos mientras evitamos el cuello de botella de rendimiento de descargar e hidratar cada componente renderizado por SSR en el cliente? Durante mucho tiempo, esto se sintió como un problema insoluble, hasta que la nueva API de Suspense cambió el juego. En esta charla, compartiré la historia de cómo abordamos este problema de frente, aprovechando la nueva API de Suspense introducida en React 18 para cargar e hidratar dinámicamente los componentes de React solo cuando entran en el viewport. Aunque las capacidades de renderizado basadas en promesas de Suspense no están ampliamente documentadas, demostraron ser la herramienta revolucionaria que necesitábamos para liberarnos de las limitaciones de la hidratación tradicional y mejorar el rendimiento de millones de sitios web de Wix. ¡Prepárate para una inmersión técnica profunda con muchos ejemplos de código que te equiparán para abordar los desafíos de hidratación y mejorar el rendimiento de React!

Ganando la Batalla de Hidratación: Desbloqueando el Rendimiento de React con el Poder de Suspense

Gil from Wix discusses solving a React performance bottleneck with selective hydration using Suspense API, showcasing real examples. Challenges of SSR with React hydration and its impact on interactivity and performance are outlined. The importance of selective hydration, efficient component loading, promise handling, lazy loading, and real-world impact are highlighted. Selective hydration enhances performance by reducing JS load, comparing server components with Suspense, and introducing React 19 optimizations. React 19 brings cleaner promise-based behavior, selective hydration improvements, and key takeaways on SSR benefits, suspense power, and React 19 enhancements.

Rendering a React app with server-side rendering (SSR) can feel bittersweet - on one hand, SSR ensures fast page load and great SEO by rendering the entire page on the server, however the client must download and hydrate all these components to make the page interactive. For pages with lots of content, this can lead to a significant amount of JavaScript being loaded and executed, causing slower interaction times and major performance issues.  At Wix, we faced a significant challenge: how could we deliver blazing-fast interaction times while avoiding the performance bottleneck of downloading and hydrating every SSR-rendered component on the client? For a long time, this felt like an unsolvable problem - until the new Suspense API changed the game. In this talk, I’ll share the story of how we tackled this problem head-on, leveraging the new Suspense API introduced in React 18 to dynamically load and hydrate React components only when they enter the viewport. While Suspense's promise-based rendering capabilities aren’t widely documented, they proved to be the game-changing tool we needed to break free from the limitations of traditional hydration and improve the performance of millions Wix websites. Prepare for a technical deep dive with lots of code examples that will equip you to tackle hydration challenges and boost React performance!

Winning the Hydration Battle: Unlocking React Performance with the Power of Suspense

Gil Eckstein

Únase a nosotros mientras exploramos el fascinante viaje de un píxel en el renderizado de una aplicación React, comenzando desde el momento en que un usuario escribe una URL en su navegador, hasta la fase final de renderizado e interacción. Nos adentraremos en cada etapa en detalle, cubriendo lo que sucede detrás de escena, por qué sucede y cómo los desarrolladores pueden optimizar cada parte para una experiencia de usuario más fluida. Esta charla proporcionará información sobre áreas clave como llamadas al servidor, procesamiento de JavaScript, obtención de recursos y renderizado dinámico. Es ideal para desarrolladores web que buscan profundizar su comprensión de todo el proceso de renderizado y encontrar formas prácticas de mejorar la eficiencia y el rendimiento de la aplicación.

El Viaje de un Píxel en una Aplicación React

Shem Magnezi discusses the importance of understanding web development technologies like React, HTML5, and WebSocket for optimizing websites and improving user experience. The challenges of website delivery include delivering a perfect user experience, slow network issues, DNS resolution complexities, and handling various resources efficiently. Optimization of HTML loading, resource compression, and prioritization are crucial for faster website delivery. Improving performance through code optimization, React best practices, and state management is key for enhancing user experience.

Join us as we explore the fascinating journey of a pixel in rendering a React application, starting from the moment a user types a URL into their browser, all the way to the final rendering and interaction phase. We will dive into each stage in detail, covering what happens behind the scenes, why it happens, and how developers can optimize each part for a smoother user experience. This talk will provide insights into key areas like server calls, JavaScript processing, resource fetching, and dynamic rendering. It’s ideal for web developers looking to deepen their understanding of the entire rendering process and find actionable ways to improve application efficiency and performance.

The Journey of a Pixel in a React Application

Shem Magnezi

Es fácil olvidar lo que los creadores de React sabían desde el principio: que React no es solo para construir páginas web. La mayoría de nosotros hemos oído hablar de React Native, que renderiza a componentes móviles nativos, pero React no tiene que renderizar a "componentes" en absoluto. Existe React PDF para generar PDFs e Ink para construir interfaces de usuario en el terminal.En mi empresa, hemos desarrollado una forma para que los desarrolladores usen React para crear plugins para nuestra aplicación web que se renderizan en nuestros componentes personalizados, dándonos control total sobre el diseño de la interfaz de usuario (el "cómo"), mientras que el desarrollador del plugin tiene control total sobre la experiencia de usuario (el "qué").En mi charla, explicaré cómo es construir un renderer y reconciler de React, qué son y cómo usarlos.Me gustaría hacer una demostración en vivo mostrando cómo React se puede usar para convertir html a markdown. Y luego me gustaría demostrar cómo React puede renderizar al mundo real, controlando dispositivos IOT.

React Beyond the DOM

Eric Rasmussen discusses React beyond the DOM, React PDF, Ink tools, and rendering to Markdown. The overview includes React Reconciler, host configuration, state management with real-world entities like light bulbs, and building a traffic light state machine visually. The talk also covers securing third-party JavaScript, expanding React rendering possibilities, advanced tooling for state machines, controlling light bulbs via renderer callbacks, server functions for fetch in the cloud, and potential robot programming with React.

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.

Erik Rasmussen

Este masterclass práctico explora cómo transformar componentes de React en Web Components basados en estándares, desbloqueando la capacidad de compartir elementos de UI a través de aplicaciones de Angular, Vue, Svelte, e incluso JavaScript puro. Mientras que frameworks como Angular y Vue ofrecen soporte nativo para este tipo de interoperabilidad, React no lo hace, al menos, no de forma predeterminada.Desmitificaremos cómo lograr resultados similares en React utilizando patrones y herramientas compatibles. A través de codificación en vivo y ejercicios guiados, aprenderás cómo cerrar la brecha entre React y el estándar de Web Components para promover la verdadera reutilización de componentes, reducir la duplicación y simplificar la integración en micro frontends y sistemas de diseño. Los participantes se irán con técnicas prácticas, conocimiento de herramientas y estrategias del mundo real que pueden aplicar inmediatamente a sus propios proyectos.

Escribe una vez, usa en todas partes: React se encuentra con Web Components

Introduction to React and Web Components, emphasizing their compatibility and reusability. Managing Web Component lifecycle in React, including practical applications and real-world repositories. Exploring shadow DOM for styling isolation and data passing. Integration of React components in various frameworks seamlessly, showcasing dynamic component loading and advanced features like SSR and TypeScript sharing.

This hands-on workshop 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.We’ll demystify how to achieve similar results in React using supported patterns and tooling. Through live coding and guided exercises, you’ll learn how to bridge the gap between React and the Web Components standard to promote true component reusability, reduce duplication, and simplify integration in micro frontends and design systems. Participants will leave with practical techniques, tooling knowledge, and real-world strategies they can immediately apply to their own projects.

Write Once, Use Everywhere: React Meets Web Components

Hadar Geva

Esta masterclass te guiará a través de la construcción de una aplicación web moderna de pila completa usando RedwoodSDK y React Server Components. Como desarrollador frontend, aprenderás cómo aprovechar los últimos patrones de React para abordar el desarrollo de pila completa con confianza. La masterclass cubre la construcción de componentes renderizados en el servidor, trabajar con bases de datos, implementar autenticación y desplegar una aplicación del mundo real. RedwoodSDK simplifica la transición del frontend al desarrollo de pila completa, brindándote las herramientas para crear aplicaciones web modernas y de alto rendimiento.

Aplicación web moderna de pila completa usando RedwoodSDK y React Server Components

The Workshop covered setting up Redwood SDK, Tailwind CSS, and database efficiency. It emphasized database structure, migration, and DurableObjects for modularity. The configuration included database seeding, routing, and client form creation. Client-side updates, server interaction, and handling errors were highlighted. Features like dynamic URLs, to-do item editing, and deletion were discussed. CloudFlare deployment, project interaction, and additional features like real-time support and task scheduling were mentioned.

This workshop will guide you through building a modern full-stack web application using RedwoodSDK and React Server Components. As a frontend developer, you'll learn how to leverage the latest React patterns to approach full-stack development with confidence. The workshop covers building server-rendered components, working with databases, implementing authentication, and deploying a real-world application. RedwoodSDK simplifies the transition from frontend to full-stack development, giving you the tools to create performant, modern web applications.

Modern Full-stack Web Application Using RedwoodSDK and React Server Components

Amy Dutton

AG Charts es una biblioteca de gráficos de JavaScript, creada por AG Grid, que puedes usar para crear visualizaciones de datos hermosas y atractivas en React, con una API simple, intuitiva y flexible.Lo que aprenderás: En esta masterclass, aprenderás cómo comenzar con AG Charts para crear visualizaciones simples usando AG Charts Community, así como visualizaciones más complejas usando AG Charts Enterprise. Usaremos conjuntos de datos interesantes para crear visualizaciones utilizando diferentes tipos de gráficos, incluidos mapas, medidores, embudos y más.Para quién es esto: Esta masterclass es perfecta para cualquiera que busque agregar visualización de datos a sus aplicaciones de React, sin la sobrecarga de bibliotecas como D3.

Los Datos son Hermosos: Creando Visualizaciones de Datos Atractivas con AG Charts

Introduction to AGHCharts workshop and its features, including various chart types for React. Hands-on challenges provided for in-depth learning. Detailed chart building covering different chart types and data examples. Advanced customization options for Cartesian line charts. Interactive implementation for axis control and chart customization. Focus on advanced polar charts with configuration options and event handling. Workshop covers chart configuration, tool tips, event handling, and theming. Enterprise features in AGCharts explored for advanced functionality and chart theming. Implementation of map charts with geospatial data visualization and overlays. Financial chart analysis and annotations with customizable options. Limited support for organizational charts in AGCharts.

AG Charts is a JavaScript Charting Library, built by AG Grid, that you can use to create beautiful and compelling data visualisations in React, with a simple, intuitive, flexible API.What You'll Learn: In this workshop, you'll learn how to get started with AG Charts to create simple visualisations using AG Charts Community, as well as more complex visualisations using AG Charts Enterprise. We'll be using interesting data sets to create visualisations using different chart types, including maps, gauges, funnels and more. Who this is for: This workshop is perfect for anyone looking to add Data Visualisation to their React applications, without the overhead of libraries such as D3.

Data is Beautiful: Creating Compelling Data Visualisations with AG Charts

Discusión del Panel: El Futuro de React y Su Ecosistema

Panel introduction with members from Netflix, Meta, G2I, and Replay discussing their roles. React Foundation's impact on developers' daily routines and gradual changes without sudden disruptions. Discussing React governance split, emphasizing transparency in decision-making. Foundation's goals include supporting key libraries, expanding React communities globally, and fostering idea realization. React Compiler's impact on front end development, highlighting the complexity and importance of engineering with React. Integration of AI and vibe coding enhances the compiler's ability to optimize code and provide real-time feedback. Vibe coding importance and good engineering practices. React's mental model challenges and the potential impact of the compiler on performance optimizations and simplifying the mental model. Discussing the challenges of using AI in React development and the need to simplify instructions and improve data feeding for better output quality. Discussing the empowerment of AI in guiding React code writing and the importance of sharing instructions and evaluations for framework improvement. Understanding the gaps in React documentation, translating learning into real-world applications, and navigating architectural decisions.

Panel Discussion: The Future of React and Its Ecosystem

Mark Erikson

Seth Webster

Shaundai Person

¿Alguna vez has querido construir una aplicación de UI generativa como V0 donde simplemente le das un prompt y crea una interfaz completa para ti? Pues construyamos eso con el poder de Server Driven UIs y AI. Caminaremos a través de lo fácil que Server Driven UI hace la creación de una aplicación de UI generativa. ¡Todo el tiempo estaremos aprovechando las APIs de React 19 para hacer esta aplicación de UI generativa lo más eficiente posible!

Construye tu propio V0 con Server Driven UI y AI

Introduction to server-driven UI, its benefits, and practical application in a workshop for building UI components based on a JSON schema. Detailed demonstration of generating UI elements through AI prompts and refining outputs. Explanation of using Shadstein components for UI manipulation and the importance of server-driven UI for code consistency and control. Instructions on setting up the project locally and the three main workshop focus areas: component metadata extraction, invoking the AI model, and converting AI output to UI. Enforcing consistency through server-driven UI with component restrictions and JSON schema enforcement. Parsing metadata from Markdown files, extracting subcomponents, and constructing objects for SDUI components. Setting up Olama provider, importing essential libraries, and defining dynamic components for rendering AI-generated models. Creating a V0 clone using SDUI and AI with GPU server for faster model execution. Interacting with rendered components and handling minor bugs.

Have you ever wanted to build a generative UI application like V0 where you simply prompt it and it creates an entire interface for you? Well lets build that with the power of Server Driven UIs and AI. Well walk through just how easy Server Driven UI makes the creation a generative UI application. All the while we'll be leveraging React 19 APIs to make this generative UI application as performant as possible!

Build your own V0 with Server Driven UI and AI

Ameer Sami

GPT5 es un mejor programador frontend que yo, y Cerebras Code es un programador 10 veces más rápido que yo. Pero "generative UI" todavía está mayormente atrapado en un paradigma de llamar widgets prediseñados. Los nuevos modelos, rápidos y orientados a la codificación, crean nuevas oportunidades para crear experiencias verdaderamente personales y personalizadas, sin la preocupación de que las personas quieran que sus aplicaciones se mantengan estables y confiables.

Generative UI Más Allá de Llamar Componentes Prediseñados

Failed generative UI talk explanation, exploring beyond text display with React. Vercel's generative UI tool calling. Demo challenges due to CloudFlare, GPT-5 differences. Interactive artifact generation, AI News newsletter, and ChachiBT concept. Unique superpower of developers: modifying UI for needs, tool generation challenges, pair programming concept to understand codebase better, importance of human involvement in coding, control in developer experience. Importance of control in developer experience, negative impact of AI autonomy, illusion of productivity in Vibe coding apps. Combining human and AI attention, interactive planning for coding agents, parallelizable collaborative planning. Non-interactive limitations, good interactive planning, async value of depth analytics. Increased flow disruption, semi-async failure-death, focus on code-based understanding. Hierarchical code maps for better code understanding and prompt engineering. Interplay between human and AI in code control, enhancing coding ability, and investing in coding skills. Illustrating the constant human-AI interaction and the cost of syncing with AI for different modalities. Discussing the cost of multi-modality sync with AI, encouraging a balanced approach to leveraging AI for productivity. Discussing the importance of user-friendly interfaces and the potential future of generative UI. Discussing the future of user-controlled dashboard creation and the shift of power from designers to users in generative UI development. Discussing the evolution of frameworks from developer-centric to user-centric for creating customizable UIs and the concept of malleable software coined by Jeffrey Lait. Pushing for industry adoption of the Codemap concept to enhance code quality and readability, exploring its usage with WinSurf and potential new dev tools enabled by a shared language for interacting with code bases. Discussing the impact of project size on AI effectiveness, emphasizing the importance of breaking down problems and utilizing code maps for better code management and context understanding. Discussing the importance of code map guidance and keeping code maps up to date in fast-moving projects through regular refreshing and regeneration based on git commits.

GPT5 is a better frontend coder than me, and Cerebras Code is a 10x faster coder than me. But "generative UI" is mostly still stuck in a paradigm of function calling premade widgets. New, fast, coding oriented models create new opportunities for creating truly personal, customized experiences, without the offsetting concern that people want their apps to stay stable and reliable.

Generative UI Beyond Calling Premade Components

Shawn Swyx Wang

¿Cómo se vería un framework de React si lo construyéramos hoy, con implementación edge-first, renderizado nativo sin servidor y experiencia de desarrollador sin configuración? En esta sesión de codificación en vivo, construiremos un nuevo framework de React desde cero utilizando el mismo motor de código abierto que impulsa Nuxt 3. Ven a ver cómo las herramientas originalmente construidas para Vue pueden desbloquear serias mejoras de rendimiento y DX para React.

React at the Edge: Construyendo un Framework desde Cero (En Vivo)

Daniel, a full-time open source maintainer, leads the Nuxt core team and works as a software engineer at Vercel. The Talk discussed the rewrite of the Nuxt framework, evolving it to be bundler-agnostic and introducing the Nuxt Nitro server engine. Collaboration efforts with frameworks like UNJS and NitroPack were highlighted. Advanced type safety and data fetching, building a full-stack framework, and implementing key-value storage with Nitro were discussed. Optimizing cold starts, troubleshooting module rehydration, enhancing client interaction with Vite, and transitioning to Nitro version 3 with VEET integration were key topics. The Talk also emphasized exploring the NJS ecosystem for universal utilities and encouraged collaboration and involvement in open source projects.

What would a React framework look like if we built it today—with edge-first deployment, serverless-native rendering, and zero-config developer experience? In this live-coded session, we’ll build a new React framework from scratch using the same open-source engine that powers Nuxt 3. Come see how tooling originally built for Vue can unlock serious performance and DX wins for React.

React at the Edge: Building a Framework from Scratch (Live)

Daniel Roe

¿Alguna vez te has preguntado cómo funcionan los hooks de React internamente? Hay mucha magia en juego, como funciones que pueden almacenar estado. ¿Cómo es eso posible?Únete a mí y hagamos una rápida inmersión en cómo funcionan los hooks de React internamente.

Deep Dive on React Hooks Architecture

Introduction to React Hooks and Architecture with insights into Mattermos, React components, and JSX syntax. Understanding React.createElement, React components, and createRoot for DOM rendering. Exploring React rendering process and scheduler's role in managing component work units. Exploring React fiber tree creation and hook mechanism for state management. Exploring React fiber tree mount and update mechanisms with global variable orchestration. Exploring the use of global variables for performance optimization and the process of callback updating in React Fiber tree. Exploring hook rules and different hook mechanisms like useRef and useEffect in React. Effects in React fiber, useState complexity, update mechanisms, and cost considerations. Memory storage considerations for hooks, impact on CPU, and style optimization. Insights into React Fiber storage of props and style comparisons. Summary of topics covered and acknowledgment of additional details for future exploration.

Have you ever wonder how React hooks work on the inside? There is a lot of magic going on, like functions being able to store state. How is that possible?Join me and let's do a quick deep dive into how React hooks work on the inside.

Daniel Espino García

¿Cómo construyes una interfaz de usuario de React que funcione perfectamente con control remoto, puntero y entrada táctil al mismo tiempo? En televisores modernos como LG StandbyME, los usuarios cambian entre teclas de 5 direcciones, apuntar y deslizar táctil de manera natural, pero manejar esto en tu código está lejos de ser simple. Basado en más de una década de experiencia construyendo marcos de interfaz de usuario de React para TV, compartiré técnicas del mundo real, patrones de diseño y lecciones aprendidas de crear una navegación fluida y adaptativa para entornos híbridos de entrada complejos.

De TV a Táctil: Cómo Hicimos que React UI Funcione en Todos los Modos de Entrada

Seungho Park discusses the importance of spatial navigation for TV apps and the challenges of supporting remote, pointer, and touch inputs. Real examples are explored, including focus placement, restoring focus, and grouping elements for stable navigation. Challenges in TV app navigation such as key scrolling in grid lists and managing input mode transitions are highlighted. The talk also delves into handling input modes, designing for 5-way, pointer, and touch input, and addressing edge cases. Implementing the W3C spatial navigation standard, defining focus properties for container elements, and encouraging exploration of React UI spatial navigation support are key points.

How do you build a React UI that works flawlessly across remote control, pointer, and touch input all at the same time? In modern TVs like LG StandbyME, users switch between 5-way keys, pointing, and touch swiping naturally, but handling this in your code is far from simple. Based on over a decade of experience building React UI frameworks for TV, I’ll share real-world techniques, design patterns, and lessons learned from creating seamless, adaptive navigation for complex hybrid input environments.

From TV to Touch: How We Made React UI Work Across Every Input Mode

React 18 introduce el React Compiler, una herramienta poderosa para optimizar la renderización de componentes y mejorar el rendimiento. En esta charla, exploraremos cómo funciona el compiler, demostraremos mejoras prácticas de rendimiento y te mostraremos cómo integrar estas optimizaciones en tus proyectos.Ya sea que estés trabajando en aplicaciones nuevas o existentes, te irás con ideas prácticas para aprovechar todo el potencial de React 18.

Optimizando Aplicaciones React: Profundizando en el React Compiler

Victor Alencar introduces the React compiler and discusses its potential optimizations, including evolution of state management to hooks and performance improvements. The talk delves into using memorization techniques, compiler optimizations, and code transformations for better React performance. It also covers cache utilization, automated memorization, and gradual adoption of the React compiler for enhanced UI rendering. Additionally, the discussion involves compiler assumptions, debugging recommendations, and code simplification for optimized React usage.

React 18 introduces the React Compiler, a powerful tool for optimizing component rendering and enhancing performance. In this talk, we'll explore how the compiler works, demonstrate practical performance improvements, and show you how to integrate these optimizations into your projects.Whether you're working on new or existing applications, you'll leave with actionable insights to harness the full potential of React 18.

React Summit US 2025

The biggest React conference in the US