Generic React-компоненты

Помню года так 4 назад я писал базовый компонент поиска — стандартное текстовое поле, а когда начинаешь печатать, появляется список найденных элементов.

И тогда я впервые задумался, поддерживает ли React дженерики в связке с TypeScript (а почему бы ему их не поддерживать?).

Каркас компонента выглядит так

export interface SearchBoxProps<T> {
  search: (text: string) => T[] | Promise<T[]>;
  renderItem: (item: T) => React.ReactNode;
  // ...
}
 
export function SearchBox<T>(props: SearchBoxProps<T>) {
  // ...
}

А использование так

<SearchBox
  search={() => [1, 2, 3]}
  renderItem={(item) => <div>{item}</div>}
/>

TypeScript отлично выводит типы, но недавно я узнал, что их можно указать и в JSX. Раньше думал, что будут проблемы из-за угловых скобок < > в дженериках

<SearchBox<number>
  search={() => [1, 2, 3]}
  renderItem={(item) => <div>{item}</div>}
/>

💡 Когда использовать дженерики для реакт-компонентов?

Когда компонент может принимать:

• данные разных типов
• и рендер-пропсы/слоты, чтобы преобразовать эти данные в UI

Ещё один пример можете посмотреть вот в этом видео