React Summit US 2025

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.

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.

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.

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.

Sze Magnezy 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.

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.

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.

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.

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.

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.

Abbe explains how slots enhance dynamic content in components and demonstrates creating a custom element with the shadow DOM. The content covers utilizing slot attributes for named slots and slot buttons for navigation within components. It explores styling effects on components, default and named slots usage in Vue components, access and management of slot props using scoped default slots in Vue, and dynamic list creation with JavaScript destructuring in Vue components. Additionally, it discusses name slots in Angular for content projection, CSS selector matching, slot selectors, conditional content projection with ng-template, and view encapsulation modes like Shadow DOM API.

Chris Griffin discusses the innovative concept of Git Hosting as a Database, emphasizing the importance of data, authentication, and authorization in backend development. The utilization of file-based databases like parket files and the simplicity of authentication and authorization in building platforms similar to GitHub stand out. The architecture of a Git-based backend offers flexibility in backups, privacy features, and serverless advantages. Integrating with frontend frameworks through custom hooks and considering rate limiting issues on platforms like GitHub and GitLab are key points in application development with a backend-free approach using GitHub and GitLab.

CEO tests Postman on cheap laptop, reveals performance issue. Ruben Casas gives 5 tips to enhance app performance, emphasizing the importance of measuring and focusing on a key metric like TTF from mobile gaming. TTU stands for Time to Usability, a key metric for app performance optimization. Measuring TTU involves adding marks for key processes like platform initialization, JavaScript evaluation, data fetching, and rendering. Need a plan of action after identifying performance issues. Transitioned from Electron to web for faster updates, impacting download size. Introducing StatusScope for bundle optimization, reducing JavaScript bundle size significantly, implementing PR checks to prevent bundle size regression, optimizing network calls by removing dead features and prefetching critical data. Challenges with v8 snapshots, preference for full bytecode caching, adapting and iterating based on metrics, organizational obstacles, and the shift towards collective performance responsibility.

What do you do when your product’s performance crumbles, but the APIs you work with are out of your control?This was the reality we faced while building a fintech payments dashboard. Massive payloads, strict compliance, and scattered APIs were slowing merchants down and wrecking workflows.In this talk, I’ll walk through our real-world quest to rescue the user experience by leaning on full-stack frameworks like NextJS, and others that let you design effective API handlers and proxies. You’ll see how we profiled true bottlenecks, built a Backend-for-Frontend layer to reshape data, balanced API criticality across the stack, applied caching and resilience architectural strategies.We’ll also look at the infrastructure side: how to use FaaS/IaaS to manage network constraints, reduce payload impact, and improve reliability without changing the source APIs.Expect live demos, battle-tested patterns, and hard-earned lessons for building resilient, user-centric apps, front to back, even when the odds aren't on your side.

Matt Sikathian emphasizes the importance of supporting right-to-left layouts in web development and the challenges faced in implementing Arabic scripts effectively. Adapting UI to right-to-left reading aligns with users' cognitive patterns, with CSS advancements showing promise in meeting diverse language needs. The unique considerations of Arabic script in UI design, technical adjustments necessary for Arabic typography, and handling bi-directional layout challenges using direction-agnostic approaches are discussed. The talk also covers enhancing React for logical CSS properties, building UI tools with icon mirroring, and streamlining icon management and automation for improved developer workflow.

Henry Lee presents a frontend internationalization approach using React and discusses challenges in naming keys for translations. The Talk addresses issues with naming keys in JSON dictionaries, refactoring keys to eliminate translation challenges using GNU GetTex, exploring GetTex workflow for efficient localization with Lingui, defining messages and extraction with Lingui workflow, optimizing Lingui compilation and translation, enhancing Lingui features for translation, and encouraging Lingui adoption for projects by addressing reasons for underutilization and promoting trial and migration.

