November 13 - 15, 2023
React Summit US
New York & Online
React Summit US 2023

The biggest React conference in the US

32 min
Gateway to React: The React.dev Story
A behind the scenes look at the design and development of the all-new React docs at react.dev. The new react.dev launched this year introducing new methodologies like challenges and interactive sandboxes and subtle inclusivity features, like "international tone" and culturally agnostic examples. Not only have the new docs changed how people learn React, they've inspired how we think about developer education as a community. In this talk, you will learn how the React team and some ambitious community members made the "React docs rock" for a generation of front end developers and how these new patterns and established techniques can be applied in your favorite projects.
30 min
The Rise of the AI Engineer
We are observing a once in a generation “shift right” of applied AI, fueled by the emergent capabilities and open source/API availability of Foundation Models. A wide range of AI tasks that used to take 5 years and a research team to accomplish in 2013, now just require API docs and a spare afternoon in 2023. Emergent capabilities are creating an emerging title: to wield them, we'll have to go beyond the Prompt Engineer and write *software*. Let's explore the wide array of new opportunities in the age of Software 3.0!
27 min
R3ACT: A Frightening Look At Performance Figures
In the 10 yrs that React has been present, we've seen an unprecedented amount of progress on the web. The browsers have grown in capabilities by leaps and bounds, tooling exploded and frameworks slowly emerged to become quotidian technology. But just as the web changed, so did users of the web AND their needs. Performance engineers have monitored the lavish and liberal use of frameworks, resulting in the disservice to users AND their user experiences. "R3ACT" is talk that will uncover and discuss some performance perils as they appear on the web, with React in mind, supported by lab and rum data.
21 min
The Epic Stack
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.
30 min
Journey Into the Unknown: My Adventure Unravelling the Mysteries of the Netflix TVUI Universe
At Netflix, millions of our users watch Netflix on TV Devices. How do we develop the UI for all of the different types of devices? That's exactly what I wanted to know! I'll be sharing why it's important to take on new growth opportunities, how to navigate the difficulties of learning a whole new platform at a new company, and some of the things I've learned about how we use React to bring Netflix to your TV!
29 min
React Server Components from Scratch
React server components (RSCs) are a huge paradigm shift for React. You might even ask if NextJS and server components are the same thing (spoiler: they're not!) This talk demystifies how RSCs *really* work outside the framework. We'll build our own Node server, hook up the RSC renderer by hand, and understand the bundling and routing logic to ship a server component to your browser. Yes, all with live coding. What could go wrong...?
28 min
Rendering: To Sync or Not to Sync?
Let’s dive deep into React rendering and evaluate the implication of Concurrent Rendering and automated batching on code that previously relied on the synchronous nature of v17. Does it always make things better? With a real world case study, we evaluate useSyncExternalStore and flushSync as tools to restore synchronous rendering to avoid “visual tearing”. Working through the trade-offs of these approaches will give us new insights into React rendering and hints on how we can optimise our applications.
28 min
Javascript Optional: Modern React Applications That Work Without JS
Have you ever tried browsing your favorite websites with JS disabled in your browser? It can feel like cutting a lifeline for the internet. Instead of welcoming user-friendly interfaces you’re faced with a blank wall that says “please enable JavaScript“ in the center of it. But it doesn’t have to be that way. In this talk, we’ll explore techniques for building modern web applications that can remain functional in a JS-free environment, and provide a full experience when JS is turned on.
26 min
React Concurrency × Core Web Vitals
This talk comes with bad news. Google has launched a new metric – INP – which measures how fast page interactions are. This metric becomes a Core Web Vital in Mar 2024 – and pretty much every React app Ivan has seen so far has this metric way in red.
The good news is React 18 shipped new features that help to solve this – notably, useTransition() and Suspense. And in this talk, we’ll look at how exactly these features work, what they do, and how we can use them to make INP green.
5 min
Transforming Images Using AI Without Leaving Your React App
Image optimization libraries abstract away the hard parts of working with images so that you can focus on shipping. But these tools don’t let you do complex transformations to your existing images. Adding text, removing distracting backgrounds, or upscaling images to higher resolution all require you to download, transform, and re-upload your images. This talk will explore using AI image APIs and unpic-image to handle complex image transformations inside our React applications. We’ll remove and replace image backgrounds and use context-aware facial cropping to create responsive layouts.
8 min
Canva’s App UI Kit: Empowering Developers With Modern Web Technologies
At Canva, we help 150 million + monthly users create and design. How do we enable developers to do the same? Intro Canva's Apps SDK, which is built to empower developers to efficiently create UIs for their Canva Apps using React. Canva recently streamlined the app creation process by compiling some of the most frequently used and requested UI components by our developers in our @Canva /app-ui-kit package. I'll be sharing how we iterated upon our Apps SDK to empower developers globally to build their brand into Canva.
27 min
If You Aren’t First You’re Last
In this talk I will be covering various strategies and techniques that you can employ to make your apps fast and keep your apps fast. From tips and tricks around measuring performance, to architectural strategy and dirty rotten tricks.
27 min
Design Systems Carnival! One Accessible Component, Many Pretty Masks
Design System components are like guests at a Venetian Carnival, enjoying the festivities. One guest — the disclosure widget — wears three distinct masks, elevating a Carnival to a Masquerade Ball. Or… is it? What kind of Carnival are you attending if those masks get mixed? In this talk, you’ll learn the secret to creating a reusable — and accessible — component that can masquerade as many and give your component library access to the most exclusive of Carnival attractions.
27 min
Forget Bad Code, Focus on the System
Prop drilling is fine. Duplication is great. Long functions are love.

We talk a lot about bad complicated code because it’s easy to see the problem. But research shows engineers can work around self-contained bad code just fine. What really trips them up is something else entirely – architectural complexity.

Architectural complexity makes your code hard to work with, causes 3x more bugs, halves productivity, and may even cause devs to ragequit. In this talk we explore what you can do.
13 min
Want to Build an Enterprise-Grade App? Tear One Down!
Building enterprise-grade applications is challenging. So how can you learn to build one? Start by tearing one down!! Say hello to Contoso Real Estate - an open-source reference implementation featuring a composable architecture with micro-frontends and a cloud-native backend - that provides the perfect sandbox for hands-on exploration and learning.

In this talk, we'll take the implementation for a spin using GitHub Codespaces as our local development environment to explore the code, build & preview the application and deploy it to the cloud with one command. We'll dive under the hood to understand the project structure (monorepo), developer experience (tooling) and application insights (monitoring). Want to join me on the teardown adventure? Just bring your browser and a GitHub account!
8 min
Beyond First Load Speed with INP
In this talk, we will go on a journey in the future of the core web vitals potential member INP, which will help in improving the interactions in all interactions in the session's lifetime, not only the first input delay as in the FID, showing some case studies and a way to optimize your website for INP, you will go away with a bunch of recommendations to do immediately
11 min
Road to Zero Lint Failures: Tackling Code Quality Challenges at Scale
Lint rules enable us to uphold code quality and minimize errors. It can positively impact developer productivity and happiness especially when working in a massive application with multiple teams working together. But what if your large scale application contains thousands of lint failures over the many years it has been running in production? This talk will explore actionable strategies for effectively addressing lint failures at scale so that we can once again rely on lint rules to ensure consistent code quality and streamline development processes, leading to a more robust and maintainable codebase.
17 min
A Nerdy Guide to the Web Trending Concepts
What do S.H.I.E.L.D. and A.R.G.U.S. have in common with edge computing?
How can Iron Man and Batman help you understand hydration, partial hydration, and resumability?
What can the Watchers or the Monitors tell you about Reactivity?
Join this adventure straight from the pages of a comic book as your favorite heroes and villains help you understand some of the most discussed topics on the web now.
5 min
Suspense for Data Fetching: How to Fetch During Render
What is suspense for data fetching in React? Why does React's model make creating network requests during render so difficult? Why does (to the presenter's knowledge) no library besides Relay support this, despite its sheer convenience?
In this talk, Robert will discuss how React renders components (especially with regards to Suspense), and how to build a data-fetching library that functions correctly in light of those behaviors. Then, with all the pieces in place, we'll use a library, @boulton/react-disposable-state, to roll our own suspense-compatible data fetching!
16 min
Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style
Join us as we dive into the exciting world of React Server Components, an feature designed to revolutionize the way we build web applications. In this action-packed talk, we'll explore the key benefits of Server Components, such as reduced client-side code, improved performance, and streamlined development experience. Through engaging examples and live demos, you'll learn how to integrate Server Components into your React projects and harness their power to create next-level user experiences. Don't miss out on this opportunity to stay ahead of the curve and elevate your React skills!
10 min
React State Management with Valtio
In this talk, we will explore how Valtio can simplify your React state management by providing a minimalist and performant solution. We will cover the basics of Valtio, including how to create and update a store and how to access and modify the store from your components. We will also dive into some advanced Valtio features, such as subscribing to changes in the store, andusing memoization to optimize your components' performanc. By the end of this talk, you will have a solid understanding of how Valtio can make your state management more efficient and effective, allowing you to create scalable and maintainable applications.
10 min
The Messy Middle — Navigating Complexity in Large React Applications
The project started out great—the team was motivated, moving fast, and shipping features ahead of schedule. But little by little, complexity found its way in. Implementing small changes takes forever now, tech debt is piling up at an alarming rate, and everyone is losing confidence that the project will ever get done. Welcome to the messy middle. 
Taking examples from real-world projects that shipped way too late, we'll explore the symptoms and causes of complexity in large React applications, and we'll share tips and strategies for dealing with it before it takes over your codebase.
12 min
Defeat Decision Paralysis: Building a Killer Design System in Isolation
These days everything has an app or website and users have come to expect perfection out of their UIs. With the bar so high, it can be overwhelming for those of us designing and building those experiences. Before you start building you need to choose fonts, type, spacing, and colours. What’s more, every decision you make seems to lead to even more options.

