React core concepts questions
"Explain the virtual DOM and why React uses it." The virtual DOM is an in-memory representation of the real DOM. When state changes, React re-renders the virtual DOM, diffs it against the previous version (reconciliation), and applies only the minimal set of real DOM changes needed. This batches DOM updates and avoids costly direct manipulation.
"What is the difference between controlled and uncontrolled components?" A controlled component gets its value from React state and updates state on every input change. An uncontrolled component manages its own state in the DOM; you access its value via a ref. Use controlled for forms where you need per-keystroke validation; use uncontrolled when you just need the value on submit.
React Hooks questions
"What is the difference between useEffect and useLayoutEffect?" useEffect runs after the browser paints: suitable for data fetching and non-visual side effects. useLayoutEffect runs synchronously after DOM mutations but before paint: use it for DOM measurements that would cause visible flicker if deferred.
"When would you use useCallback and useMemo?" useMemo caches a computed value between renders for expensive calculations. useCallback caches a function reference to prevent unnecessary re-renders in child components wrapped in React.memo. The common mistake is applying both everywhere "just in case": memoisation has a cost and should only be applied where profiling shows a real problem.
Next.js and modern React questions
"Explain Server Components vs Client Components in Next.js App Router." Server Components render on the server, have no client-side JS bundle cost, and can access server resources directly. They cannot use hooks or browser APIs. Client Components run in the browser, support hooks and event handlers, but add to the JS bundle. The App Router encourages maximising Server Components, using Client Components only at interactive leaf nodes. This significantly reduces Time to Interactive.
"What is hydration and what causes hydration errors?" Hydration is React attaching event handlers to server-rendered HTML. Errors occur when server HTML does not match what React would render on the client. Common causes: Date.now() or Math.random() during render (different values each side), or reading window during render (undefined on server).
How to prepare
Build a non-trivial React project: Next.js App Router, TypeScript, Tailwind CSS, and a state library (Zustand or Jotai). Review React 19 changes: the new compiler that auto-memoises components, Actions, and the use() hook for async data. TypeScript is expected for most professional React roles in 2026; if you are not proficient, learning to type React props, hooks, and event handlers is the highest-priority preparation step.