React Summit 2025

Introduction to React Compiler, its benefits, and the problem of memoization in React. Performance issues due to stateful components in React, solution with React.memo and use memo, and the benefits of React compiler in automating memoization. Compiler's transformation into high-level intermediate representation provides a clearer understanding of code operations and data flow, addressing the issues with unique identifiers for variables in complex scenarios. Compiler ensures each variable is assigned exactly once through single static assignment, resolving issues with variable values based on code paths and introducing unique names for assignments. Effects describe how operations interact with data, ensuring safe caching with types like read, store, capture, mutate, and freeze effects. The compiler understands operations but needs to identify values that change between renders for React, leading to the reactive analysis phase to determine reactive values in the component. Variables marked as reactive for potential changes between renders are optimized for caching. Compiler identifies dependencies to group operations for efficient caching. Scopes are established to cache related variables together and ensure efficient rendering and performance improvement in the final JavaScript code. Compiler sets up cache slots for dependencies and outputs to optimize performance. Scopes work independently to recalculate based on changes, ensuring efficient memoization. React Compiler streamlines memoization, providing automatic correct optimizations without manual burden, paving the way for performance-focused code.

Bun is a fast JavaScript runtime aiming to improve Node.js compatibility and streamline the development toolchain. It offers seamless full-stack development capabilities with features like WebSocket support and code-splitting. The efficient package management in Bun optimizes production processes by reducing parsing time and system calls. Bun's collaboration plans include enhancing monorepo support and integrating with frameworks and routers for improved functionality and runtime efficiency.

Panelists introduced themselves and discussed React Server Components (RSCs), exploring usage in production and alternative frameworks. Challenges of adopting RSCs and benefits of universal data fetching were highlighted. The complexities of implementing RSCs were discussed, emphasizing the need for better integration. The potential of server components for composability and evolving architecture was explored. The React compiler's impact on performance optimization and component re-rendering was examined. Discussions included enhancing React with compiler features, evolving feature sets, and reimagining state management. Improvements in communication, community engagement, and dependency management within the React ecosystem were emphasized. Recommendations for managing dependencies, component performance, and audience appreciation were shared.

Introduction to React compiler, differences from React 19, installation of Babel plug-in React compiler, specifying target React versions, and how React compiler detects and processes component dependencies. Configuring React compiler settings, exploring default options and configurations, utilizing React compiler playground website for configurations, dealing with JSX markup re-computation. React compiler feature for extracting JSX from array map callbacks, limitations of enable function outlining, enabling JSX outlining for separate functions. Function memoization in React compiler, React compiler beta stage, potential errors with React compiler. React compiler error: memorization preservation, hidden messages, validation settings. React compiler: validation tools, hooks treatment, memorization challenges. Changing hooks to functions for React compiler optimization. React Compiler usage considerations and potential optimizations.

Tejas discusses AI agents and productivity at the React Summit, emphasizing the role of AI in enhancing user experiences. The use of JSON data and system prompts to improve parsing and streaming processes is highlighted. The importance of AI agents in web navigation for increased productivity and efficient website interaction is explored. Development of tools like the Google Calendar Manager Agent for better calendar management and troubleshooting calendar event creation are discussed. The talk also delves into future possibilities in UX and technology, along with insights on AI component creation and comparison between Langflow and N8n.

React's transformative impact, community support, and server-side evolution highlighted. Exciting developments from static site generators like Next.js and Gatsby to server-side rendering evolution, including React Fiber, Hooks, and server components. The pressure on servers in 2020 led to the announcement of server components, a complex but transformative idea. New challenges arise with weaving server and client, requiring adaptation and file organization. Evaluation of React server components' worth based on server-side needs and bundle issues. SPAs are prevalent and valued, despite the focus on client-side apps. TanStack Router offers unparalleled URL state management and type safety, enhancing SPA development. Exciting developments ahead with the DaVinci release, supported by sponsors for TAN stack's full-time commitment and core contributors.

Mark Erickson discusses the state of React in 2025, React community debates on React's direction and misconceptions, React's shift towards client-side frameworks and SSR emphasis, React's feature development process at Meta and Vercel, controversy around Vercel's server components involvement, tight relationship between React and Next, React team's emphasis on frameworks for app performance, critique of React's heavy-handed framework recommendation, React team's delay in adding VEET as a recommended tool, challenges with server components' origins and communication, no official signals support planned for React 19, social media impact on React development decisions, React community diversity and server components usage insights, React's evolving black box concept and tradeoffs discussed.

