Components are at the core of modern development. However, for as much as they can help empower our work, they can harm and hinder it. Content will forever and always change, so building resilient components requires careful planning and collaboration. And, of course, requires avoiding the common pitfalls of component design.

We will learn from the experience of working within and leading the development of multiple design systems built around React and TypeScript. Through many code samples, we'll highlight common patterns that lead to unmanageable component interfaces with steep learning curves. We'll learn how deviating from HTML can cause our components to break down, littering our codebase with technical debt. But with these examples, we'll learn how to avoid the common pitfalls of component design, and how to not only build frontends that are resilient to change, but how to build trust across teams throughout an entire product.

The target audience of this talk is frontend developers who are familiar with TypeScript. While half of the points are framework agnostic, the other half is component patterns specific to React.

The talk can be shortened to a 15-minute lightning format, or extended to a full 60-minute session.