Typing React Components in TypeScript (Practical Patterns)
Props, children, event handlers, generics in components, and common TS + React pitfalls interviewers ask about.
On this page
30‑second interview answer
In React + TypeScript, type your component props with an interface/type, prefer explicit prop types, and rely on inference for JSX. Use correct event types (React.ChangeEvent, etc.), avoid overusing React.FC, and use generics when building reusable components. Keep types simple and ergonomic.
Typing props
type ButtonProps = {
variant?: 'primary' | 'secondary';
onClick?: () => void;
children: React.ReactNode;
};
function Button({ variant = 'primary', onClick, children }: ButtonProps) {
return <button onClick={onClick}>{children}</button>;
}Events
function Input() {
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log(e.target.value);
};
return <input onChange={onChange} />;
}Generics in components
type SelectProps<T> = {
items: T[];
getLabel: (item: T) => string;
};
function Select<T>({ items, getLabel }: SelectProps<T>) {
return (
<ul>
{items.map((item, i) => (
<li key={i}>{getLabel(item)}</li>
))}
</ul>
);
}Common pitfalls
- Using
anyfor events - Overcomplicating with
React.FC - Using index keys in lists
Mini Q&A
Q1: Should you use React.FC?
- Not required; many teams avoid it.
Q2: How do you type children?
React.ReactNode.
Q3: When do you need generics?
- reusable typed components.
Summary checklist
- I can type props and events.
- I avoid overusing React.FC.
- I can write a generic component.
Looking for structured, offline interview prep?
Free online lessons • Portable Amazon Kindle / Paperback
Frontend Interview Guide (2025 Edition)
By Rajesh Dhiman
Comprehensive preparation covering React internals, Web Performance, CSS architecture, and system design questions.
JavaScript Interview Guide
By Rajesh Dhiman
Deep dive into the Event Loop, microtask draining, closures, prototypal inheritance, and asynchronous execution patterns.
Note: All lessons on Frontend Interview remain completely free to read online. As an Amazon Associate, we may earn from qualifying purchases.
Written by Rajesh Dhiman
Authored by Rajesh Dhiman and engineered at Eunix Tech. Focused on deep-dive frontend engineering, JavaScript runtime internals, React architecture, and web performance.