GuidesReact
React interview essentials
Props, state, effects, keys, hooks rules, and controlled inputs — a focused guide for React MCQ exams and interview screens.
Think in UI state and data flow
React questions reward clear mental models: UI is a function of state and props; events flow up through callbacks; lists need stable keys; effects synchronize with external systems. If you only memorize hook names, you will miss dependency and immutability traps.
Before answering, restate the question as “what re-renders?” or “what is stored where?” That framing helps on state vs ref, and on context vs local state.
Core topics exams repeat
Props are read-only inputs from the parent. State belongs to the component that owns updates; lift state when siblings must share it. Updates may batch — use functional updates when the next value depends on the previous one.
Lists: keys should be stable and unique; index keys break when order changes. Conditional rendering: &&, ternaries, and early returns. Controlled inputs: value plus onChange tied to state. Fragments avoid extra DOM nodes when siblings are required.
useEffect: empty dependency array runs after mount; listed dependencies re-run on change; omitting the array runs every render and is usually a bug. Cleanup functions matter for subscriptions and timers. Rules of Hooks: only call hooks at the top level of React functions.
Context, refs, and common traps
Context is excellent for theme, locale, or auth — poor as a dumping ground for all app data because consumers re-render when the value changes. useRef holds a mutable value without re-render and is the right tool for DOM nodes and timer IDs; useState is for values that should appear in the UI.
Never mutate arrays or objects in state in place. Create new copies so React can detect changes. Many “why didn’t it re-render?” questions are mutation in disguise.
How to drill React here
Use the React track from Beginner through Advanced. After misses, write a one-line rule (“functional setState when depending on previous count”, “cleanup timers in useEffect”). Pair with React tips on the Preparation page, then validate under the timer so interview pacing feels familiar.