Julian explores the importance of JavaScript signals, React's paradigm, and the evolution of paradigms in the JavaScript ecosystem. The evolution of state handling in JavaScript from pull to push approaches, the framework principles of state management and observables in JavaScript frameworks, React's signal handling, virtual DOM optimization, and the push approach. Simplified state management with signals and the challenges and solutions in implementing and optimizing signal handling in modern frameworks.

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.

Simeon Griggs discusses Suspenseful Component Composition, the use of fallback props, and the basics of suspense in React applications with a demo showcasing data fetching and layout shifting. Exploring issues with data fetching and suspense boundaries. Addressing the challenges of using suspense boundaries and data fetching for individual rows in React applications. Creating consistent fallback elements for smooth loading experiences in tables by aligning sizes and optimizing data fetching placement. Optimizing data fetching placement for smoother loading experiences. Consider exporting suspense boundary to enhance code cleanliness and be defensive against data fetching errors. Use error boundaries to handle errors in suspenseful data fetching components for a smoother user experience.

Samuel Ouyang highlights the significance of smooth UI in modern apps and introduces the React 19 View Transition API. The View Transition API works with SSR and RSC but has limitations as a wrapper. Implementing the Use View Transition custom hook can address these limitations and make it SSR safe. The custom hook enables smooth transitions for various interactions like route changes, panel transitions, click events, and list reordering. It encourages the optimized use of the View Transition API to improve user experience and avoid DOM hacks.

Front-end migrations challenges and survival guide. Understanding types of migrations: frameworks, libraries, and infrastructure. Strategies include big bang and gradual approaches, balancing risk, time, and maintenance. Comparing outside-in and inside-out migration approaches. Emphasis on the benefits of the inside-out approach for modernization. Web Components offering a universal way to use components across frameworks. Web Components lifecycle and integration with React. Cross-framework integration of Web Components for smooth migration.

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.

Pieter Eigenmans discusses Microfrontends, authentication at Dutch railways, Model Federation, OIDC, and Kubernetes configuration. The SporeViewer app enables real-time train tracking in the Netherlands with multiple applications on one screen. Transitioning from monolithic to modular architecture allows for independent feature deployment and multifederation framework utilization. Microfrontend setup involves splitting applications into front and back end components, organizing them into verticals using domain-driven design. Efficient frontend building with module federation, Web Components, and model federation enhances speed and scalability. Authentication challenges are addressed using OIDC, MSAL integration for token management, and secure API calls via MSAL libraries. Kubernetes configuration enables versatile environment setup using config maps for loading configuration files.

Introduction to JavaScript Less Future, impact of new browser APIs on front-end development, S&C Electric Company overview, shift towards less JavaScript, historical perspective of web development challenges, importance of browser APIs in modern development, focus on key browser APIs for enhanced user experiences, demonstration of date picker functionality. Exploring Date Picker Functionality with Code Integration and Browser APIs. Closing Panel and Utilizing New Browser APIs for Date Time Picker. Controlling Date Time Picker Panel Position with New Browser APIs. Customizing Date Range Styling with CSS and Anchor API. Animating Date Range Picker with View Transitions and CSS Attributes. Developing Text Formatter with Dual Layers and Event Handling. Developing Plain Text Only Content Editable Layer with Highlighting API. Applying Styles with CSS Selector and Color API.

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.

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.

Chris introduces himself as a web developer with vast experience in UX engineering, emphasizing the importance of evoking emotions through interfaces. Childhood influences from anime, Disney, and video games shape career choices. Navigating dreams of soccer and software engineering, finding joy in challenges. Reflecting on 3js experiences and the significance of the golden ratio. Explaining Fibonacci sequence, GPU shaders, and natural patterns. Using React 3 Fiber to enhance particle playground. Celebrating creativity in frontend development as a fusion of engineering and creativity.

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.

