React Fundamentals Interview Questions
1. What is React?
React is a JavaScript library for building component-based user interfaces using a declarative rendering model.
2. What is the Virtual DOM?
The Virtual DOM is a lightweight in-memory representation of the real DOM used by React to optimize rendering updates efficiently.
3. What are React components?
Components are reusable UI building blocks that encapsulate structure, behavior, and presentation logic.
4. Difference between functional and class components?
Functional components use hooks and are simpler, while class components rely on lifecycle methods and class syntax.
5. What are props in React?
Props are read-only inputs passed from parent components to child components.
function UserCard({ name }: { name: string }) {
return <h2>{name}</h2>
}6. What is state in React?
State stores dynamic data inside a component and triggers re-renders when updated.
7. What is JSX?
JSX is a syntax extension allowing developers to write HTML-like UI syntax inside JavaScript or TypeScript.
8. What is reconciliation in React?
Reconciliation is React’s process for comparing Virtual DOM trees and updating the real DOM efficiently.
9. What are keys in React lists?
Keys help React identify elements uniquely during rendering updates.
10. Why should indexes not always be used as keys?
Using indexes can cause rendering bugs and unstable UI updates when list ordering changes.
React Hooks Interview Questions
11. What is useState?
useState is a React hook used for managing local component state.
const [count, setCount] = useState(0)12. What is useEffect?
useEffect handles side effects such as API calls, subscriptions, and DOM updates.
13. What causes infinite re-renders in useEffect?
Incorrect dependency arrays or state updates inside effects can trigger infinite rendering loops.
14. What is useMemo?
useMemo memoizes computed values to avoid expensive recalculations.
15. What is useCallback?
useCallback memoizes functions to prevent unnecessary re-renders.
16. Difference between useMemo and useCallback?
useMemo memoizes values, while useCallback memoizes functions.
17. What is useRef?
useRef stores mutable values without triggering component re-renders.
18. What is custom hook?
A custom hook extracts reusable stateful logic into reusable functions.
function useToggle(initial = false) {
const [open, setOpen] = useState(initial)
return { open, toggle: () => setOpen(!open) }
}19. What is useContext?
useContext allows components to consume values from React Context without prop drilling.
20. When should useReducer be preferred over useState?
useReducer works better for complex state logic involving multiple transitions.
React Performance Questions
21. What causes unnecessary re-renders?
Changing references, inline objects, unoptimized context updates, and parent re-renders commonly cause unnecessary renders.
22. What is React.memo?
React.memo prevents unnecessary functional component re-renders based on prop comparisons.
23. How can large lists be optimized?
Virtualization libraries like react-window reduce rendering overhead.
24. What is code splitting?
Code splitting loads JavaScript bundles lazily to improve performance.
const Dashboard = lazy(() => import('./Dashboard'))25. What are Core Web Vitals?
Core Web Vitals measure user experience metrics such as loading speed, responsiveness, and layout stability.
TypeScript Fundamentals
26. What is TypeScript?
TypeScript is a statically typed superset of JavaScript.
27. Why use TypeScript with React?
TypeScript improves scalability, maintainability, autocomplete, and developer safety.
28. Difference between interface and type?
Interfaces are extendable object contracts, while types support unions and advanced compositions.
29. What is generics in TypeScript?
Generics create reusable components and functions with flexible type safety.
function identity<T>(value: T): T {
return value
}30. What is union type?
Union types allow multiple possible types.
type Status = 'loading' | 'success' | 'error'31. What is intersection type?
Intersection types combine multiple types into one.
32. What is unknown type?
unknown is a safer alternative to any because values must be type-checked before usage.
33. Difference between any and unknown?
any disables type safety, while unknown requires validation.
34. What is enum?
Enums define named constant collections.
35. What is type inference?
Type inference allows TypeScript to automatically determine variable types.
Advanced React + TypeScript Questions
36. How do you type React props?
interface ButtonProps {
label: string
onClick: () => void
}37. How do you type children props?
children: React.ReactNode38. What is discriminated union?
Discriminated unions improve type narrowing using shared identifiers.
39. What is type narrowing?
Type narrowing refines types conditionally during runtime checks.
40. What are utility types?
Utility types like Partial, Pick, and Omit simplify type transformations.
State Management Questions
41. What is prop drilling?
Prop drilling occurs when props are passed deeply through components unnecessarily.
42. What is Context API?
Context API shares global values across components.
43. Redux vs Context API?
Redux is better for complex global state management, while Context is simpler for lightweight sharing.
44. What is Zustand?
Zustand is a lightweight React state management library.
45. What is React Query?
React Query manages asynchronous server state efficiently.
Next.js Interview Questions
46. What is Next.js?
Next.js is a React framework for full-stack applications and server rendering.
47. What is SSR?
Server-side rendering generates HTML on the server before sending it to the browser.
48. What is SSG?
Static site generation builds pages during deployment.
49. What are Server Components?
Server Components render on the server to reduce client-side JavaScript.
50. What is hydration?
Hydration attaches React interactivity to server-rendered HTML.
Behavioral & Architecture Questions
51. How do you structure large React applications?
Use feature-based architecture, reusable components, clear state boundaries, and modular design patterns.
52. How do you improve accessibility in React?
Use semantic HTML, keyboard navigation support, ARIA attributes, and sufficient contrast ratios.
53. How do you handle API errors?
Use loading states, retries, error boundaries, and graceful fallback UI.
54. What are Error Boundaries?
Error Boundaries catch rendering errors in React component trees.
55. Explain lifting state up.
Lifting state up moves shared state into common parent components.
Senior-Level React Questions
56. How does React rendering work internally?
React builds Virtual DOM trees, compares updates during reconciliation, and efficiently updates affected nodes.
57. What are concurrent features in React?
Concurrent rendering improves responsiveness during heavy UI updates.
58. What is Suspense?
Suspense handles asynchronous loading states declaratively.
59. Explain React Fiber.
Fiber is React’s rendering engine enabling incremental rendering and prioritization.
60. What are render props?
Render props share logic using function props.
TypeScript Advanced Questions
61. What are mapped types?
Mapped types transform existing types dynamically.
62. What are conditional types?
Conditional types apply logic based on type conditions.
63. What is keyof?
keyof extracts property names from object types.
64. What is infer keyword?
infer extracts types dynamically within conditional types.
65. What are readonly types?
readonly prevents property mutation.
Testing Questions
66. What is Jest?
Jest is a JavaScript testing framework commonly used with React.
67. What is React Testing Library?
React Testing Library focuses on testing user behavior instead of implementation details.
68. Difference between unit and integration testing?
Unit tests isolate functions, while integration tests validate component interactions.
69. What is mocking?
Mocking simulates dependencies during tests.
70. Why are end-to-end tests important?
They validate real application workflows.
Frontend Engineering Questions
71. What is hydration mismatch?
Hydration mismatch occurs when server-rendered HTML differs from client-rendered output.
72. What is tree shaking?
Tree shaking removes unused JavaScript code during builds.
73. What is lazy loading?
Lazy loading defers loading resources until needed.
74. What is debouncing?
Debouncing limits frequent function execution.
75. What is throttling?
Throttling limits execution frequency over time.
Practical Scenario Questions
76. How would you optimize a slow React app?
Profile renders, memoize expensive computations, optimize bundle size, and reduce unnecessary state updates.
77. How do you secure frontend applications?
Prevent XSS, validate inputs, sanitize outputs, and avoid exposing secrets.
78. How do you handle authentication?
Use secure cookies, JWTs carefully, and proper session management.
79. What is optimistic UI?
Optimistic UI updates the interface before server confirmation.
80. What is feature-based folder structure?
It organizes code by business features instead of file types.
Short Rapid-Fire Questions
81. What is StrictMode?
StrictMode highlights unsafe React patterns during development.
82. What is controlled component?
A controlled component manages form values through React state.
83. What is uncontrolled component?
An uncontrolled component uses refs and native DOM state.
84. What is portal in React?
Portals render components outside the parent DOM hierarchy.
85. What is reconciliation key warning?
It warns about missing unique keys in lists.
86. What is hydration in Next.js?
Hydration activates interactivity on server-rendered pages.
87. What is stale closure?
Stale closures capture outdated state values.
88. What is batching?
Batching combines multiple state updates efficiently.
89. What is dependency array?
Dependency arrays control useEffect execution.
90. What is memoization?
Memoization caches results for performance optimization.
System Design & Senior Engineering Questions
91. How would you design scalable component libraries?
Use composability, accessibility standards, design tokens, and strong documentation.
92. How do you maintain frontend code quality?
Use linting, testing, strict TypeScript rules, and code reviews.
93. What are design systems?
Design systems standardize UI components and engineering consistency.
94. What is monorepo?
A monorepo stores multiple related projects in one repository.
95. What are micro frontends?
Micro frontends split frontend applications into independent deployable modules.
96. How do you improve SEO in React apps?
Use server rendering, semantic HTML, metadata optimization, and performance improvements.
97. What is accessibility?
Accessibility ensures applications are usable for all users, including people with disabilities.
98. What is bundle splitting?
Bundle splitting divides JavaScript into smaller chunks.
99. What are React anti-patterns?
Examples include prop drilling, excessive global state, and unnecessary renders.
100. What makes a strong frontend engineer?
Strong frontend engineers understand architecture, accessibility, performance, scalability, user experience, and maintainable engineering practices deeply.
Final Thoughts
Frontend interviews in 2026 increasingly focus on real-world engineering knowledge instead of memorized trivia. Developers who understand rendering behavior, scalability, accessibility, and TypeScript architecture will stand out significantly during interviews.
The best preparation strategy is building production-quality projects, debugging real applications, and learning why engineering decisions matter instead of memorizing isolated answers.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.