React Interview Questions for Freshers (With Clear Answers)

React interview questions for freshers usually test whether you understand a small set of ideas really well: components, props, state, hooks, rendering lists and handling forms. Interviewers are less interested in memorised definitions than in whether you can explain why React works the way it does and write a small component without help.

The answers to these React interview questions are written for React 19 and use function components with hooks, which is how modern React is written. If any answer feels unfamiliar, follow the link to the matching lesson in our React track. Revise your JavaScript too: many “React” questions are really about modern JavaScript and array methods.

React basics

1. What is React?

React is a JavaScript library for building user interfaces out of reusable pieces called components. You describe what the UI should look like for the current data, and React updates the page when that data changes. This is called a declarative approach: you say what you want, not each DOM step to get there. See React introduction and, for when you need it at all, React vs plain JavaScript.

2. What is JSX?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. A build tool compiles it into ordinary JavaScript function calls. Differences from HTML that interviewers like to ask about: use className instead of class, htmlFor instead of for, every tag must be closed, a component returns a single root element (or a fragment), and JavaScript expressions go inside curly braces. More in React JSX.

function Greeting({ name }) {
  const hour = new Date().getHours();
  return (
    <>
      <h2 className="title">Vanakkam, {name}!</h2>
      <p>{hour < 12 ? 'Good morning' : 'Have a good day'}</p>
    </>
  );
}

3. What is a component? What about class components?

A component is a JavaScript function that returns JSX. Its name must start with a capital letter so React can tell it apart from HTML tags. Older code uses class components with methods like componentDidMount. They still work, but they are considered legacy: the React documentation recommends function components with hooks for new code. You should be able to read a class component, but you will write function components. See React components.

4. What is the difference between props and state?

Data flows down from parents to children through props. A child changes parent data by calling a function the parent passed as a prop. Lessons: props and state with useState.

5. How does React update the page efficiently?

When state changes, React calls your component again to get the new JSX (this is a render). It then compares the new result with the previous one and changes only the parts of the real DOM that differ. This comparison process is often called reconciliation. Rendering is just calling a function; it does not mean the whole page is rebuilt.

6. Why do list items need a key?

When you render a list with map(), each item needs a key that is unique among its siblings and stable between renders, usually an ID from your data. Keys let React match items between renders, so it can keep the right state and DOM element for each item when the list is reordered, filtered or added to. Using the array index as a key can cause bugs when items move or are removed. See lists and keys.

7. How do you render something conditionally?

Use normal JavaScript: an if statement before the return, the ternary operator cond ? a : b, or cond && a. A classic trap: {items.length && <List />} renders a 0 on the page when the list is empty, because 0 is a value React displays. Write {items.length > 0 && <List />} instead. More in conditional rendering.

Hooks

8. What are hooks, and what are the rules of hooks?

Hooks are functions starting with use that let components use React features such as state (useState), effects (useEffect) and refs (useRef). Two rules: call hooks only at the top level of a component or custom hook (not inside loops, conditions or nested functions), and call them only from React function components or custom hooks. React relies on hooks being called in the same order on every render.

9. Why does my state not update immediately after calling the setter?

Calling setCount(count + 1) asks React to re-render with a new value; it does not change the count variable in the code that is already running. Inside that render, count is a snapshot. React also batches several updates in the same event into one re-render. When the new value depends on the old one, pass an updater function:

function handleTripleClick() {
  // Each call receives the latest pending value
  setCount(c => c + 1);
  setCount(c => c + 1);
  setCount(c => c + 1);
}

Also, never mutate state objects or arrays directly. Create a new copy, for example setItems([...items, newItem]), so React can detect the change.

10. What is useEffect for, and what is the dependency array?

useEffect lets a component synchronise with something outside React: fetching data, a timer, a browser API, a WebSocket. The effect runs after React updates the screen. The dependency array lists the values the effect uses; React re-runs the effect when any of them change. An empty array means “run after the first render only”. If the effect sets something up, return a cleanup function to undo it.

useEffect(() => {
  const id = setInterval(() => setSeconds(s => s + 1), 1000);
  return () => clearInterval(id); // cleanup
}, []);

Two follow-ups interviewers ask: in development, Strict Mode runs an extra setup and cleanup cycle to reveal missing cleanups, so an effect running twice locally is expected; and you often do not need an effect at all – values calculated from props or state should be calculated during render, and responses to clicks belong in event handlers. See useEffect.

11. What is the difference between useRef and useState?

Both keep a value between renders. Changing state triggers a re-render; changing ref.current does not. Use refs for values that do not affect what is displayed, such as a timer ID, and to access DOM elements, for example to focus an input. In React 19, function components can receive ref as a normal prop, so forwardRef is no longer needed for new code. See useRef and custom hooks.