Shaun will show you how to work through these tough decisions in small isolated steps that will make this massive undertaking feel like a breeze. You’ll learn how to build your colours, typefaces, and spacing into design tokens, build a theme, and develop your components in isolation using tools like Storybook.
27 min
Lightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen
Ready to take a thrilling ride into the world of headless e-commerce with Shopify Hydrogen? This cutting-edge solution, built on top of Remix, is the latest and greatest way to build high-performance online store. E-commerce is more important than ever, and providing a seamless customer experience is key. But building a platform that delivers can be daunting, even for experienced developers. With Hydrogen, you'll not only find it easier to build a top-of-the-line online store, but you'll also discover how much fun it can be! From creating collections and products to implementing a shopping cart, we'll show you how Hydrogen can take your developer experience to the next level.
9 min
Content Security Policy with Next.js: Leveling Up your Website's Security
In this talk, we'll explore the powerful security feature of Content Security Policy (CSP) and how it can be implemented in Next.js to bolster your website's defenses against common web attacks like Cross-Site Scripting (XSS) and data injection. We'll cover the basics of CSP, its benefits, and best practices for implementing it in Next.js. 
Additionally, we'll share some tools to evaluate and test your policy. By the end of this talk, you'll have a solid understanding of how to level up your website's security with CSP and protect your users from the ever-present threats of the modern web.
22 min
Type-Safe Style Systems: The Future of CSS
Most CSS developers today write visual styles in terms of what you literally see: exact color values, size numbers, and so on. But what if you could write styles as a function of how they fit into your design system? And what if you could get type safety in specifying and using those values, including in responsive props?