Discussing building better UIs faster with AI, emphasizing the use of LLMs as predictive text models and the need to maximize their smart aspects in coding and UI development. Exploring file context management in Cursor IDE and demonstrating quick UI updates using AI for coding efficiency and real-time results. Discussing advanced workflows for efficient development using feedback-driven approaches and incorporating test-driven development for iterative and automated testing in Cursor IDE. Exploring advanced prompt tricks in Cursor IDE for efficient development by writing tests first, updating code iteratively, and enabling autorun mode for automated testing and bash commands. Cursor's Annoying Prompt Behavior, Automated Testing Benefits, and Test-Driven Development for Reliable Code. AI Feedback Importance and AI Testing Complexity with Clear Goals. AI Challenges, Visual Front-End Focus, and Fusion Preview. Integration of Figma Designs for Visual Tweaks, Exploring New Features and Design Systems, Updating Customers Tab and Making Visual Edits, Making Carousel and Visual Updates, Granular Design Updates and AI Integration, Dynamic Updates and Component Refactoring, Tagging Builder Bot for Automated Code Updates.

Shen's first English talk at a conference introducing Lynx project with viral success, Lynx leveraging web technologies for multi-platform development, bridging web strengths with native capabilities, enhancing development capabilities with native UI elements, instant rendering, MTS enabling man-thread scripting and CSS support, exploration of Tailwind integration, embracing Haskell in Lynx for cross-platform thinking.

Innovating ExpoGo (formerly Exponent) for rapid mobile prototyping with custom native code support and instant deployment. Revolutionizing native app development with Continuous Native Generation (CNG) for enhanced speed and access to new features. Empowering React framework with Expo for web, enabling universal apps with SEO benefits and advanced CSS tools. Innovating navigation with Expo Router for seamless file-based routing and native API integration. Streamlining app deployment with Expo for efficient full stack development and user onboarding.

Modern software development shift towards developers involves more complex architecture decisions with trade-offs and long-term consequences. 11 tips learned from diverse projects and roles. Focus on decentralization, avoid technology-first approach, and consider context for great architecture. Understanding the holistic approach to architecture. Linking architecture to culture and structure. Importance of aligning decisions with business needs using techniques like event storming and domain storytelling. Netflix's core domain focuses on content accessibility and tailored user experience. Supporting domains like personalization ensure usability even during downtime. Payment methods, a generic domain, are essential for subscription. Adapting boundaries and architectural characteristics is crucial for evolving businesses. Define evolving core domains and adapt characteristics accordingly. Select key architectural characteristics for system design. Consider different availability needs for various subdomains like core and generic. Latency varies based on functions; strict for finance, flexible for integration. Understand and apply specific characteristics to subdomains for optimal system performance. Understand the need for different approaches in system design. Consider availability requirements for active architecture. Evaluate decisions impacting software design and technology. Modularize workload at code or code-infrastructure level. Consider context in choosing between monoliths and microservices. Adapt system modularity based on context and team structure. Consider modularity based on system requirements. Be pragmatic in architectural decisions. Utilize event-driven architecture in distributed systems. Leverage infrastructure for efficient service stitching and delivery. Adapt to changing system characteristics for scalability and efficiency. Consider cost implications of shifting from event-based to cron job. Design software for evolution, embracing changes and tradeoffs for user-focused systems. Create a sociotechnical system balancing long-term vision and immediate needs with a lean mindset. Embrace an iterative approach to software development, understanding the domain, consumers, and the system. Master communication skills for architects by focusing on communication, inclusion, and documentation. Translate technology reasons into business benefits to effectively communicate with various stakeholders. Change language to match audience, share reasoning effectively. Involve others in decision-making for better understanding and solutions. Master architectural decision records and architecture as code. Utilize written communication for API changes, involve all voices. Sequence diagrams aid team understanding; master architecture as code. Focus on key aspects, prioritize effectively to avoid distractions.

Introduction to multithreading in React for smoother user experiences by utilizing web workers and off-screen canvas. Tools for breaking free from JavaScript single-threading with web workers and offscreen canvas. Smooth UI performance with web workers, limitations, and offscreen canvas for offloading graphics rendering. Design separation for preventing threading issues, offload CPU-intensive tasks to workers without DOM access limitations. Manage WebWorker communication effectively with promise-based approach for tasks. Enhance data transfer efficiency with transferable objects and shared array buffer. Decide when to use multi-threading techniques wisely; reserve workers for data processing and complex operations. Best practices include terminating workers when not needed, profile applications, and explore future front-end parallelism for optimized user experiences.

