React interview essentials

Frontend interviews for freshers and early-career developers are predictable. Interviewers want to know three things: do you understand how React actually works (not just copy patterns), can you write a small component live without panicking, and can you talk about something you built.

This lesson collects the core questions with answers you can adapt. Do not memorise the sentences. Read the idea, close the page, and explain it aloud using your own example. Interviewers can tell the difference, and a follow-up question ('why?') will expose memorised answers.

Questions about bugs show real understanding. Learn to explain these four, with the fix.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function addThree() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }
  // After one click, count is 1, not 3.

  function addThreeCorrectly() {
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setCount((c) => c + 1);
  }
  // After one click, count is 3.

  return (
    <>
      <p>{count}</p>
      <button onClick={addThree}>+3 (wrong)</button>
      <button onClick={addThreeCorrectly}>+3 (right)</button>
    </>
  );
}

Why: each render has its own snapshot of count. All three calls use the same old value, so they set the same number. State updates are also batched. The functional form receives the latest value. Use it whenever the new state depends on the previous state.

// Wrong: same array reference, React may not re-render
items.push(newItem);
setItems(items);

// Right: a new array
setItems([...items, newItem]);

// Update an object or an item inside an array without mutation
setUser({ ...user, name: 'Asha' });
setItems(items.map((i) => (i.id === id ? { ...i, qty: i.qty + 1 } : i)));
setItems(items.filter((i) => i.id !== id));

React decides whether state changed by comparing references. Treat state as read-only and always create new arrays and objects.

// Infinite loop: setting state in an effect with no dependency array
useEffect(() => {
  setCount(count + 1);
});

// A new object each render in the dependency list also re-runs the effect every render
const options = { page: 1 };
useEffect(() => { load(options); }, [options]);

// Fix: depend on primitive values
useEffect(() => { load({ page }); }, [page]);

// Always clean up timers and subscriptions
useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);

Explain: the effect runs after every render if there is no array, setting state causes a render, and the cycle repeats. Object and function dependencies are new every render, so they trigger the effect each time.

Pitfall 4: StrictMode runs effects twice in development. In development, <StrictMode> mounts, unmounts and re-mounts each component once to expose missing cleanup. So an effect with a fetch may run twice in npm run dev, but not in production. The right response is to write proper cleanup (an ignore flag or AbortController), not to remove StrictMode.

Many companies give a 30 to 45 minute task in a browser editor, or ask you to share your screen. Common ones: a counter with reset, a todo list (add, delete, toggle), a search filter on a list, fetch and display a list from an API with loading and error states, a tabs or accordion component, a star rating, a debounced search box, a form with validation.

How to approach them:

1. Repeat the requirements and ask about edge cases (empty list? duplicate names? what if the request fails?). 2. Start simple and working. Hard-code data, get one thing on screen, then add features. 3. Think aloud. Say what state you need and why before typing. 4. Handle loading, empty and error states. Many candidates forget; interviewers notice. 5. Keep names clear and components small. Then tidy up if time remains. 6. If stuck, say what you have tried. Interviewers usually give hints and judge how you respond.

import { useEffect, useState } from 'react';

const ITEMS = ['Espresso', 'Cappuccino', 'Cold Brew', 'Filter Coffee', 'Masala Chai'];

export default function Search() {
  const [query, setQuery] = useState('');
  const [debounced, setDebounced] = useState('');

  // Update the debounced value 300 ms after the user stops typing
  useEffect(() => {
    const id = setTimeout(() => setDebounced(query), 300);
    return () => clearTimeout(id);
  }, [query]);

  const results = ITEMS.filter((name) =>
    name.toLowerCase().includes(debounced.toLowerCase())
  );

  return (
    <div>
      <label htmlFor="s">Search the menu</label>
      <input id="s" value={query} onChange={(e) => setQuery(e.target.value)} />
      {results.length === 0 ? (
        <p>No matches</p>
      ) : (
        <ul>
          {results.map((name) => (
            <li key={name}>{name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Be ready to explain: why the cleanup function exists (cancels the previous timer so only the last keystroke counts), why there are two state variables, and what you would change to call a real API (fetch inside another effect that depends on debounced).

Almost every interview includes 'tell me about a project you built'. Prepare a one-minute answer for your best project using this order: what it is and who it is for, the stack and why you chose it, one hard problem and how you solved it, what you would improve. For the recipe finder, a good 'hard problem' is the race condition between two quick searches and how an ignore flag in the effect cleanup fixed it, or storing the search in the URL so links are shareable.

Have the live link and the repository ready. Be prepared to open the code and explain any file. Never claim a project you did not build or cannot explain; follow-up questions will show it.

Act as a frontend interviewer hiring for a [fresher / 2-year experience] React developer role. Ask me one question at a time on [React fundamentals / hooks / performance / state management]. After each of my answers, give brief feedback: what was correct, what was missing or wrong, and one follow-up question. Start with an easy question and raise the difficulty if I answer well. After 8 questions, summarise my strengths and the three topics I should revise.

What to expect: Answer aloud or type full sentences, as in a real interview. Verify any technical correction from the AI against the official React documentation.