This talk will dive into some of the key features and flaws in many design system builders today such as Chakra UI and Tailwind. We'll establish what the best next steps for design systems should be with type-safe TypeScript APIs and performance both for prebuilt pages and at runtime.
22 min
Breaking the 'useEffect' Habit
Do you or a loved one suffer from the all to common practice of 'useEffect'? Have you re-rendered more times than you can count? Are you ready to revolutionize your React code?
Explore how to optimize performance, streamline your code, and reduce errors by challenging the conventional use of 'useEffect'.
Inspired by the React Docs themselves, this talk will guide you through common 'useEffect' scenarios, demonstrating powerful alternatives to enhance your codebase. Embrace simplicity and elevate your React development skills with us!
"You might not need an effect... Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone."
Believe it or not, that intro is taken straight from the React Docs!
14 min
Three Factors That are Blocking Contributions to Your Open Source Project
When talking about contributing to open-source projects, it’s crucial to understand from a maintainer point of view what factors are stopping new contributors from contributing to your project. Whether your codebase is very overwhelming to the contributors for the first time or it  lacks good first issues and enough responsive response to their problems. 
In this talk, I will explain how I built a campaign at Amplication that scaled the contributors from 30 to 200 in just one year and how it solved every problem I mentioned above.

9 min
The Unexpected Key Value Pair in Mentoring
Finding mentorship when beginning your professional journey can be hard, yet it is so vital to have this support to build confidence, and grow at each stage of the process.  5+ years ago, Sidney reached out to me on LinkedIn with questions about bootcamps.  I was finishing my first year at Stitch Fix and from that first GoogleMeet call, we have now met nearly every month and followed and supported each other throughout our respective journeys in engineering.  We have never worked together, and we’ve never met!  Join us as we meet for the first time in person and talk about how vital our pairing has been! 
9 min
Trees aren't just Foliage: ASTs and Practical Usage
ASTs are prevalent in everything we do. ESLint, Typescript, etc allow us to dive into our source code in a way we might not be familiar with. Let's take a look at how some modern tools use ASTs to improve our lives as developers. Some of the tools to be covered include: TS-Morph, Typescript, TreeSitter, and ESlint. Depending on time, I can dig into various tools and patterns for working with ASTs and how they can fit into any modern developer workflow.
11 min
How Realm by MongoDB is Testing Native Modules “on device”
Running tests on Node.js is common practice for app and library developers. But when your library is integrating more deeply with the platform, operating system or JS engine, you need to run tests “on device” increases. The Realm JS team at MongoDB is faced with this challenge, as we’re maintaining a React Native library with native modules. In this talk I’ll share the “mocha-remote” package which we’ve built to help us run tests “on device” while getting reporting and remaining in control from the comfort of our terminals.
9 min
Automating React Native Deployments
In this talk Cecelia will walk through some options for integrating automation into your React Native deployments, including configuration, testing, code signing, and app store uploads. Whether you are just getting started with automation or want to build a full CI/CD pipeline, this talk will have tactical examples you can start using for your own React Native app.
21 min
Pushing Boundaries to the Edge
While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions. We’ll discuss why the main hosting providers are introducing this technology, and why different JavaScript frameworks are modeling their approaches based on Edge computing.
9 min
Virtual DOM: Back in Block
The virtual DOM is generally regarded as a necessary evil, a performance tax that we have to pay for the convenience of declarative UIs.Until now.In this talk, we'll take a deep dive into what the block virtual DOM is (an new, innovative approach to VDOM), and how Million.js can help you improve the speed of your React applications. This talk will also provide a helpful overview of how the React virtual DOM works. By the end of this talk, you'll have the knowledge to not only start improving your React apps' performance with Million.js, but understand the underlying internals that make it so fast.
19 min
Measuring Coverage of React Design System
Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system.

