TypeScript with React
Types for props, state, events, generics, FC type, children type, hooks typing
1What is the correct syntax to type React component props?
What is the correct syntax to type React component props?
Answer
The Props interface followed by typing the function with Props as parameter is the recommended standard syntax. This approach provides excellent type inference and allows easy reuse of the Props type elsewhere in the code. It is more explicit than React.FC and provides better control over children typing.
2How to correctly type a simple state with useState?
How to correctly type a simple state with useState?
Answer
TypeScript automatically infers the state type from the initial value passed to useState. For a simple value like a string, there is no need to explicitly specify the generic type. Automatic inference is sufficient and makes the code more concise. Explicit typing becomes useful only for unions or when the initial value is null.
3What is the correct type for an onClick event on a button?
What is the correct type for an onClick event on a button?
Answer
React.MouseEvent<HTMLButtonElement> is the specific type for click events on a button. The generic parameter HTMLButtonElement specifies the concerned DOM element, which allows access to button-specific properties via event.currentTarget. Using native DOM MouseEvent or a too generic type would lose this typing precision.
What type to use for typing children of a wrapper component?
What is the main difference between React.FC and direct typing?
+17 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free