Technology interview hub
React Interview Questions for Frontend Interviews
Technology interview-questions hub for React interview questions: tackle the most crucial coding and concept questions first, then expand into study plans, guides, and company-specific prep flows.
Start here
Start interview prep in 30 seconds
Start with one crucial question first, then move into study plans and deeper prep routes once momentum is established.
Current essentials
- Coding
- 12
- Concepts
- 12
- Must know
- 24
Prep plan at a glance
Use this page as a planning surface for interview prep, not just a random question feed.
- Prioritize high-impact react coding prompts first.
- Use react concept rounds to sharpen explanation speed.
- Escalate into the frontend interview prep platform for guided sequencing.
More routes and deep-dive links
Primary prep routes
Explore public study plans
Most crucial React coding interview questions
- Debug: Component Renders Twice on Every Update
Critical for coding rounds and edge-case discussion.
Fix a component that renders twice per click because it stores derived state in `useEffect`. The correct fix is to remove the derived `parity` state and compute it directly from `count` during render, preventing the ext…
Open challenge → - React Debounced Search with Fake API
Critical for coding rounds and edge-case discussion.
Build a React debounced search input with fake API calls. Use useEffect + setTimeout cleanup to cancel stale requests, and manage loading, error, and empty states for realistic UX. Concepts: react, state, effects. React…
Open challenge → - useEffectOnce: Run an Effect Only Once
Critical for coding rounds and edge-case discussion.
This hook should run the effect only on mount and clean up on unmount, even under React StrictMode development behavior. Concepts: react, hooks, effects, lifecycle, components. Mention StrictMode double-invocation, clea…
Open challenge → - Autocomplete Search Bar (Hooks)
Critical for coding rounds and edge-case discussion.
Build an **autocomplete search bar** in React. As the user types, show a dropdown of suggestions filtered from a dataset. Add debounced searching, mouse selection, keyboard navigation (↑/↓/Enter/Escape), and close-on-ou…
Open challenge → - Contact Form (Component + HTTP)
Critical for coding rounds and edge-case discussion.
Build a contact form using a React component with controlled inputs and basic validation. You will only work in `src/App.tsx` – the HTML shell and CSS are already set up. On submit, validate the input and send the form…
Open challenge → - Invite Chips Input (Tags + Autocomplete)
Critical for coding rounds and edge-case discussion.
Build a Material-like invite field in React. As users type, show autocomplete suggestions, convert selections into removable chips, and support keyboard shortcuts (Enter/comma/backspace).
Open challenge → - Multi-step Signup Form
Critical for coding rounds and edge-case discussion.
Build a 3-step signup flow in React that collects basic info, address info, and then shows a read-only summary before submitting. Each step should only advance when its inputs are valid.
Open challenge → - React Nested Checkbox Tree (Parent–Child Sync)
Critical for coding rounds and edge-case discussion.
Build a small React UI that renders a parent checkbox and multiple child checkboxes. The parent controls all children, and the children keep the parent in sync (checked, unchecked, or indeterminate). React focus: comput…
Open challenge → - React Nested Comments (Infinite Replies, Single Active Reply Input)
Critical for coding rounds and edge-case discussion.
Build a React nested comments panel with infinite replies. Users can add top-level comments and reply to any comment, creating an infinitely deep tree. Clicking Reply should open an input ONLY under that comment (single…
Open challenge → - React Paginated Data Table
Critical for coding rounds and edge-case discussion.
Build a simple paginated data table in React that shows a static list of users. Display 5 rows per page, with Previous / Next controls and a "Page X of Y" indicator. Disable the navigation buttons appropriately on the f…
Open challenge → - React Shopping Cart Mini
Critical for coding rounds and edge-case discussion.
Build a small shopping cart UI in React. Show a list of products, let the user add them to the cart, adjust quantities, remove items, and display derived totals for item count and price. React focus: use immutable updat…
Open challenge → - Chat UI with Streaming Response
Critical for coding rounds and edge-case discussion.
Build a simplified ChatGPT-like interface that streams an assistant response token-by-token. The goal is to model chat state, append streaming chunks efficiently, and keep the UI responsive with clear loading/cancel sta…
Open challenge →
Most crucial React concept questions for interviews
- How can you lift state up in React?
Frequently tested in explanation-heavy rounds.
Lifting state up means moving shared state to the closest common ancestor and passing it down via props. This keeps siblings in sync and avoids duplicated state. The trade-off is prop drilling vs shared state, so test u…
Open question → - How does React decide when to re-render a component, and what role does render() play in that process?
Frequently tested in explanation-heavy rounds.
Explain what triggers a React component to re-render, what a “render” actually means (vs updating the DOM), and what role the class render() method (or function component body) plays in the render + commit pipeline.
Open question → - useEffect() in React: syncing with the outside world (timing, dependencies, cleanup)
Frequently tested in explanation-heavy rounds.
Explain what useEffect is actually for (synchronizing with external systems), when it runs (after commit), how dependencies control re-running, and how cleanup prevents leaks. Cover common patterns (fetching, subscripti…
Open question → - What is the difference between controlled and uncontrolled components?
Frequently tested in explanation-heavy rounds.
Controlled components in React are those whose form data is managed by React state, while uncontrolled components manage their own state internally through the DOM. Controlled components offer more predictable, testable…
Open question → - What is the significance of keys in lists in React?
Frequently tested in explanation-heavy rounds.
Keys are React's identity contract for list items. Use stable keys to prevent reordered rows, lost input state, and production bugs where React preserves the wrong component.
Open question → - When does React re-render a component, and when does it actually update the DOM?
Frequently tested in explanation-heavy rounds.
Explain React’s update pipeline: what a “re-render” really is (re-running component functions to produce a new element tree), what triggers it (state/props/context/parent renders), how reconciliation decides what change…
Open question → - Why are props immutable in React, and what breaks if they aren’t?
Frequently tested in explanation-heavy rounds.
Explain props immutability as a production contract: parent ownership, predictable rendering, memoization safety, and the shared-state bugs you debug when children mutate props.
Open question → - Why do Hooks have rules? What breaks if you call Hooks conditionally?
Frequently tested in explanation-heavy rounds.
Explain why React Hooks must be called unconditionally and in the same order, how React internally matches Hook calls to state slots, and what breaks when that order changes. Hooks rely on call order, so violations caus…
Open question → - Why does React enforce one-way data flow?
Frequently tested in explanation-heavy rounds.
Explain why React is designed around unidirectional data flow (state/props go down, events go up). Connect it to predictability, debugging, avoiding multiple-writers problems, and React’s rendering/reconciliation model…
Open question → - Why does React sometimes show stale state in closures? How do you fix it?
Frequently tested in explanation-heavy rounds.
Explain how JavaScript closures capture values from a specific render, why React renders create new closures, and how this leads to stale state bugs in effects, timeouts, and event handlers — and how to fix them.
Open question → - Why does StrictMode double-invoke effects in dev? What bugs does it expose?
Frequently tested in explanation-heavy rounds.
Explain why React StrictMode intentionally double-invokes certain lifecycles and effects in development, how this simulates mount–unmount–remount, and what kinds of side-effect and cleanup bugs it is designed to reveal.
Open question → - How can you prevent unnecessary re-renders in React?
Frequently tested in explanation-heavy rounds.
Prevent unnecessary React rerenders with a profiling-first workflow: find unstable props, broad context churn, and memoization pitfalls before reaching for blanket useMemo or useCallback.
Open question →
Complete the prep loop
After these React Interview Questions for Frontend Interviews drills, continue with frontend interview questions hub, then frontend interview preparation guides and frontend interview study plans to keep your weekly plan structured.