The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system.

- Introduction to react-scanner
- Measuring Component Usage
- Identifying Native HTML elements and Styled Components
- Showing Tree structure of Page in terms of Components
- Highlighting Anti Patterns
- Benefits / Use Cases for this tool
23 min
Taming the State Management Dragon
We spend a lot of time discussing which state library we should use, and fair. There are quite a few, from the common one everyone uses and loves to hate on, to that one quirky alternative, to several up and comers. However, discussing which library is best puts the cart before the horse.

When figuring out how to handle state, we should first ask ourselves: what different categories of state do we need? What are the constraints of each category? How do they relate to each other? How do they relate to the outside world? How do we keep them from becoming a giant, brittle ball of yarn? And more.

This might sound overwhelming, but never fear! In this talk, I'll walk you through how to answer these questions, and how craft an approachable, maintainable, and scalable state system. And yes, I will talk about how to pick a state management library too.
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
18 min
You's the Platform!
As web developers, it's sometimes easy to see "The Platform" as this thing we can't really change that does things for reasons we can't really understand. But that's not true! Browsers and specs are built by developers just like you and me, and the entire process is open source, which means we can do it too!

Let's take a journey through a real web platform improvement from start to finish, learning how the WHATWG and browser vendors work. By the end you'll know how to update a spec, write web platform tests, land a change in major browsers, and document your shiny new feature on MDN!
25 min
Superpowers of Browser's Web API
When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.

In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀

All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.

So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!
27 min
How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
For many app developers, GraphQL is instrumental in building great user experiences. With the introduction of React Suspense, developers have an ergonomic way to orchestrate loading states to improve upon the status quo. 
In this talk, the Apollo Client team will show you how we built a non-trivial application using Apollo Client’s new Suspense features, GraphQL features like the @defer directive, and how to combine them to build great user experiences in your own apps.
32 min
Wait, You're Shipping React Native to the Web?!
This talk focuses on building a production-grade consumer social application - https://guild.host . If you visit that site, would you be able to tell it's built using React Native just by looking and using it?

At a high level, Taz talks about what makes that possible and how the audience should consider application architecture.

At a lower level, Taz focuses on:
- How React's component composition model makes accommodating multiple platforms easy
- How large applications should use a Design System, and the Tamagui Design System comes with an optimizing compiler that outputs straight platform-specific code while the developer still writes high-level UI that happens to utilize React Native's components
- How to Server-Side Render a React Native Web application, and what considerations Guild made when choosing to create a custom SSR engine on top of Cloudflare Workers
- In order for Guild to exist anywhere, they need to embed themselves into other experiences. This involves Third-Party React Native on the Web and other platforms
- The future of this architecture, where Third-Party UI is the same as First-Party UI