12. What is a custom hook?

A custom hook is your own function whose name starts with use and which calls other hooks. It lets several components share stateful logic, such as useOnlineStatus() or useLocalStorage(key). Each component that calls the hook gets its own independent state.

13. What are useMemo, useCallback and memo? Do I always need them?

useMemo caches a calculated value, useCallback caches a function, and memo lets a component skip re-rendering when its props have not changed. They are performance tools, not something to add everywhere. React Compiler, now stable and available as an opt-in build step, can add this kind of memoisation automatically, which is why many new projects rarely write these by hand.

Forms, data and app structure

14. Controlled vs uncontrolled inputs?

A controlled input gets its value from state and updates it with onChange, so React is the single source of truth. An uncontrolled input keeps its own value in the DOM, and you read it when needed, for example from FormData on submit or through a ref. Controlled inputs suit live validation and dependent fields. See React forms and React events.

15. What does “lifting state up” mean?

When two sibling components need the same data, you move the state to their closest common parent and pass it down as props, along with functions to change it. That keeps one source of truth instead of two copies that can disagree.

16. What is prop drilling, and how does Context help?

Prop drilling is passing props through several layers of components that do not use them, only to reach a deeply nested child. Context lets a parent provide a value (theme, logged-in user, language) that any descendant can read with useContext or the newer use API. In React 19 you can render <ThemeContext value="dark"> directly instead of <ThemeContext.Provider>. Use context for truly shared data, not for everything.

17. What is new in React 19?

• Actions: async functions for data updates, with pending states and errors handled for you. A <form> can take a function as its action.
• New hooks: useActionState (result and pending state of an action), useFormStatus (status of the parent form), useOptimistic (show the expected result while a request runs).
• The use API: reads a promise or context during render, and unlike hooks can be called conditionally.
• ref as a prop for function components, and cleanup functions returned from ref callbacks.
• Document metadata: <title> and <meta> rendered in a component are placed in the document head.

18. How would you start a new React project today?

Create React App is deprecated. The React documentation recommends starting with a framework when you need routing and data loading, or using a build tool such as Vite for a client-side app. Our lesson on creating a React project with Vite walks through it.

A small coding task to practise

Besides spoken React interview questions, interviews often include a short live task. Here is a typical one: a list of cities where you can add items, with a counter and a controlled input. Try writing it yourself first, then compare.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React interview task</title>
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<style>
  body { font-family: system-ui, sans-serif; padding: 24px; max-width: 420px; }
  input, button { font-size: 16px; padding: 8px 12px; }
  li { padding: 4px 0; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel" data-type="module">
import React, { useState } from "https://esm.sh/[email protected]";
import { createRoot } from "https://esm.sh/[email protected]/client";

function CityList() {
  const [cities, setCities] = useState([
    { id: 1, name: "Chennai" },
    { id: 2, name: "Madurai" }
  ]);
  const [text, setText] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    const name = text.trim();
    if (!name) return;
    setCities([...cities, { id: Date.now(), name }]); // new array, no mutation
    setText("");
  }

  return (
    <div>
      <h2>Cities ({cities.length})</h2>
      <form onSubmit={handleSubmit}>
        <label htmlFor="city">New city </label>
        <input id="city" value={text} onChange={e => setText(e.target.value)} />
        <button type="submit">Add</button>
      </form>
      <ul>
        {cities.map(city => <li key={city.id}>{city.name}</li>)}
      </ul>
      {cities.length > 3 && <p>That is a long trip!</p>}
    </div>
  );
}

createRoot(document.getElementById("root")).render(<CityList />);
</script>
</body>
</html>

Points an interviewer would notice: the count is derived from the array rather than stored separately, the list uses stable IDs as keys, state is replaced with a new array instead of being mutated, and the input has a proper label.

How to prepare for React interview questions

• Build two or three small apps yourself without following a tutorial step by step.
• Practise explaining your code aloud: why this state lives here, why this effect needs that dependency.
• Revise JavaScript fundamentals: closures, array methods, destructuring, promises and async/await (see fetch and async).
• Expect HTML and CSS questions too; see HTML and CSS interview questions.
• Make sure your projects are on your resume with working links; see front-end developer resume for freshers.

Frequently asked questions

Further reading

• react.dev/learn
• react.dev/blog/2024/12/05/react-19
• react.dev/reference/rules/rules-of-hooks
• react.dev/learn/you-might-not-need-an-effect
• react.dev/reference/react/StrictMode
• react.dev/learn/react-compiler/introduction