Introduction to the State of React survey and the history of developer surveys. Detailed analysis of survey results, user demographics, and job titles. Examination of React API trends, user sentiment towards APIs, and new API challenges. Analysis of React library satisfaction, particularly with Next.js. Discussion on React state management and data loading, including pain points. Insights on React library usage patterns and application trends. Key takeaways include staying calm, appreciating foundational React elements, and relying on data for a balanced view.

Introduction to Playwright as an end-to-end testing tool with easy installation and code generation. Features include visual comparisons, API testing, and best-in-class developer experience. Playwright offers AI capabilities, practical testing tools, and innovative testing strategies. Challenges in testing specialized domains are addressed, along with best practices for test dependencies and readability. Optimizing testing efficiency through parallelism, code organization, and network cache usage. The discussion also covers test performance enhancement, managing workers, optimizing dependencies, stability of test functions, and the use of Playwright sharding in CI/CD runs.

The speaker provides insights on transitioning to a staff engineer role, emphasizing the key pillars of technical excellence, organizational impact, and mentorship. They discuss challenges faced in leading projects at Slack and misconceptions in staff engineer development, highlighting the importance of networking and self-promotion. Strategies for advancing to staff engineer level, promotion to senior staff engineer, and selecting strategic projects for career progression are outlined. The talk also covers career advancement strategies, navigating responsibilities as a staff engineer, deciding on the staff engineering path, and considerations in career decisions within engineering.

Imagine the scenario of working on the Mars rover, emphasizing the importance of thorough testing. Learn to test React applications effectively like an engineer. Focus on user-centric testing over traditional paradigms. Write precise test cases as user stories using BDD for clear communication. Utilize a structured approach with arrange, act, assert steps for clear tests. TDD is valuable for bug diagnosis and solutions, emphasizing efficient bug reproduction and resolution. Annotate tests to reproduce and fix bugs, focusing on user flows and effective bug fixing.

The speaker highlights challenges in online learning platforms and the necessity for a developer-centric platform. Insights on building a specialized platform with real-world case studies are shared. MDX is discussed for creating flexible content and organizing content pieces into reusable modules. The platform architecture involves a monorepo with TurboRepo managing a stack of technologies. Strategies for enhancing user engagement, user retention through streaks, and key takeaways like scalable architecture, strategic rendering, and user-focused development are emphasized. Performance optimization techniques such as React Server Components and asset optimization with WebP are mentioned. Strategies for privacy-aware metrics tracking, user learning metrics, and avoiding server-side rendering for better performance are also covered.

Introduction to building cross-platform super apps with React, React Native, and Repack. Discussion on leveraging module federation for cross-platform applications and the benefits of Repack, React Native, and module federation. Explanation of module federation's potential in React Native with Repack. Importance of Repack as an alternative bundler for React Native and the significance of sharing infrastructure. Overview of Repack V5's compatibility with React Native, migration benefits, and cross-platform micro-frontends. Integration of federated modules in React Native for seamless standalone module integration. Configuring flexible federated module dependencies with RSPack, Zephyr Cloud for versioning, and lazy loading. Integrating SDK for decoupled module development and enhancing federated module UI flexibility. Challenges and benefits of integrating external modules in React Native. Improving application development speed with Module Federation and Repack for faster deployment.

The talk explores the concept of building fast-navigating pages using speculation rules to enhance user experience. It delves into human impatience and the evolving perceptions of page speed. Speculation rules optimize page loading for seamless transitions based on user behavior predictions. Configuring speculation rules in HTML involves action decisions, target selection, and eagerness settings impacting loading behavior. Eagerness settings determine link loading behavior and resource optimization. The implications of speculation rules implementation include responsible pre-rendering and pre-fetching, measurement metrics assessment, and considerations for broader browser support. The talk also covers debugging speculation rules, efficient analysis of pre-rendered content, browser regulations, and bandwidth optimization techniques for improved page loading efficiency.

Being senior isn't just about tech skills; continuous improvement and broadening impact are vital for growth in the tech industry. Being effective in your work means focusing on outcomes that create superpowers for others, increasing your career opportunities and impact. Delivering valuable work creates opportunities for growth and rewards in your career. Being a senior engineer evolves from task execution to leadership and team management, leading to significant career growth and financial rewards. Results on your resume matter for your next job. Leadership, not titles, defines a senior engineer's role. Senior engineers lead projects, create direction in chaos, and focus on delivering results efficiently and effectively.

