[TypeScript](/courses/typescript) generics let a reusable [React](/courses/reactjs) component work with different data types while preserving type safety. They are especially useful for components such as: ```text Lists Tables Selects Autocomplete components Data grids Reusable forms ``` ### The Problem Without Generics Suppose you build a list that only accepts users: ```tsx type User = { id: string; name: string; }; type UserListProps = { items: User[]; }; ``` Later you want the same component behavior for: ```text Products Courses Articles Orders ``` Using `any[]` would remove type safety: ```tsx type ListProps = { items: any[]; }; ``` ### Generic List Component Instead, define a type parameter: ```tsx type ListProps = { items: T[]; renderItem: (item: T) => React.ReactNode; }; function List({ items, renderItem }: ListProps) { return (

{renderItem(item)}

); } ``` `T` represents the item type. ### Using It with Users ```tsx type User = { id: string; name: string; }; const users: User[] = [ { id: "1", name: "Asif" } ]; ( {user.name} )} />; ``` [TypeScript](/courses/typescript) infers: ```text T = User ``` so inside `renderItem`: ```tsx user.name ``` is correctly typed. ### Using the Same Component with Products ```tsx type Product = { id: string; title: string; price: number; }; ( {product.title} - ₹{product.price} )} />; ``` Now: ```text T = Product ``` The same component remains type-safe for a completely different data model. ### Generic Constraints Sometimes the component needs certain properties to exist. For example, suppose every item must have an ID: ```tsx type Identifiable = { id: string; }; type ListProps = { items: T[]; renderItem: (item: T) => React.ReactNode; }; ``` Then: ```tsx function List({ items, renderItem }: ListProps) { return (

{renderItem(item)}

); } ``` Now every accepted type must include: ```tsx id: string ``` This also gives the list a stable key without relying on the array index. ### Generic Select Example ```tsx type SelectProps = { options: T[]; value: T | null; onChange: (value: T) => void; getLabel: (value: T) => string; }; function Select({ options, value, onChange, getLabel }: SelectProps) { // reusable selection logic return null; } ``` The important relationship is preserved: ```text options contain T value is T onChange returns T getLabel receives T ``` Without a generic, those relationships often become weak types such as `any` or unrelated unions. ### When Should You Use Generics? Use generics when: ```text One component works with many data types Those types are related across multiple props You want the consumer's type to flow through the component API ``` Do not introduce a generic merely because a component has props. ### Interview-Ready Answer Generics let a [React](/courses/reactjs) component work with multiple data types while preserving the relationship between its props. A generic list might use `T[]` for items and `(item: T) => ReactNode` for rendering. Constraints such as `T extends { id: string }` can require capabilities the component needs. Generics are especially useful for reusable Lists, Tables, Selects, and data-driven components.