# TypeScript with React (React / Next.js) > Types for props, state, events, generics, FC type, children type, hooks typing - 20 interview questions - Mid-Level - [Interview Questions: React / Next.js](https://sharpskill.dev/en/technologies/react-next/interview-questions.md) ## 1. 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. ## 2. 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. ## 3. What is the correct type for an onClick event on a button? **Answer** React.MouseEvent 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. ## 17 more questions available - What type to use for typing children of a wrapper component? - What is the main difference between React.FC and direct typing? Sign up for free: https://sharpskill.dev/en/login ## Other React / Next.js interview topics - [JavaScript Essentials](https://sharpskill.dev/en/technologies/react-next/interview-questions/javascript-essentials.md): 25 questions, Junior - [React Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-fundamentals.md): 20 questions, Junior - [React Hooks](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-hooks.md): 22 questions, Junior - [Component Lifecycle](https://sharpskill.dev/en/technologies/react-next/interview-questions/component-lifecycle.md): 18 questions, Junior - [React Router](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-router.md): 20 questions, Junior - [State Management with Context](https://sharpskill.dev/en/technologies/react-next/interview-questions/state-management-context.md): 18 questions, Junior - [Forms & Controlled Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/forms-controlled-components.md): 20 questions, Mid-Level - [Data Fetching & API](https://sharpskill.dev/en/technologies/react-next/interview-questions/fetching-data-api.md): 20 questions, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-query-tanstack.md): 20 questions, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/en/technologies/react-next/interview-questions/styling-css-in-js.md): 18 questions, Mid-Level - [Next.js Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 questions, Mid-Level - [Next.js Data Fetching](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 questions, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 questions, Mid-Level - [Next.js Routing & Navigation](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 questions, Mid-Level - [Next.js API Routes](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 questions, Mid-Level - [Next.js Metadata & SEO](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 questions, Mid-Level - [Next.js Middleware & Auth](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 questions, Mid-Level - [React Testing](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-testing.md): 20 questions, Mid-Level - [Zustand State Management](https://sharpskill.dev/en/technologies/react-next/interview-questions/zustand-state-management.md): 18 questions, Mid-Level - [React Performance Optimization](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-performance-optimization.md): 22 questions, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-error-boundaries.md): 18 questions, Senior - [Advanced React Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 questions, Senior - [Next.js Advanced Features](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 questions, Senior - [Next.js Deployment & Production](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 questions, Senior - [Architecture & Design Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 questions, Senior - [React Server Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-server-components.md): 26 questions, Senior - [Next.js Internationalization](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 questions, Senior - [React Security & Best Practices](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-security-best-practices.md): 22 questions, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/en/technologies/react-next/interview-questions/typescript-react