In 2008, the movie Vantage Point inspired the exploration of diverse perspectives in software development. The evolution from traditional CSS to atomic styles in StyleX and the scalability advantage of atomic JavaScript are significant areas of interest. Rethinking server-side rendering with React, Web Components, and the Hano framework introduces new possibilities for interactive components. Custom elements, Shadow DOM, and the Solenoid framework address challenges in CSS scoping and SSR for lighter-weight HTML. Signal functions in Solenoid offer a unique approach to data management and component development, enhancing app efficiency. Real-time interactive server setup, innovative server-side development, and the use of HTML as a source of truth contribute to project speed and efficiency. Debugging, component definition, HTML streaming, and component usage highlight the declarative nature and streaming capabilities of server-generated HTML.

Three years ago, faced tough decision job change. Chose tech co-founder role for innovative idea 'war with apply to job button' for universities. Startup validation via email engagement with decision makers, avoiding premature seeking of investment. Emphasis on tech stack adaptability, modular design, and reusability. Challenges with third-party library management, component library reorganization, and optimizing CSS loading. Focus on app quality improvement, release process enhancement for global success.

Alexandre Rivet emphasizes prioritizing architecture over frameworks in web development for efficiency and project maintenance. Leveraging long-term memory improves code comprehension and speed. Effective React applications require clear component naming and caution with global state usage. Strategies for efficient React development include separate logic for DOM and smart components, reducing global state dependencies, and creating independent API clients for flexibility.

Speaker discusses the challenges in defining web speed metrics and the importance of non-hackable user behavior metrics. The impact of survivorship bias on data analysis is highlighted, along with global internet access factors and the correlation between web vitals and business outcomes. User perception of app performance, UX research impact on API design, and navigating data analysis biases are also covered. The talk emphasizes the need to connect technical metrics to business outcomes for app optimization and success.

Ido, a full stack developer, discusses the benefits of building data visualization components from scratch using React, SVG, and minimal D3. Understanding basic SVG shapes, group elements, and SVG's declarative nature. Exploring SVG's compatibility with CSS, DOM events, and browser features. Highlighting pitfalls in integrating D3 with React and separating data transformation utilities. Utilizing D3 libraries for data manipulation and creating Sparkline components. Enhancing components with markers, CSS styling, interactivity, transitions, and pie charts. Utilizing CSS for animations in data visualization and gauge visualization with needle animation. Defining SVG components, interactions, and considerations for DIY vs. library integration. Exploring D3 axis, AG charts, and time-based animation.

The talk emphasizes component-based thinking in JavaScript development, highlighting the importance of components in non-React projects and the flexibility of JSX usage. It explores state management in React and tools like Redux, showcasing the significance of mastering web fundamentals before delving into frameworks. The discussion touches on balancing framework selection, understanding error messages in native approaches, and the importance of maintaining simplicity in design while adopting concepts in app development.

Kyle West emphasizes the importance of building accessible products and shares experiences in ensuring accessibility. A focus on accurate ARIA labels and the impact on accessibility. Optimizing accessibility with proper labels and utilizing the aria-hidden attribute. Lessons in ARIA usage, tabindex attribute, and the importance of quality code reviews. Addressing vestibular disorders in web design with solutions like prefersReduceMotion media query. Enhancing user comfort with accessibility queries and the importance of inclusive user-centric design in product development.

The Talk delves into enhancing success rates in software projects through focusing on iteration velocity and observability. Discussions revolve around the advantages of utilizing full stack web frameworks like Next.js and Remix for efficient software development and improved code sharing. The integration of TurboStream, BFF, and Model Context Protocol (MCP) in full stack development is explored. Vercel and Cloudflare's innovative solutions for integrating MCP servers into Next.js applications are highlighted, simplifying code sharing and enabling diverse front-end experiences.

Introduction to the risks of AI in web development and the potential security threats it poses, drawing parallels to the fictional AI Skynet and emphasizing the importance of understanding and mitigating these risks. Discussion on the OVASP project revealing the top security risks in AI-assisted development, focusing on prompt injection attacks as a significant threat to LLMs. Explanation of prompt injection attacks in AI involving social engineering, role-playing to bypass AI safeguards, and data exfiltration risks, emphasizing the critical threat of privilege escalation in LLMs. Discussion on AI toolkit for authorization in Gen AI projects and the risks associated with over-reliance on AI-generated code, especially in the context of 'white coding' and regex vulnerabilities. Discussion on the risks of using AI-generated regular expressions without validation, the importance of manual review, code analysis, and human approval in AI-assisted development, emphasizing the need for security protocols and vigilance.

