React Summit 2022
2022-06-17..2022-06-21
Amsterdam, Netherlands
[React Summit Remote Edition 2020, React Summit 2020, React Summit Remote Edition 2021, React Summit 2022, React Summit 2023, React Summit 2024, React Summit 2025, React Summit 2026]
who it's for
React developers, frontend engineers, platform engineers, engineering managers, mobile app developers, developer experience engineers
topics
Next.js router and routing segments; React Server Components; Remix with WPGraphQL headless; React Native new architecture; microfrontends state sharing; AG Grid React rendering engine; selective server-side code splitting; Capacitor access to native APIs; Nx monorepo affected builds cache; Apollo Client cache strategies; WASM and WebGL with React UI; Shopify Hydrogen custom storefronts
| title | author | length |
|---|---|---|
| the biggest React conference worldwide | 02m | |
Festival-style recap of React Summit 2022 that brags about venue, vibe and hallway conversations but offers no concrete claims, no tools or demos and no… | ||
| Find Out If Your Design System Is Better Than Nothing | Arseny Smoogly | 20m |
Claim: measure design-system adoption by tracking the source mix — proportion of design-system imports versus homebrew components — over time. Uses static code… | ||
| AG Grid's New React Rendering Engine | Niall Crosby | 06m |
Claims migration of AG Grid rendering to 100% React with a demoed app handling 10,000 rows and 1,000 updates/sec, grouping recomputations and charting running… | ||
| Building a Headless Site with Remix, WPGraphQL & Web Fundamentals | Jeff Everhart | 21m |
Remix connects to a local WordPress turned headless via WPGraphQL and Atlas Content Modeler, with Apollo Client and Tailwind wired into a Remix app; the demo… | ||
| Large Scale Projects Challenges (NextJS - Contentful) | Leonidas Mamais | 20m |
Migration of Vodafone Greece's site uses NextJS + Contentful and requires the old and new stacks to coexist rather than a big-bang rewrite, because rough… | ||
| Automated Application Security Testing | Scott Gerlach | 09m |
A demo of StackHawk shows an automated DAST scanner that attacks running HTTP and REST/GraphQL endpoints, reports concrete findings like SQL injection and XSS… | ||
| Using React Hooks + Capacitor to Access Native Mobile APIs | Thomas Vidas | 07m |
Capacitor compiles an existing React web app into native iOS and Android projects (MIT licensed) and ships plugins for Camera, Filesystem, Geolocation and… | ||
| Reacting to Web3 | Jonathan Sheely | 06m |
Shows a concrete path for Web2 teams to add blockchain features by npm installing TypeScript React modules and wiring a context hook so a component can mint an… | ||
| What are Docker Extensions | Amy Bass | 05m |
Docker Extensions add a marketplace and an SDK so Docker Desktop becomes pluggable with one‑click installs, a demo shows disk usage that reclaims images and… | ||
| Fast React Monorepos with High Quality DX | Juri Strumpflohner | 21m |
Claim: Nx cuts CI and PR times by building and testing only affected projects using a project graph and reuseable artifacts, with Nx Cloud adding a distributed… | ||
| The Only Way to Eat an Elephant | Lena Zhukova | 09m |
Claims that server-side rendering can do selective code splitting so servers send only the chunks needed for a route, reducing bundle size and restoring SEO… | ||
| Routing in React 18 and Beyond | Delba de Oliveira | 19m |
Claims a new Next.js router that leverages react server components and React 18 concurrent features to move routing, rendering, and data fetching to the most… | ||
| Inside Fiber: the In-Depth Overview You Wanted a TLDR for | Matheus Albuquerque | 27m |
Reconciliation internals are unpacked: fibers are treated as React-specific stack frames and logged into a Map to inspect live metadata (used to show Twitter… | ||
| Impact: Growing as an Engineer | Iris Schaffer | 20m |
Defines impact as three levers — mastery, business impact, culture — and gives concrete wins: improve conversion by 3%, saved $10,000, embedding with another… | ||
| 5 Years of Building React Table | Tanner Linsley | 19m |
Five years of work condense into concrete moves and numbers: a single-component table spikes to 137 props, a rewrite to a headless hook lets users render their… | ||
| Building a Headless Site with Remix | Jeff Everhart | 21m |
Builds a working headless WordPress site in ~20 minutes: installs WPGraphQL + Atlas Content Modeler, creates a "projects" content model with title date… | ||
| Code Splitting With Server Side Rendering | Lena Zhukova | 09m |
Argument: conditionally load only the modules needed during SSR by detecting environment and loading synchronously on server and asynchronously on client… | ||
| Content Modeling for React Developers | Harshil Agrawal | 07m |
A React cookbook web app uses Contentful as the CMS, models a Recipe type with title description images plus ingredients as separate content type and… | ||
| Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands | Simeon Griggs | 08m |
Concrete guidance on structuring localized content with examples of whole‑or‑part translated documents, market vs language splits, and a single source‑of‑truth… | ||
| The Apollo Cache is Your Friend, if You Get To Know It | Raman Lally | 20m |
Shows how Apollo Client 3 at Shopify actually stores a normalized in‑memory cache, why fetch policies like cache-first default and network-only matter, and… | ||
| Interview with Tanner Linsley | Tanner Linsley | 04m |
Five years of work on react-table leads to concrete lessons: a popular table library used at a startup and by GitHub, lots of accidental design decisions that… | ||
| Interview with Iris Schaffer | Iris Schaffer | 04m |
Claims a practical growth mindset honed over four years at Spotify with concrete habits: break problems into steps, plan next actions, and repeatedly try after… | ||
| Interview with Kadi Kraman | Kadi Kraman | 04m |
Claims that AR try-on stops being a gimmick and becomes expected in e‑commerce, supported by a case study that integrates an AR shoe try-on into a shopping app… | ||
| Interview with Swizec Teller | Swizec Teller | 04m |
Argues for shipping now and fixing later with a concrete case: a jQuery app backed by a 23 million dollar Series A gets rewritten into React under user… | ||
| Handling Data at Scale for React Developers | Tejas Kumar | 23m |
Three concrete fetch patterns get demonstrated and compared: render then fetch (component useEffect), fetch then render (module‑scope promise started before… | ||
| Let’s Talk about Re-renders | Nadia Makarevich | link |
This talk discusses React performance and how re-renders can affect it. It highlights common mistakes and misconceptions, such as the overuse of useMemo and… | ||
| Build a Headless WordPress App with Next.js and WPGraphQL | Kellen Mace | link |
Let's get started with the workshop on building a Headless WordPress app with Next.js and WP GraphQL. We'll cover the benefits and drawbacks of a headless… | ||
| Build a Design System with React and Tailwind CSS | Shruti Balasa | link |
This talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts… | ||
| Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components | Thomas Findlay | link |
This talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach… | ||
| Detox 101: How to write stable end-to-end tests for your React Native application | Yevheniia Hlovatska | link |
Detox is a cross-platform framework for writing stable, end-to-end tests for React Native applications. It synchronizes with your application, waits for it to… | ||
| You Do Have Time to Build it Twice | Swizec Teller | link |
This talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to… | ||
| You don't want to Server-side Render your Next.js App | Michele Riva | link |
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better… | ||
| How React Applications Get Hacked in the Real-World | Liran Tal | link |
How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in… | ||
| Remix Fundamentals | Kent C. Dodds | link |
Remix simplifies state management and data loading in web applications, combining modern web development with the simplicity of managing state in the backend… | ||
| Sharing is Caring: (How) Should Micro Frontends Share State? | Eliran Natan | link |
Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment… | ||
| Hands-on with AG Grid's React Data Grid | Sean Landsman | link |
The workshop covered various topics related to AG Grid and React. It included installing dependencies, pulling data from remote sources, adding sorting and… | ||
| The Art of Functional Programming | Anjana Vakil | link |
Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like… | ||
| Becoming a Form Wizard: Intuitive Multi-Step Workflows | Nick Hehr | link |
This talk explores the concept of form wizards and their role in creating intuitive, multi-step workflows. It discusses the use of state machines and various… | ||
| React Microfrontend Applications for TVs and Game Consoles | Denis Artyuhovich | link |
This talk discusses the architecture journey of a sports engagement platform, transitioning from a monolith to a microfrontend architecture. The ALEP… | ||
| Walking the Line Between Flexibility and Consistency in Component Libraries | Siddharth Kshetrapal | link |
This talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the… | ||
| Scale Your React App without Micro-frontends | Jonathan Wagner | link |
This talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and… | ||
| React at Scale with Nx | Isaac Mann, Zack DeRose | link |
Welcome to React at Scale with NX. NX provides benefits such as faster command execution, controlled code sharing, consistent coding practices, and an accurate… | ||
| Don't Forget React Memo | Khrystyna Landvytovych | link |
The talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the… | ||
| Full-stack JS today: Fastify, GraphQL and React | Cody Zuschlag | link |
The talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of… | ||
| How to Share Code between React Web App and React Native Mobile App in Monorepo | Emily Xiong | link |
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a… | ||
| How to achieve layout composition in React | Travis Waith-Mair | link |
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and… | ||
| High-performance Next.js | Michele Riva | link |
Welcome to High Performance Next.js. Next.js solves the problem of slow loading times and bad SEO performance. Client-side rendering allows for lazy loading… | ||
| GraphQL - From Zero to Hero in 3 hours | Pawel Sawicki | link |
Paweł Zawiecki, a software developer, shares his knowledge and practices in software development, focusing on Next.js, Node.js, and GraphQL. The workshop… | ||
| Avoiding CSRF with Remix | Lee Rowlands | link |
Welcome to my session on avoiding CSRF with Remix. Remix helps protect against CSRF by thinking about actions in terms of HTML form elements. To avoid CSRF… | ||
| A Frontend Developer’s Guide to Web3 | Rahat Chowdhury | link |
This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain… | ||
| Marrying WASM/WebGL Games with React UI | Johannes Goslar | link |
Jonny discusses marrying WebAssembly and WebGL games with React, emphasizing the importance of choosing the right tool for game development. He introduces the… | ||
| Build a knowledge base with Gatsby, Contentful and AWS | Abdelrhman Adel | |
This workshop focuses on building a knowledge base using Gatsby, Contentful, and AWS. It covers the basics of Gatsby, including static site generation and… | ||
| The Journey of CodeSandbox Projects | Ives van Hoorne | link |
Code Sandbox is an online code editor that allows for easy sharing of code. It started as a side project and evolved into a company with significant growth… | ||
| Bringing your React Web App to native with Capacitor | Mike Hartington | link |
This workshop introduces bringing React web apps to native using Capacitor, a cross-platform development approach. Cordova and React Native are compared in… | ||
| Stop Abusing Client State Management | Nir Parisian | link |
This talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading… | ||
| Design-Driven Full-stack: an End-to-End Dev Workflow that Scales | David S. Price | link |
This talk discusses the challenges of building full stack applications and introduces Redwood.js as a solution. It emphasizes the importance of design-driven… | ||
| Serverless for React Developers | Tejas Kumar | |
The workshop focuses on building an open-source project using serverless technologies and React. It covers various topics such as choosing serverless… | ||
| Web Accessibility in JavaScript Apps | Sandrina Pereira | link |
The workshop on web accessibility in JavaScript apps covers various topics including routing, links, buttons, toggle interfaces, error handling, and custom… | ||
| React at scale with Vodafone | Pedro Galán, Andrew D. Ferguson | |
Vodafone uses React technologies at scale to transform into a tech comms provider. They emphasize co-creation, reuse, and standardization. Challenges in… | ||
| Keeping Sane with React Micro-Frontends in Production by Applying Observability | Konstantinos Leimonis | link |
Observability for microfrontends involves defining clear separation of concerns between teams and tracking errors in production with structured events. By… | ||
| Exploring AR Try-On with React Native | Kadi Kraman | link |
This talk discusses exploring AR Tryon with React Native, implementing AR try-on experiences in e-commerce apps, and considerations for AR development. It also… | ||
| Introducing Design System to Multinational Web Apps | Alison Yoon | link |
Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component… | ||
| Tame the Component Multiverse | Michael Chan | link |
This talk explores the impact of UI testing on applications and the web, highlighting the need for comprehensive testing strategies. It discusses the… | ||
| From Blender to the Web - the Journey of a 3D Model | Sara Vieira | link |
This talk is about Blender and 3D in the web, covering topics such as rendering engines, material properties, exporting models, using React Fiber, lighting and… | ||
| Building custom storefronts on Shopify with Hydrogen | Abe Haskins, Megan Majewski | link |
This workshop introduces Shopify's Hydrogen, a React-based framework for building headless storefronts. Hydrogen offers fast client-side rendering, flexible… | ||
| Improving Developer Happiness with Preview.js | François Wouts | link |
Francois, a developer happiness engineer, discusses the challenges of slow builds and their impact on productivity. He explores the implementation of showing… | ||
| Multiple apps, one code to rule them all | Shem Magnezi | link |
This talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a… | ||
| Measuring and Improving React Native Performance | Alexandre Moureaux | link |
This talk discusses mobile app performance and provides tips for performance analysis. It includes a performance test on the TF1 news app and demonstrates how… | ||
| How to Build UI's for Smart Contracts | Rahat Chowdhury | link |
This workshop covered various topics including an introduction to Web3 and smart contracts, an overview of blockchain technology, the birth of Bitcoin and its… | ||
| Dear Client, I'm Leaving You | Liad Yosef | link |
Liad Yosef discusses the importance and evolution of server-side rendering, highlighting its benefits such as improved performance and SEO. He explores… | ||
| The Subtle Art of "Subtle Loading"! | Nikhil Sharma | link |
This talk explores the concept of subtle loading in software development, focusing on techniques to provide a fast and seamless user experience. Tips include… | ||
| Build Web3 apps with React | Shain Dholakiya | link |
This workshop focused on building Web3 apps with React using JavaScript, without the need for smart contract code. The Hyperverse was introduced as a… | ||
| React Native Everywhere | Taz Singh | link |
React Native Everywhere enables code sharing and platform individuality, responsive composition and navigation are key focus areas, the React Bangalore… | ||
| React Native, as seen on TV | Michele Bonazza | link |
This talk discusses TV app development using React Native, focusing on limitations and specific considerations. The speaker demonstrates how to fetch and… | ||
| How To Design A Sustainable Freelance/Contracting Career + Speedcoding Challenge | Shane Ketterman | link |
This workshop covers the essentials of freelancing, including getting started, managing expenses and client relationships, finding clients, building your… | ||
| Infiltrate Your Own React Native App | Wouter Van Den Broek | link |
Every bug and feature can be a potential flaw or entry point for bad actors. React Native projects have many dependencies that can be exploited. It's important… | ||
| Don't take it Personally, it is Personalization | Facundo Giuliani | link |
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There… | ||
| Crash Course into TypeScript for content from headless CMS | Ondrej Polesny | link |
Let's start with the workshop, importing content into a new project, working on the content, and spending most of the time in code. We'll discuss the content… | ||
| Bringing the New React Native Architecture to the OSS community | Nicola Corti | link |
This talk introduces the new React Native architecture and its rollout to the open-source community. The new architecture eliminates the bridge component… | ||
| Sharing is Caring: Reusing Web Data Viz in React Native | Krystal Campioni | link |
PolarisViz is a collection of React components that provide consistent visual styles, motion design, and accessibility features. It aims to solve the problem… | ||
| Lifting Privacy and Accessibility Up | Ibrahim Cesar Bevilacqua | link |
In this talk, the speaker discusses the creation of a component library that prioritizes accessibility and privacy. They highlight the importance of building… | ||
| New Way of Envisioning Security in the Dependencies | Vandana Verma Sehgal | link |
This talk explores the importance of understanding security issues and dependencies in software development. It emphasizes the role of developers in… | ||
| nothing matches | ||