Basic React questions
1. What is the virtual DOM?
React keeps a lightweight description of the UI in memory. When state changes it renders a new tree, compares it with the previous one (reconciliation) and applies only the minimal changes to the real DOM.
2. Props vs state?
Props are inputs passed from a parent and are read-only inside the component. State is data the component owns and changes over time with useState or useReducer; updating it triggers a re-render.
3. Why are keys needed in lists?
Keys give each list item a stable identity so React can match items between renders. Use unique ids from data; array indexes cause bugs when items are inserted, removed or reordered.
Intermediate React questions
4. Explain useEffect and its dependency array.
useEffect runs side effects after render, such as subscriptions or syncing with external systems. It re-runs when a dependency changes; an empty array runs it once after mount. The returned cleanup function runs before the next effect and on unmount.
5. What is the difference between useMemo and useCallback?
useMemo caches a computed value and useCallback caches a function reference between renders until dependencies change. They help when passing values to memoized children or avoiding expensive recalculation, but should not be added everywhere.
6. Controlled vs uncontrolled components?
A controlled input gets its value from React state and updates through onChange. An uncontrolled input keeps its own DOM state and is read with a ref or FormData on submit, which is simpler for basic forms.
7. How do you avoid prop drilling?
Use composition (passing children), React Context for widely shared values such as theme or user, or a state library such as Zustand or Redux Toolkit for complex shared state.
Advanced React questions
8. What are React Server Components?
Server Components render on the server, can read databases directly and send no JavaScript to the browser. Client Components marked with 'use client' handle interactivity. Next.js App Router uses Server Components by default.
9. How do you find and fix performance problems in React?
Profile with React DevTools to find slow or repeated renders, then split large components, memoize expensive children, virtualize long lists, lazy-load routes and keep state close to where it is used.
10. What changed with forms in React 19?
React 19 adds Actions: a form's action prop can be an async function, useActionState tracks its result and pending state, useFormStatus reads the parent form's status and useOptimistic shows optimistic UI while the request runs.
Want to practise these with a trainer? APEX live batches include mock interviews, real projects and placement support. See upcoming batches.