Skip to content
React Summit7 min read

TypeScript narrowing patterns React devs reach for in 2026

A short tour of the narrowing patterns we use across our component APIs, with examples that survive code review.

TypeScriptReact

Six narrowing patterns we use across our React component APIs. Each one survived code review at least once a quarter.

1. Discriminated unions for prop variants

If your component has two visual modes, model the modes as a union with a literal discriminator field. The user gets autocomplete; the implementation gets exhaustive switches.

2. Branded primitives

An OrgId is a string. So is a UserId. Brand them and the compiler stops you mixing them.

The other four are in the cookbook on our GitHub.

Comments(0)

Sign in to join the conversation.

No comments yet. Be the first.