The Worlds Most Expensive React Component and How to Stop Writing It

React Advanced

React Advanced 2021

Michael Chan

Tame the Component Multiverse

React Summit

React Summit 2022

How I Test a Million UI States with Every Merge — Visual Testing with Storybook

React Advanced 2022

An App Developer's Guide to React 19: What You Need to Know and Everything You Can Safely Ignore

React Summit US

React Summit US 2024

React 19 introduces a huge number of new capabilities and APIs. So, what do you need? What can you implement today? And what should leave for framework authors to integrate? Even if you don't plan to embrace Server Components, there are new capabilities in React 19 to improve speed, clarify code, and even eliminate long standing dependencies. In this practical and progressive overview, you'll learn everything you need to be prepared for a React 19 upgrade.

Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component can result represent hundreds or thousands of discrete visual states. How do you test it? Manually disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development has so many dimensions. Time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, and document our work — automating the grunt work of UI development.

Error state, loading state, awkward breakpoint, bad data, poor formatting, browser support. Every component is a multitude of challenges. How do you actually manage it? Disable the network — temporarily. Insert bad code — just for a minute. Paw at the edge of your screen. Hack local database fixtures to bits. Frontend development is a multiverse where dimensions like time and variation result in an infinite number of UI possibilities. In this talk, we'll use Storybook to progressively develop, test, document our work and tame the multiverse of our components.

We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>