Quiz for Generics in Components

Q1: What is the primary benefit of using generics in React components with TypeScript?

A. Stronger typing and reusability B. Improved styling C. Faster rendering D. Automatic state management

Q2: How do you define a generic prop in a functional component?

A. function Component<T>(props: T) {} B. component<T> = () => {} C. let Component = <T>(props: T) => {} D. Component = function<T>(props: T) {}

Q3: Which of the following is a correct way to specify default props with generics?

A. Use defaultProps after declaring generic B. Generics do not support defaultProps C. Set default inside generic type definition D. Use type assertion with default values

Q4: What is a common use case for generics in React?

A. Reusable form fields B. Styling with CSS C. Handling events D. Setting up routes

Q5: How do you restrict generic type to an object with a specific field?

A. <T extends { id: number }> B. <T = { id: number }> C. <T includes { id: number }> D. <T -> { id: number }>

Q6: What does <T, U> mean in a component?

A. Two generic parameters T and U B. A tuple C. An object type D. A React fragment

Q7: How can you provide a default type for a generic?

A. <T = DefaultType> B. <T defaults DefaultType> C. <T: DefaultType> D. <T <- DefaultType>

Q8: Can generics be used with useState in TypeScript?

A. Yes, to define the type of state value B. No, useState doesn’t support generics C. Only with arrays D. Only in class components

Q9: What is the syntax to define a generic React.FC?

A. React.FC<T> B. React.FC<T>() C. React.FC = T D. React.Component<T>()

Q10: Why use extends with generics?

A. To constrain the accepted types B. To improve performance C. To make them nullable D. To import styles

Q11: Can generics be used in custom hooks?

A. Yes, for typing input and output B. No, hooks don’t support types C. Only with React.FC D. Only in reducers

Q12: What error appears if generic constraints are violated?

A. Type constraint error B. Style error C. Render warning D. Memory leak

Q13: Which symbol is used to define a generic?

A. <> B. {} C. () D. []

Q14: Where are generic parameters declared?

A. Before the function arguments B. After the function arguments C. Inside return D. With import statement

Q15: Can generics work with union types?

A. Yes, using extends and conditionals B. No, only single types are allowed C. Only in arrays D. Only in enums

Q16: Can you infer generic types from props automatically?

A. Yes, often TypeScript infers types B. No, always declare explicitly C. Only with enums D. Only in JSX

Q17: Why are generic components preferred in large-scale applications?

A. For better type reuse and flexibility B. For better CSS support C. To reduce rendering time D. To handle JSX fragments

Q18: How to type children in a generic component?

A. React.PropsWithChildren<T> B. Children<T> C. JSX.Element<T> D. React.FC<T>.children

Q19: Which utility helps to add generics to children?

A. PropsWithChildren B. WithGeneric C. AddChildren D. GenericChildren

Q20: Can generics improve type inference in higher-order components?

A. Yes, HOCs often use generics to wrap components B. No, HOCs are static C. Only with Redux D. Only in props