React Interview Questions for Frontend Interviews

Build a simple React image slider with previous/next buttons and dot navigation. Show the current slide, its title, and the slide index (e.g. "Slide 1 of 3"). Disable navigation buttons when you reach the start or end.…

Build an interactive N×N chessboard in React. Clicking a cell should highlight it and clear the previous selection. Include a size control so users can switch board dimensions.

Build a React counter component with increment/decrement and a zero floor. Use state for the count, disable decrement at zero, and keep UI text in sync with state changes so the user always sees valid values. Concepts:…

Generate a dynamic table in React from row/column inputs. Normalize values, rebuild the grid on action, and render consistent labels so users can verify correct dimensions. Concepts: react, state, event-handlers. React…

Build a React Like button that toggles between liked/unliked and updates a count. Clicking should add or subtract one based on current state, and the counter must never drop below zero. This checks controlled state, eve…

Build a React progress bar for values 0–100 with +10%/−10% controls. Clamp progress to the valid range and change the bar color by thresholds (e.g., red <34, orange 34–66, green >66). Show the numeric percentage a…

Implement a reusable widget in React. It should render a row of clickable stars, allow the user to select a rating, and notify a parent component when the rating changes. React focus: build a controlled c…

Build Tic-Tac-Toe with React state: a 9-cell board, alternating turns, win/draw detection, and a reset button. Prevent overwriting a filled cell and stop play once the game is over. Show a clear status message for next…

Create a local-state todo list: add, toggle, and remove items. Keep input state controlled, generate stable ids, and update the todos array immutably so React can detect changes and re-render correctly. Framework focus:…

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…

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).

Build a simple FAQ (accordion) UI in React using component state. Clicking a question should toggle its answer. By default, only one item can be open at a time, but the user can enable a mode where multiple items can st…

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…

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.

Render props and higher-order components (HOCs) are both React patterns used for code reuse. Render props use a function passed as a prop to control what to render, while HOCs wrap components to inject additional logic…

Explain what typically breaks when a component treats the same piece of data as both “props-owned” and “state-owned” (multiple sources of truth). Cover common symptoms (stale UI, input jumps, infinite loops, memo bugs)…

React solves predictable UI rendering from state with a component model and reconciliation. It does not provide routing, data fetching, or state management out of the box. This clarity guides architecture decisions; the…

Explain what makes React treat a function as a component (element type), the JSX naming rule (Uppercase vs lowercase), what it must return, and the practical rules around calling it (don’t call directly if it uses Hooks…

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…

Explain why React treats props as read-only inputs (UI = f(props, state, context)). Connect this to predictable rendering, parent ownership, referential equality optimizations (PureComponent/React.memo), and why mutatin…

Explain why React expects rendering to be a pure computation (UI = f(props, state, context)) and why side effects must be moved to effects/event handlers. Connect it to render vs commit, Concurrent Rendering, StrictMode…

Explain why React batches multiple state updates into a single render for performance, how automatic batching works (especially in React 18), and in which situations batching does not apply or can be disabled.

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…

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.