React Advanced 2021
as the organisers put it
React Advanced is London based community and a conference, addressing most complex and trickiest to solve topics. Engineers of any level are welcome, but be prepared for hardcore.
who it's for
React developers, frontend engineers, full-stack engineers, mobile developers, platform engineers, engineering managers
topics
React Server Components; startTransition in React 18; Render 100K items in React; Vite frontend tooling; Gatsby v4 rendering modes; tRPC typesafe full-stack; GraphQL with Next.js; Expo for React Native; Automated application security testing; Cypress end-to-end testing; React Query and authentication; Micro-frontends with centralized caching
| title | author | length |
|---|---|---|
| Building Dapps with React | Nader Dabit | 33m |
A concrete demo builds and deploys a simple Greeter smart contract, compiles its ABI, runs a local node with Hardhat, and wires a React front end using… | ||
| Automated Application Security Testing with StackHawk | Scott Gerlach | 09m |
StackHawk runs active dynamic scans against running JS apps and APIs and claims most customer scans run average around or under 10 minutes. Scanner runs as a… | ||
| Supercharging Developer Productivity With Advanced Code Search | Prosper Otemuyiwa | 08m |
Claims that Sourcegraph indexes 2.1 million repositories and lets teams search private and public code without cloning, then demonstrates three concrete search… | ||
| A New Kind of Abstraction | Mike Hartington | 07m |
Argues that abstractions are not just layers but abstractions as a spectrum determined by where code runs, with concrete examples: Node vs Deno vs browser… | ||
| Coming in React18: startTransition | Kathryn Grayson Nanz | 07m |
React 18 adds a concurrent rendering API that lets less urgent updates run in the background so the page stays responsive; wrap slow updates with… | ||
| The Forest for the (Abstract Syntax) Trees | Matt Seccafien | 07m |
Shopify builds a Hydrogen CLI that parses projects into a JSON AST, applies Babel AST transforms via the visitor pattern, and generates code back to disk so… | ||
| Efficient State Management With Hookstate | Ebenezer Don | 09m |
A concrete demo builds a todo CRUD app that shares one global store and a local input state, showing exact APIs and calls rather than theory: createState from… | ||
| Learnings on People, Product & Culture from Hypergrowth at Snyk | Patrick Mullarkey | 08m |
Snyk presents concrete claims and practices: 500 to 800 staff in eight months after Series F, clear how what why when change communication, and explicit assess… | ||
| Track Slowdowns and Crashes in your React apps | Simon Zhong | 08m |
An e-commerce demo app proves slow product loads and a checkout crash are diagnosable end to end after installing Sentry React SDK; errors show up ~60… | ||
| How do Localise & Personalize Content with Sanity.io and Next.js | Simeon Griggs | 08m |
A working demo shows geo‑targeted banners built with Sanity.io and Next.js hosted on Vercel, using an API route that reads country info from headers or a query… | ||
| Limitless App Development with Expo and React Native | Evan Bacon | 25m |
Expo delivers a reusable native runtime (Expo Go runtime) so JavaScript apps run without local native builds, and EAS Build automates code signing and store… | ||
| Gatsby v4's New Rendering Modes | Sid Chatterjee | 16m |
Gatsby v4 adds SSR and deferred static generation (DSG) that builds pages on first request, turning build time from a function of page count into a function of… | ||
| Don't Solve Problems, Eliminate Them | Kent C. Dodds | 28m |
Shows a clear claim and concrete tools: Tesla shifts the problem from tailpipe pollution to sustainable energy, cuts exhaust and regenerative braking… | ||
| Living on the Edge | Sunil Pai | 31m |
Claim: React 18 replaces renderToString with renderToReadableStream so Suspense and suspense list loading order render HTML progressively before any JavaScript… | ||
| Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React | Michel Weststrate | 23m |
Shows a concrete claim: Flipper moves from ~250ms renders to 10x faster frame rates while streaming thousands of events, handling 100k items and hundreds of… | ||
| Micro-Frontends Performance and Centralised Data Caching | Ruben Casas | 23m |
Argues micro‑frontends are not inherently slow and shows concrete fixes: use Webpack 5 module federation shared api to avoid duplicate React copies, and… | ||
| How Hopin is Moving 10x Faster: Microfrontends at Scale | Alex Lobera | 19m |
Claim: Hopin moves “10x faster” by breaking React monoliths into independently deployable microfrontends loaded from a CDN with module federation… | ||
| Your Second Source of Truth | Rachel Nabors | 08m |
Argues documentation must serve as docs as second source of truth alongside code and describes a concrete reboot of React Native docs driven by user testing… | ||
| Forms Don't Need to Suck | Andy Richardson | 11m |
Claim: global form schemas and hoisted onSubmit handlers make complex React forms awkward. Proposal: attach validation and initial values at the field-level… | ||
| A Picture Worth a Thousand Programmes | Maggie Appleton | 25m |
Claims that visuals reveal hidden metaphors, spatial structure, and change over time in React and demonstrates concrete diagrams — e.g., a side‑by‑side… | ||
| Infrastructure as Code for React Application on AWS Written in TypeScript | Denis Artyuhovich | 27m |
Builds a production ready React site on AWS using TypeScript and cdktf and shows every concrete step that runs end to end. Creates an S3 website, wires Route… | ||
| Let's talk about Web Components | Jemima Abu | 32m |
Claims that Web Components are native, reusable HTML with no build step and cross‑framework portability and then shows it: defines a class with custom… | ||
| Cracking the Concurrent Mode | Sudhanshu Yadav | 30m |
Implements React‑style concurrent rendering from scratch for Brahmos.js, showing concrete choices: time‑slicing into 5ms slots driven by message channel + rIC… | ||
| (Easier) Interactive Data Visualization in React | Anjana Vakil | 25m |
High-level claim: embed ready-made visualizations into React with a fraction of the work by letting Plot (Observable Plot) generate an SVG and letting React… | ||
| Automating All the Code & Testing Things with GitHub Actions | Colby Fayock | 18m |
Shows concrete pipelines: linting with prettier and ESLint as pre-commit hooks via Husky and lint-staged, tests running on GitHub Actions across Node versions… | ||
| Let Me Show You How React Applications Get Hacked in the Real-World | Liran Tal | 21m |
A live demo builds a package‑profile site and uses the unmaintained npm module react-json-pretty (40k downloads) to render package.json showing that React’s… | ||
| Using React to Build Performant Game UIs in Minecraft | Paulo Ragonha | 24m |
Uses React but skips React reconciliation by introducing facets lightweight observables that flow from the C++ game engine into a custom renderer… | ||
| From Blender to the Web - the Journey of a 3D Model | Sara Vieira | 26m |
Takes a Blender model, exports glTF with apply modifiers and Draco compression, shrinks from 1.2 MB → 406 KB, then converts to JSX and wires it into… | ||
| The Worlds Most Expensive React Component & How to Stop Writing It | Michael Chan | 23m |
A common greeting component becomes a cautionary tale: adding props for trailing punctuation, cute salutations, className, default styles, RTL i18n and even a… | ||
| React Query and Auth: Who is Responsible for What? | Bonnie Schulkin | 19m |
Proposes a concrete solution: a Day Spa app using React Query (useQuery, useMutation, dependent queries) plus auth and localStorage with a central useUser hook… | ||
| Taking Component Driven One Step Further | Debbie O'Brien | 20m |
Claim: Bit converts app-locked React components into component isolation with per-component versioning so the same button or product card can be installed via… | ||
| SetState, We Need to Talk! | Nikhil Sharma | 20m |
Argues finite state machines remove unpredictable UI bugs by centralizing logic, demonstrates a small login form refactor into an explicit state machine that… | ||
| How to do Good Without Doing Anything | Yuraima Estevez | 31m |
Claims that a small upfront investment in automation saves hours later and demonstrates it with concrete tools and tests: ESLint jsx-a11y lint rules… | ||
| Asynchronous UX | Toni Petrina | 21m |
Concrete UX rules and code patterns emerge: use idempotency key in localStorage to make long actions safe to retry and avoid double payments, disable buttons… | ||
| How Typed is Your Framework? | Andreas Roth | 19m |
Shows concrete failures and fixes: TypeScript does not stop runtime typos when frameworks expose unsafe APIs so migrating alone does not eliminate errors… | ||
| Killing BFFs with GraphQL and Next.js | Roy Derks | 20m |
Claims that a Next.js app can replace separate BFFs by hosting a GraphQL endpoint at pages/api/graphql, running an executable schema with express-compatible… | ||
| Gaining Confidence with Cypress Tests | Rob Richardson | 23m |
Shows concrete, working Cypress examples: scaffolded a TypeScript project, runs with npx cypress open, discovers Electron/Chrome/Firefox/Edge and runs headless… | ||
| On the Origin of React | Jenn Creighton | 21m |
A concise history that names versions and concrete changes: starting at createClass (circa .12) through class components (.13) to the removal of mixins and… | ||
| Components, Patterns and sh*t it’s Hard to Deal with | Marco Cedaro | 26m |
Claim: pattern libraries often devolve into scattered overrides that break refactoring and maintenance. Evidence: examples from 2013–2021 using React… | ||
| Advanced Patterns for API Management in Large-Scale React Applications | Thomas Findlay | 20m |
An API layer centralizes requests so components stay unchanged when swapping axios for firebase, and an exported set of methods preserves input/output… | ||
| Building Cross-Platform Component Libraries for Web and Native with React | Perttu Lähteenlahtii | 21m |
Claims a practical way to share one codebase by using single-file components with .native/.web swaps and a utils layer that maps tags and props, uses… | ||
| React Server Components - Under the Hood | Lee Rowlands | 19m |
A live dive into the implementation shows server, client and hybrid components serialized on an Express endpoint and streamed via the react-server-dom-webpack… | ||
| Remote Team Collaboration Techniques | Tara Z. Manicsic | 23m |
Research shows telecommuting since the 70s leaves gaps: interpersonal networking, informal learning and mentoring drop when people end up coding in silos… | ||
| End-to-End i18n | Luke Ehresman | 26m |
A small shopping‑list app gets fully internationalized end‑to‑end: strings are defined as IDs with defaults, extracted into gettext PO files by an… | ||
| Vite - The Next Generation Frontend Tooling | Devlin Duldulao | 20m |
Vite claims subsecond feedback by using esbuild dev server for dependency pre-bundling and fast HMR and Rollup production bundling for optimized output… | ||
| Full-stack & Typesafe React (+Native) Apps with tRPC.io | Alexander Johansson | 05m |
Claims that tRPC.io replaces GraphQL or REST for internal APIs by letting frontend types flow automatically from backend code, demonstrating actual code where… | ||
| The Legendary Fountain of Truth: Componentize Your Documentation! | Matthias Dugué | 23m |
Argues that documentation must live with code as the single source of truth in code and shows a working stack: MDX (plus MDJS and MD Vite), Storybook or naked… | ||
| Using Next.JS and Redux for Epic Noscript Web Apps | Daniel Skogly | 21m |
Project uses Next.JS and Redux to produce identical React HTML whether JavaScript runs or not by serializing Redux state into hidden form fields, POSTing to… | ||
| nothing matches | ||