This document is a comprehensive list of React interview questions, organized by category and difficulty level — ideal for interview prep, self-assessment, or team training.
- What is React?
- Why use React instead of plain JavaScript?
- What are the main features of React?
- What is JSX?
- What is the virtual DOM?
- What are components in React?
- Explain the difference between functional and class components.
- What are props in React?
- How does state work in React?
- How do you create a React app?
- What is create-react-app?
- What is a fragment in React?
- What is the role of the render() method?
- How do you pass data from parent to child components?
- What is prop drilling?
- How do you avoid prop drilling?
- What are default props?
- What is the purpose of key in React lists?
- How does conditional rendering work?
- How do you handle events in React?
- How do you bind event handlers in class components?
- What are inline styles in React?
- What is the difference between a React element and a React component?
- How is re-rendering handled in React?
- What is the children prop?
- What are React Hooks?
- Why were hooks introduced?
- What is useState?
- What is useEffect?
- What’s the difference between useEffect with and without dependency array?
- What are the rules of hooks?
- What is useContext?
- What is useRef and how is it used?
- What is useCallback?
- What is useMemo?
- What is useReducer?
- How do you create a custom hook?
- How can you share logic between components?
- When does useEffect run?
- How do you clean up in useEffect?
- Can you call a hook inside a loop or condition?
- What happens if you update state during rendering?
- How do you prevent unnecessary re-renders?
- What's the difference between useRef and createRef?
- How does useLayoutEffect differ from useEffect?
- What are controlled vs uncontrolled inputs in React?
- How do you persist data between renders?
- Can you explain the use of useImperativeHandle?
- What is lazy state initialization in useState?
- What are common performance mistakes with hooks?
- How is state different from props?
- When should you use component state?
- What is lifting state up?
- What are global state management options in React?
- What is Context API?
- When should you use Redux?
- What are the pros and cons of Redux vs Context API?
- What is Redux Toolkit?
- What are actions, reducers, and store in Redux?
- How does the Provider work in Redux?
- What is middleware in Redux?
- How does Redux handle async logic?
- What is useSelector and useDispatch?
- What are thunks in Redux?
- What is reselect?
- Can you use both Redux and Context together?
- What is Zustand? How is it different from Redux?
- What is MobX?
- What are atoms in Recoil?
- When is it okay to use local component state only?
- What is React Router?
- What is the difference between BrowserRouter and HashRouter?
- What is Link vs a tag?
- How do you define routes in React Router v6?
- What is a dynamic route?
- How do you navigate programmatically?
- What is useNavigate?
- How do you handle 404 pages?
- What is nested routing?
- What are route parameters?
- How do you extract parameters using useParams?
- What is a layout route?
- What is Outlet in React Router?
- How do you protect a route (auth)?
- How does route-based code splitting work?
- What is React.memo?
- What is PureComponent?
- How do you avoid unnecessary re-renders?
- How do you optimize large lists?
- What is lazy loading in React?
- What is React.lazy and Suspense?
- How do you chunk code in React?
- What is useCallback vs useMemo?
- What is the React Profiler?
- What are the most common React performance pitfalls?
- How does reconciliation work in React?
- What causes React to re-render?
- What is the difference between shallow and deep comparison?
- How can React dev tools help with performance?
- How does memoization help performance?
- When should you not use React.memo?
- What are render props and how do they impact performance?
- What is the difference between class-based and functional performance?
- What is the cost of context re-renders?
- How do you optimize re-renders with React.memo and hooks?
- What are Higher-Order Components (HOCs)?
- What are render props?
- What is an Error Boundary?
- How do you create an Error Boundary?
- What is forwardRef?
- What is reconciliation?
- How do you manage focus in forms?
- What is the React Fiber architecture?
- How is React concurrent mode different?
- What is Suspense for data fetching?
- What are portals in React?
- What are the advantages of functional components over class components?
- How do you use TypeScript with React?
- What is server-side rendering (SSR)?
- What is hydration in React?
- What is Next.js and how does it relate to React?
- How does React Native differ from React?
- What are React lifecycles in class components?
- How do lifecycle methods map to hooks?
- What is reconciliation and key diffing in lists?
- How do you test React components?
- What is React Testing Library?
- How does RTL differ from Enzyme?
- What are mock functions in Jest?
- How do you mock API calls?
- How do you test form input and submission?
- How do you test components that use hooks?
- What is the role of act() in testing?
- What are best practices for testing React apps?
- How do you test context?
- How do you simulate events in tests?
- How do you handle async testing?
- What is snapshot testing?
- What are common testing pitfalls in React?
- How do you debug a React app in production?
- Describe a React app you built.
- What was a challenging React bug you fixed?
- How do you decide which state management approach to use?
- How do you structure large-scale React apps?
- How do you handle code reuse in React?
- How do you manage large forms in React?
- What tradeoffs have you made in past React projects?
- What’s your preferred folder structure in a React project?
- How do you handle environment variables in React?
- How do you ensure accessibility in your React components?
MIT — use freely, but give credit if you’re publishing it elsewhere.