Edoardo, a senior dev rel at Storyblok, delves into server components' intricacies, urging a better understanding. The evolution from PHP to React marked a shift in web development paradigms, emphasizing server-side rendering and dynamic client interactions. Facebook transitioned from PHP to React, introducing XHP subset. Isomorphic JavaScript and server-side rendering emerged with data requests and content rendering. React server components enable server-side rendering with data fetched from DBMS or CMS, emphasizing patterns for seamless transitions to new frameworks.

Evangelia, tech founder of Fioromat Academy, discusses the impact of serverless technologies on frontends, emphasizing a shift towards lightweight, stateless backends split into smaller units and the increased importance of API gateways and serverless functions. The discussion also highlights the significance of optimistic state updates, caching strategies to reduce API calls, resilient connection handling with retries for failed HTTP calls, granular error handling at the component level, and custom fallback UI per component. Overall, the Talk emphasizes the evolving frontend architectures and the necessity of adapting to changes in data structures and technologies.

Inosency Andembera, React developer, discusses using React for building scalable, secure, and inclusive applications for emerging markets like Malawi and Africa. Addressing challenges of Internet connectivity, device limitations, security concerns, and inclusivity for first-time Internet users. Utilizing React for performance, security, and inclusion in emerging markets through code splitting, lazy loading, authentication, input validation, multiple language support, and simple UIs. Highlighting React's features in enhancing inclusion by addressing challenges in emerging markets, such as limited digital literacy, creating simple UIs, supporting multiple languages, internationalization, step-by-step UIs, and semantic HTML for accessibility. Zunga, a financial platform in Malawi, showcases React's benefits in addressing financial service gaps, scalability, offline support, and security enhancements.

Hello, React Summit. Excited to talk about Next.js adapters. Evolution towards adapter solutions to simplify deployment complexities. Minimalist adapter interface for customization and structured output handling. Key hooks and configurations for platform-specific optimizations. Partners collaboration for enhanced experiences in Next.js deployments. Simplified, platform-agnostic deployments for better developer experience.

Exploring the evolution of web forms from HTML2 to Web 3.0 and the crucial role of form validation in application development. The importance of form validation, challenges, and the need for better approaches. Introducing VEST as a flexible validation tool inspired by unit testing frameworks. Highlighting VEST's logic separation, asynchronous validation, and advanced features like caching. Discussing warning states, user guidance, and the impact of form validation on user experience and application success.

Matt Coleman emphasizes the importance of animation in teams and user engagement, drawing from his career experiences. Effective animations focus on brand identity and user experience, avoiding excessive flashiness. Real-life elements in UI animation create familiarity and draw attention. Adding subtle animations to Jira UI can enhance user experience. Collaboration between designers and developers is crucial for successful animation creation. Tips include using CSS or JavaScript for animations, with recommended libraries like Framer, Greensock, Gsep, and Lottie.

Real-Time Multiplayer Game with React Native case study of Quickflex game creation, gameplay overview, personal introduction, problems faced, and solutions implemented. Game flow overview, routing challenges with Expo Router, transition to React Navigation for stack-based routing. Challenges with tab-based routing, transition to stack-based routing with Expo Router, importance of file structure in Expo projects. Challenges with game state management, handling UI states, and transitioning to improved code structure. Lessons on state management, using routes, hooks, WebSockets, and deployment challenges. Introduction to Durable Objects for stateful serverless applications, using PartyServer for WebSocket servers, and optimization tips for game development.

Raul from ImageKit discusses optimizing and streaming videos, highlighting challenges like resolutions and codecs. Developers can use ImageKit Video API for seamless integration and quick optimization. ImageKit offers streamlined video hosting with real-time optimization and adaptive streaming. It enables easy access to cloud storage and transformation of videos for better user experience.

The Talk covers the importance of Playwright as an end-to-end testing tool with AI capabilities and a supportive community. It addresses challenges in testing specialized domains like healthcare analytics and explores modern testing strategies like the testing pyramid and testing diamond. The implementation of the testing mushroom strategy for end-to-end testing, optimization of test dependency handling, and enhancement of test report readability and speed are discussed. Speed optimization, mocking strategies, test performance enhancement, parallelization, flaky test handling, decorators, test user registration, audience engagement, testing stability, sharding considerations, and gratitude for engaging discussions on testing strategies are also highlighted.