React Interview Questions
56 free, interview-ready questions with clear answers and code. Work through them top to bottom, or jump to any topic.
React Interview Q&A — The Complete Question Bank
- →What is React and why use it over plain JavaScript?
- →What is JSX and how does the browser run it?
- →What is the virtual DOM and how does reconciliation work?
- →What is the difference between props and state?
- →Functional vs class components — which should you use and why?
- →What are keys in React and why does using the array index hurt?
- →How do you render content conditionally in React?
- →What are Fragments and why use them?
- →Why must React components be pure during render?
- →What exactly triggers a component to re-render?
- →Does a re-render always update the DOM?
- →How does useState work and why is state not updated immediately?
- →Why does setCount(count + 1) three times only increment by one, and how do you fix it?
- →Why must you treat state as immutable in React?
- →What is batching, and did it change in React 18?
- →What is lazy initialization of state and when do you need it?
- →When should you lift state up, and what is derived state?
- →What is useEffect for and when does it run?
- →How does the dependency array work and what happens if you omit a dependency?
- →What is the cleanup function in useEffect and when does it run?
- →How do you fetch data in useEffect and avoid race conditions?
- →How do hooks map to the old class lifecycle methods?
- →When should you NOT use useEffect?
- →useEffect vs useLayoutEffect — what's the difference?
- →What are the Rules of Hooks and why do they exist?
- →What is useRef used for? How is it different from state?
- →useMemo vs useCallback — what's the difference and when do you actually need them?
- →What is useReducer and when is it better than useState?
- →What is the Context API and what problem does it solve?
- →Why can Context hurt performance, and how do you mitigate it?
- →What is a custom hook? Give a real example.
- →What are forwardRef and useImperativeHandle for?
- →What is React.memo and when does it actually help?
- →A child wrapped in React.memo still re-renders. Why?
- →How do you reduce unnecessary re-renders in a React app?
- →What is code splitting with React.lazy and Suspense?
- →How would you render a list of 10,000 items efficiently?
- →How do you profile and find performance problems in React?
- →What are controlled vs uncontrolled components?
- →What are Higher-Order Components (HOCs) and render props?
- →What is the compound component pattern?
- →When do you need a state-management library instead of useState/Context?
- →How do you share data from a child to a parent component?
- →How can you reset a component's internal state from the parent?
- →What is a SyntheticEvent in React?
- →Why shouldn't you call a handler as onClick={handleClick()}?
- →How do you handle a form with many fields cleanly?
- →What causes the 'Too many re-renders' error?
- →Why do my useEffect / event handlers see stale state?
- →How does client-side routing work in a React SPA?
- →Why use React Query / SWR instead of fetching in useEffect?
- →How do you show loading and error states for async data?
- →What is the difference between CSR, SSR, SSG and how does Next.js fit in?
- →What is hydration and what is a hydration mismatch?
- →What are concurrent features in React 18 (useTransition, useDeferredValue)?
- →How would you structure a large React project's folders?