react-component-patterns

Design typed Props APIs in React using discriminated unions and polymorphic rendering to ensure valid component configurations. This enforces strict type-safety and prevents invalid prop combinations from compiling.

Avoid prop drilling in complex React UI by utilizing compound components and render-prop patterns. These methods allow you to express deeply nested UI structures without manually passing props through every component layer.

Memoization optimizes React component performance by preventing unnecessary re-renders when props remain unchanged. It should be paired with forwardRef usage and controlled versus uncontrolled patterns to maximize UI reusability and execution speed.

Use composition over inheritance as the default approach for building React UI primitives to standardize development. Composition provides safer, more flexible component structures and helps you avoid building rigid God components with excessive boolean props.

Common React component anti-patterns to avoid include creating God components, relying on excessive boolean props, and implementing unsafe effects. Reviewing structured React and TypeScript pattern guides helps identify and eliminate these unsafe design choices.