Welcome to a storytelling session intertwined with technology aspects, showcasing how a Nexus application was rewired due to unexpected constraints after deployment for an EV client on Raspberry Pi without Node.js. Discussing the initial architecture of a battery management application for electric vehicles using NixJS, D3JS, and edge caching. Challenges faced when Node.js was removed and the impact on server-side rendering and application performance. Facing constraints without Node.js in NixJS app, investigation on adapting to hardware realities, and finding a solution by dissecting NixJS to remove dependencies. Replacing ISR without Node.js, adapting to static export in Next.js, optimizing API calls for client-side performance, rewiring to local setup for enhanced performance, and accidental discovery of static advantage over dynamic. Design for hardware constraints, understand tools and frameworks deeply, stay adaptable, and keep solutions portable.

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.

Exploring accessibility and confusion in the Portal game, character development with challenges and promises, understanding accessibility laws and challenges in projects, enhancing visibility and navigation for better user experience, addressing error handling and screen reader usage, focusing on login accessibility and error messages, recommendations for authentication accessibility practices including inclusive multi-factor authentication.

Bri explores React styling solutions and the CSS landscape in 2025, highlighting challenges with styled components and the emergence of Panda CSS. React 19 introduces new features like resource hoisting and form actions, impacting styling practices. Discussions revolve around CSS paradigms, Tailwind CSS for utility-first approach, and the importance of dynamic state in styling evolution. Considerations for selecting the right styling solution based on team size, experience, and interactivity needs are emphasized, along with insights on optimizing CSS tools and Panda CSS adoption.

Kasia Trzemska introduces the rebranding journey of a seven-year-old app, emphasizing challenges and technologies involved. Challenges in A-B testing include handling winning and losing sides, codebase growth, and user feedback importance. Struggles with component styling, data analysis for understanding design systems, and codebase cleanup for rebranding. Efforts in code automation, typography unification, and promoting design system adoption. Lessons learned include transparency, communication, data-driven decisions, and delegation for success in rebranding projects.

Jonny Fekete discusses building web extensions with React, the simplicity of manifest.json, the shift from manifest.v2 to manifest.v3 in Chrome, and the impact on functionalities like persistent background scripts and access restrictions. The transition to manifest.v3 for web extensions, the siloed contexts of web extensions, and the use of sendMessage API for communication between different contexts. Challenges in web extension development, complexities of setting up custom configurations, and the modern approach with the WXT framework for easier development and state persistence. Challenges in state persistence and data storage in web extensions, including local, session, and event sync storage methods. Managing multiple tabs' state and data storage with consideration for tab IDs to prevent memory leaks. Consider using storage over Redux for better debugging and architecture. Address CSS collision with Shadow DOM and custom web components to isolate styles from the underlying web page. Utilize background script for throttling and debouncing, efficient storage utilization, and the WXT framework for ease of development and communication.

Website performance significantly impacts user experience, often leading to frustration and anger when pages are slow or unresponsive. Beyond psychological effects, poor performance can increase usage costs, and modern websites require a nuanced approach to capture continuous user interactions.This session explores behaviors like rage clicks and cursor thrashing, emphasizing metrics that reflect user emotions and overall satisfaction. We’ll discuss the complexities of performance measurement, highlighting the need to look beyond single metrics. Ideal for those interested in understanding the business impact of site performance and the biases affecting user perceptions.

Introduction to React Summit 2025 focusing on seamless Bluetooth Low Energy integration with iOS Live Activity. Understanding custom modules in React Native and Bluetooth Low Energy basics. Challenges with iOS Live Activity updates on Bluetooth devices without push notifications. Exploring UI background mode in iOS for Bluetooth communication wake-up. Utilizing React Native Bluetooth manager for seamless integration with iOS native modules. Demonstrating Bluetooth communication between peripheral and central devices using iOS Core Bluetooth. Exploring challenges and best practices for live activity development in iOS.

