Concept lesson · explains an idea. Code is shown for reading, not run.
These are questions that come up in junior and mid-level React interviews, with short answers in plain language. Do not memorise them; make sure you can explain each idea in your own words and write a small example. Each answer links to the lesson with details.
Basics
What is React, and why use it? A JavaScript library for building user interfaces from components. You describe the UI for the current state, and React updates the DOM efficiently. Benefits: reusable components, predictable one-way data flow, a large ecosystem. Trade-offs: tooling, a learning curve, and client-side SEO limits. What Is React? · Why Use React?
What is JSX? A syntax extension that lets you write markup in JavaScript. A build tool compiles it to function calls (jsx(...)) that return element objects. Understanding JSX · JSX Under the Hood
What is the Virtual DOM? A lightweight description (plain objects) of the UI. React compares the new description with the old one (reconciliation) and updates only the real DOM nodes that changed. The Virtual DOM
What is the difference between a library and a framework? Is React one? React is a library: it renders UI and leaves routing, data and structure to you. Frameworks such as Next.js build on React and add those decisions. React vs Frameworks
Components, props and state
What is the difference between props and state? Props are inputs passed from a parent and are read-only; state is data a component owns and changes with a setter, which triggers a re-render. Props vs State
Why must you not mutate state directly? React detects changes by comparing references. A mutated object keeps the same reference, so React may skip the update, and memoization and effects break. Always set a new array or object. Avoiding State Mutation
What does “lifting state up” mean? Moving state to the closest common parent of the components that need it, and passing values and handlers down as props. Lifting State Up
What are controlled and uncontrolled components? Controlled: React state is the single source of truth (value + onChange). Uncontrolled: the DOM keeps the value and you read it with a ref or FormData. Controlled Inputs
How do you share data between distant components? Props or composition first, then Context for slowly changing widely used data, or a state library for large client state. Sharing State
Lists, keys and rendering
Why does React need key, and why not use the index? Keys identify items between renders, so React can match, move and preserve their state. Index keys break when items are inserted, removed or reordered: state sticks to the wrong item. Understanding Keys
When does a component re-render? When its state changes, when its parent re-renders, or when a context it reads changes. Rendering means calling the function; React only commits DOM changes that differ. Performance Optimization
What is React.memo? It skips re-rendering a component when its props are shallowly equal to the last render’s. It needs stable props. Performance Optimization
Hooks
What are the Rules of Hooks, and why do they exist? Call hooks only at the top level of components or custom hooks, never conditionally or in loops. React stores hook values by call order, so the order must be identical every render. Rules of Hooks
Explain useEffect and its dependency array. It runs code after render to synchronise with something outside React. The array lists the reactive values the effect reads; it re-runs when one changes. [] runs once; no array runs every render. A returned function is the cleanup. useEffect · Dependencies
Why does my effect run twice in development? Strict Mode mounts, unmounts and mounts again to check cleanup. It does not happen in production. Fix missing cleanup, do not remove Strict Mode. Strict Mode
What is a stale closure? A function (often in an effect or timer) that keeps using values from the render it was created in. Fix with correct dependencies, updater functions or refs. Effect Dependencies
useMemo vs useCallback? useMemo caches a calculated value; useCallback caches a function. Both are optimizations to use after measuring, and the React Compiler can add them automatically. useMemo · useCallback
What is useRef used for? Holding a mutable value that survives renders without causing one (a DOM node, a timer id). useRef
What is a custom hook? A function starting with use that calls other hooks, to share stateful logic. Each call has its own state. Custom Hooks
What is useReducer and when would you use it over useState? State managed by a pure (state, action) => newState function. Useful when many related updates exist or the logic should be tested separately. useReducer
What is Context, and what are its limits? It shares a value with a subtree without prop drilling. Every consumer re-renders when the value changes, so it suits slowly changing data. Context API
Data, forms and routing
How do you fetch data in React? In an effect (with an ignore flag or AbortController) with a status of loading, error and success, or with a data library or router loader. Check response.ok. Fetching Data
What is a race condition in data fetching and how do you prevent it? An older, slower response overwriting a newer one. Ignore or abort stale requests in the effect cleanup. Aborting Requests
How do you validate a form? A pure validate function derives errors from values; show them after blur or submit; connect them with ARIA; validate again on the server. Client-Side Validation
How does client-side routing work? A router reads the URL, renders the matching components and updates the address with the History API, without reloading. The server must return index.html for app routes. Why Routing?
Advanced and production
What are error boundaries? Class components with getDerivedStateFromError / componentDidCatch that catch render errors in their children and show a fallback. They do not catch event handler or async errors. Error Boundaries
What is code splitting and lazy loading? Downloading code only when needed, with dynamic import(), React.lazy and Suspense. Lazy Loading
What is Suspense? A boundary that shows a fallback while children wait for lazy code or data. Suspense
What changed in React 19? Actions and form action props, useActionState, useFormStatus, useOptimistic, use, ref as a prop, context as a provider, document metadata tags, and the removal of ReactDOM.render and defaultProps on function components. React Versions
How do you secure a React app? The server validates and authorises everything; no secrets in the bundle; avoid dangerouslySetInnerHTML with untrusted data; validate URLs; HTTPS; careful token or cookie handling. API Security
How would you test a component? With Vitest and Testing Library: render, interact like a user (roles, labels), assert visible results; mock the network. Testing
Client-side React vs Next.js? Client-side: browser renders everything; simple, static hosting, weaker SEO. Frameworks add routing, server rendering and server components for public, search-driven sites. React vs Frameworks
Coding questions you should be able to do
- A counter, a toggle and a controlled input from memory.
- Render a list with a stable key and a delete button.
- Fetch and show data with loading and error states.
- A debounced search input.
- A custom hook such as
useLocalStorageoruseDebounce. - Fix a given buggy component. Practise with Debugging Challenges.
Interview tips
- Think aloud. Explain your reasoning; interviewers care about how you think.
- Ask clarifying questions before coding.
- Mention trade-offs. “Context is simple here, but I would use a store if updates were frequent.”
- Say when you do not know, and explain how you would find out.
- Show the basics are solid: immutability, keys, effects and cleanup, accessibility.
- Bring a project you can discuss: what you built, what went wrong, what you would improve (Final Project).