0Pricing
React Academy · Lesson

Generic Components & Utility Types

Write reusable generic components and use PropsWithChildren, ComponentProps, and Omit.

Why Generic Components?

Generic components adapt to different data types while staying fully type-safe — a typed list, select, or table that works with any data shape.

A Simple Generic List

Use a type parameter T on the function to make a list component that renders any item type.

interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) => string;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={keyExtractor(item)}>{renderItem(item, i)}</li>
      ))}
    </ul>
  );
}

All lessons in this course

  1. Typing Props & Component Return Types
  2. Typing Events & Refs in TypeScript
  3. Generic Components & Utility Types
  4. Typing Context & Custom Hooks
← Back to React Academy