Amy Dutton discusses the transition to React server components in 2022, addressing challenges in implementation. Challenges include server-side rendering, hydration, caching, and server actions. Peter emphasizes the importance of choosing the right tools for product development. React server components impact development workflows and ecosystem perspectives, leading to a shift in developer perspective. RSE benefits include lighter UI, smaller Java bundles, and improved code security. Embracing RSE as an ecosystem effort aims for architectural alignment with frameworks and natural advancements in the development environment.

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.

Welcome to New Jersey. The AI landscape poses challenges in distinguishing valuable content from noise. Two camps exist: excited AI promoters and silent users. Vibe coders face stereotypes and labels in this dynamic field. Vibe coding, derived from a tweet, resembles our daily coding tasks. LLMs assist in research and typing, akin to our processes. Comparison to Prettier shows the potential impact of improved LLM capabilities. Emphasis on domain knowledge in coding. Experience crucial for effective coding results. Understanding fundamentals essential for successful programming. Reading every line is crucial in coding. Provide relevant context and examples. Question everything to avoid being misled. Determinism in using AI is crucial. Utilize high-quality context, tools, and examples for better outcomes. Vibe coding can be beneficial with proper structuring and tools usage. Coding adjacently with vibe coding agents for personal software projects. Building a personalized Disney app for quick access and efficiency while multitasking. Building personalized features like locating turkey legs, utilizing mousketool.ai for tailored experiences, and integrating Repl.it for immersive vibe coding sessions. Creating a map with markers for hunting, integrating a tablet for mission objectives, and developing a personalized app for waypoint tracking. Utilizing a vibe coded app for navigating in the woods and showcasing hardware vibe coding with a hydroponic garden. Automated gardening system for indoor plants, Wyze cam setup for outdoor monitoring, and interaction with OpenAI for feedback on plant status. Development of an official setup with Chad GVD involving solar controller, Raspberry Pi, relays, soil moisture sensors, and a battery. Setting up SSH, tail scale, and Cloud Code for remote access and intense VIBECODING to create temperature scripts and Grafana dashboard for real-time garden metrics. Installing Cloud Code, VIBECODING intensely, and setting up Grafana dashboard for real-time garden metrics remotely. Discussing the impact of vibes on future engineers, considering the role of AI and the evolving nature of engineering in the next five years. Discussing the evolving nature of software engineering, challenges with 3D modeling tools, and the time disparity between software and hardware development in a project. Discussing the rapid development process, iteration in hardware and software, and the importance of caring about the project for effective iteration cycles. Discussing challenges of bootstrapping, overcoming stigma in the tech community, deploying web apps using AI for dev-ops, and hosting Plant Grafana on Raspberry Pi.

Rahul introduces video optimization principles, emphasizing modern formats, compression, bitrate reduction, and lazy loading. ImageKit simplifies video loading by compressing videos significantly and adapting to network conditions. Pausing videos when not in view saves data costs and enhances user experience.

Front-end developers benefit from cloud services like AWS S3 and Lambda. AWS offers services like Cognito for identity management and Bedrock AI models. AWS Amplify provides Hosting and Cloud Development Kit for efficient development. The Cloud Development Kit is recommended for TypeScript deployment. AWS Amplify connects front-end to AWS services and SDK for back-end. QR code feedback is available for the talk.

At first glance, building a pinch-to-zoom and pan component in React seems simple. After all, the browser’s gesture events are already there. But when you need realistic, design-friendly motion and the ability to zoom axes independently, the problem gets much trickier. In this talk, I’ll share how we approached this challenge in our AG Charts React component: from the pitfalls of naïve implementations, to the realisation that pan and zoom are mathematically identical problems. You’ll see how some pen & paper algebra unlocked a precise and intuitive gesture system where X and Y scales update independently—kept in sync with React state—delivering smooth interactions beyond what you get in maps or images.

In this talk we will cover how using design patterns in Figma can optimize agentic coding workflows, allowing you to stay in the driver seat while deferring the tedium to LLMs.