React Interview Questions for Freshers (2026): 25 Basic Q&As

If you're a fresher preparing for your first React interview, the good news is that most of the questions are basic. Interviewers don't expect production experience. They want to see that you understand the fundamentals (JSX, components, props, state and hooks) and can explain them in simple words. This guide covers 25 of the most common React interview questions for freshers. Each one has a short answer you can say out loud, a small code example where it helps, and a note on what the interviewer is checking.

These are also the basic React interview questions that experienced developers get warmed up with, so the answers stay useful as you grow. Every code example below was run and type-checked, and you can paste any of them into the free online React compiler to experiment with them yourself.

Want to try the examples as you read? Open the free playground. No signup is needed. Open the free online React compiler →

The 25 React Interview Questions for Freshers at a Glance

• React basics (questions 1 to 5): what React is, library vs framework, JSX, the virtual DOM, components
• Props, state and events (questions 6 to 11): props, state, props vs state, props drilling, events, lifting state up
• Rendering, lists and forms (questions 12 to 16): lists and keys, conditional rendering, fragments, controlled components, form submission
• Basic hooks (questions 17 to 23): hooks, useState, useEffect, cleanup, useRef, rules of hooks, custom hooks
• Practical React (questions 24 and 25): the Context API and fetching data

How to Answer React Interview Questions as a Fresher

Knowing the answer is only half of it. How you say it matters just as much, especially when you don't have work experience to point to.

• Start with a one-sentence definition, then add a tiny example. "Props are inputs a parent passes to a child, like function arguments" is better than a long paragraph.
• Use your own words. A memorized textbook line falls apart as soon as the interviewer asks a follow-up.
• If you've used the concept in a project, say so ("I used useState to keep the form values in my todo app"). Only mention what you really built.
• If you don't know something, say what you do know and reason out loud. Interviewers prefer honest reasoning over a confident guess.

React Basics Interview Questions

1. What is React, and why is it used?

React is an open-source JavaScript library for building user interfaces, especially for web apps where the screen changes often. You describe what the UI should look like for the current data, and React updates the page when that data changes. It is popular because you build screens from small reusable components, the UI stays in sync with your data, and it has a huge ecosystem of tools and libraries.

What the interviewer is checking: that you can say "library for building user interfaces" and "component-based" without hesitating.

2. Is React a library or a framework?

React is a library, not a full framework. It only handles the view layer, which is what the user sees. Things like routing, data fetching and server rendering come from other libraries, or from frameworks built on top of React such as Next.js. React also runs in the browser, so it is a frontend tool.

Often confused with Node.js? This post explains exactly where React sits in a full stack app. Read: Is React frontend or backend? →

3. What is JSX?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers can't read it directly, so a build tool such as Babel, SWC or Vite compiles it into regular JavaScript function calls. A few rules to remember: return one parent element (or a fragment), use className instead of class, write attributes in camelCase, close every tag, and put JavaScript expressions inside curly braces.

function Welcome({ name }: { name: string }) {
  return (
    <>
      <h1 className="title">Hello, {name}!</h1>
      <p>You have {3 * 2} new messages.</p>
    </>
  );
}

4. What is the virtual DOM, and why does React use it?

The virtual DOM is a lightweight JavaScript copy of the page structure that React keeps in memory. When state changes, React builds a new virtual tree, compares it with the previous one (this is called diffing), and updates only the parts of the real DOM that changed. That avoids rebuilding the whole page for every small change.

Want the full explanation, with the diffing and patching steps? Read: Virtual DOM vs Real DOM explained →

5. What are components, and what types of components are there?

Components are the reusable building blocks of a React app. Each one is a piece of UI with its own markup and logic, and you combine them like Lego pieces to build a page. There are two kinds. Function components are plain JavaScript functions that return JSX. Class components are the older style that extends React.Component. Modern React uses function components with hooks, and class components mostly appear in older codebases.

Props, State and Events Interview Questions

6. What are props?

Props (short for properties) are inputs that a parent component passes to a child component. They work like function arguments: the child reads them and renders accordingly. Props are read-only, so a component must never change its own props. If the data needs to change, the parent owns it and passes down a new value.

function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}!</p>;
}

function App() {
  return <Greeting name="Asha" />;
}

7. What is state?

State is data that belongs to a component and can change over time, such as a counter value, the text in an input, or whether a menu is open. When state changes, React re-renders the component so the screen matches the new data. In function components you create state with the useState hook.

8. What is the difference between props and state?

This is one of the most common React interview questions for freshers. The short answer:

• Props come from the parent. State is owned by the component itself.
• Props are read-only. State can be updated, using its setter function.
• A change in either props or state causes the component to re-render.
• Use props to configure a child component. Use state for data that changes inside a component.

9. What is props drilling, and how can you avoid it?

Props drilling means passing data through several layers of components that don't use it, just so a deeply nested child can receive it. It makes the code harder to change. You can avoid it with the Context API for shared values, by restructuring components so data is passed closer to where it is used (composition), or with a state management library like Redux in large apps.

Practice props drilling and see the problem for yourself. Try the Props drilling challenge →

10. How do you handle events in React?

You attach event handlers with camelCase props such as onClick, onChange and onSubmit, and you pass a function, not a string. Pass the function itself (onClick={handleClick}). Don't call it (onClick={handleClick()}), because that runs it while the component renders, not when the user clicks. React wraps the browser event in its own event object, so your code behaves the same way across browsers.

function SaveButton() {
  const handleClick = () => {
    console.log("Saved!");
  };

  // Correct: pass the function itself.
  // Wrong: onClick={handleClick()} would run it while rendering.
  return <button onClick={handleClick}>Save</button>;
}

11. What does "lifting state up" mean?

When two components need the same data, you move that state to their closest common parent and pass it down as props. The parent also passes down a function so the children can ask it to change the state. This keeps one source of truth instead of two copies that can go out of sync.

import { useState } from "react";

function SearchBox({
  query,
  onChange,
}: {
  query: string;
  onChange: (value: string) => void;
}) {
  return <input value={query} onChange={(e) => onChange(e.target.value)} />;
}

function Results({ query }: { query: string }) {
  return <p>Searching for: {query}</p>;
}

function Parent() {
  const [query, setQuery] = useState(""); // the shared state lives in the parent

  return (
    <>
      <SearchBox query={query} onChange={setQuery} />
      <Results query={query} />
    </>
  );
}

Practice state and props with a small component. Try the Counter with reset challenge →

Rendering, Lists and Forms Interview Questions

12. How do you render a list in React, and why are keys needed?

Use the array map() method to turn data into elements. Each item needs a key prop, which should be a stable, unique value such as an id from your data. React uses keys to match items between renders, so it knows which ones were added, removed or moved. Avoid using the array index as a key when the list can be reordered, filtered or inserted into, because React can attach the wrong state to the wrong item.

type Fruit = { id: number; name: string };

function FruitList({ fruits }: { fruits: Fruit[] }) {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

13. How do you do conditional rendering?

You can render different UI depending on a condition with an if statement, a ternary expression (condition ? A : B), or the && operator for "show this only if". One common pitfall: {items.length && <List />} renders the number 0 when the list is empty, so write items.length > 0 && ... instead.

function Inbox({ messages }: { messages: string[] }) {
  return (
    <div>
      {messages.length > 0 ? (
        <p>You have {messages.length} messages.</p>
      ) : (
        <p>No messages.</p>
      )}
      {messages.length > 0 && <button>Mark all as read</button>}
    </div>
  );
}

14. What are fragments?

Fragments let a component return several elements without adding an extra node to the DOM. You write them as <>...</>. Use the longer <React.Fragment key={...}> form when you need to give the fragment a key, for example inside a list. Fragments are useful when an extra wrapper div would break your layout or your HTML structure, such as inside a table row.

15. What is the difference between controlled and uncontrolled components?

In a controlled component, React state is the single source of truth for the input's value: the input shows the state, and onChange updates it. In an uncontrolled component, the browser's DOM keeps the value, and you read it only when you need it, using a ref. Controlled inputs make validation and live feedback easy. Uncontrolled inputs need less code for simple forms.

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name || "stranger"}!</p>
    </div>
  );
}

import { useRef } from "react";

function NameInputUncontrolled() {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <input ref={inputRef} defaultValue="" />
      <button onClick={() => console.log(inputRef.current?.value)}>Log value</button>
    </div>
  );
}

16. How do you handle a form submission in React?

Handle onSubmit on the form element and call e.preventDefault() so the browser doesn't reload the page. Keep each input controlled with state, and use the saved values when the form is submitted.

import { useState, type FormEvent } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault(); // stop the browser from reloading the page
    console.log("Submitting", email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">Log in</button>
    </form>
  );
}

Practice controlled inputs against hidden tests. Try the Controlled input challenge →

Basic Hooks Questions for Freshers

17. What are hooks, and why were they introduced?

Hooks are functions that let function components use React features such as state and side effects. Their names start with use, like useState and useEffect. Before hooks arrived in React 16.8, you needed class components for these features. Hooks also let you reuse logic between components through custom hooks, without changing your component structure.

18. What does useState do?

useState returns an array with two items: the current value and a function to update it. Calling the update function schedules a re-render with the new value. When the new value depends on the old one, use the functional form, setCount((c) => c + 1), so you always work from the latest value. Never change state directly (like count++ or pushing into an array). Create a new value instead.

import { useState } from "react";

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

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Clicked {count} times
    </button>
  );
}

19. What is useEffect, and when does it run?

useEffect runs code after React has rendered the component. It is used for side effects: fetching data, setting timers, subscribing to events, or updating the document title. The dependency array controls when it runs. With no array, it runs after every render. With an empty array [], it runs once after the first render. With values like [count], it runs after the first render and again whenever one of those values changes. In development, React's StrictMode runs effects an extra time to help you find bugs. That doesn't happen in production.

useEffect(() => {
  // runs after every render
});

useEffect(() => {
  // runs once, after the first render
}, []);

useEffect(() => {
  document.title = `Clicked ${count} times`;
}, [count]); // runs after the first render and whenever count changes

20. What is the cleanup function in useEffect?

An effect can return a cleanup function. React runs it before the effect runs again and when the component unmounts. Use it to undo what the effect set up, such as clearing timers, removing event listeners or cancelling subscriptions. Forgetting cleanup is a common cause of bugs like timers that keep running after the component is gone.

import { useEffect, useState } from "react";

function Clock() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id); // runs before the next effect and on unmount
  }, []);

  return <p>Seconds: {seconds}</p>;
}

21. What is useRef used for?

useRef returns an object with a .current property that stays the same between renders. Changing .current does not trigger a re-render. It has two common uses: getting direct access to a DOM element (for example, to focus an input), and storing a value that should survive renders without affecting the screen, such as a timer id.

import { useRef } from "react";

function FocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>Focus the input</button>
    </div>
  );
}

22. What are the rules of hooks?

There are two rules. First, call hooks only at the top level of a component or custom hook, not inside loops, conditions or nested functions. Second, call hooks only from React function components or custom hooks. React relies on hooks being called in the same order on every render to match each call with its stored state, so a hook inside a condition can break that order.

// Wrong: the first hook only runs when loggedIn is true, so the call order can change
if (loggedIn) {
  const [name, setName] = useState("");
}
const [count, setCount] = useState(0);

// Right: call every hook on every render, then use the condition afterwards
const [name, setName] = useState("");
const [count, setCount] = useState(0);
if (loggedIn) {
  // use name here
}

23. What is a custom hook?

A custom hook is a function whose name starts with use and that calls other hooks inside it. It lets you reuse stateful logic between components without copying code. Each component that calls the hook gets its own separate state.

import { useState } from "react";

function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = () => setOn((prev) => !prev);
  return [on, toggle] as const;
}

function Switch() {
  const [on, toggle] = useToggle();
  return <button onClick={toggle}>{on ? "ON" : "OFF"}</button>;
}

Build and test effects, refs and custom hooks yourself, step by step. Read the React hooks practice roadmap →

Practice the useEffect cleanup pattern against hidden tests. Try the useEffect practice challenge →

Practical React Interview Questions for Freshers

24. What is the Context API, and when would you use it?

The Context API lets you share a value, such as the current theme or the logged-in user, with any component in a tree without passing props through every level. You create a context, wrap part of your app in its Provider with a value, and read it anywhere below with useContext. It works well for values that change rarely. Because every component that uses the context re-renders when its value changes, it isn't ideal for data that changes very often.

import { createContext, useContext } from "react";

type Theme = "light" | "dark";

const ThemeContext = createContext<Theme>("light");

function ThemedButton() {
  const theme = useContext(ThemeContext); // no props needed, however deep this component is
  return <button>Theme: {theme}</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

Practice sharing state with context. Try the Toggle theme challenge →

25. How do you fetch data in a React component?

Fetch inside useEffect, store the result in state, and also track loading and error state so the screen can show a spinner or an error message. Use an empty dependency array when you only need the data once on the first render. In larger apps, libraries like React Query or SWR handle caching and refetching for you.

import { useEffect, useState } from "react";

type User = { id: number; name: string };

function Users() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/users")
      .then((res) => {
        if (!res.ok) throw new Error("Request failed");
        return res.json() as Promise<User[]>;
      })
      .then(setUsers)
      .catch((err: Error) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading…</p>;
  if (error) return <p role="alert">{error}</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

This version keeps things simple for an interview. A production version also cancels the request when the component unmounts or the URL changes, so an old response can't overwrite a newer one.

See the full version with cancellation, plus nine more React coding questions with tested solutions. Read React coding interview questions with solutions →

Practice fetching data with loading and error states. Try the Random Quote Generator challenge →

JavaScript Topics to Revise Before a React Interview

Many React interviews include a few JavaScript questions, and weak JavaScript is the most common reason React code feels confusing. Make sure you can explain and use these:

• Array methods: map, filter, reduce and find (you use them constantly to render and update lists)
• Destructuring, spread and rest syntax (used for props and state updates)
• Arrow functions and callbacks
• Closures (the reason stale values show up inside effects and event handlers)
• Promises, async/await and fetch (for loading data)
• ES modules: import and export
• let, const, template literals, and optional chaining (?.)

What Interviewers Look For in a Fresher

• A solid grasp of the fundamentals, explained in plain language
• The ability to write a small component (a counter, a form or a list) from a blank editor
• Clear communication, including saying "I'm not sure, but I'd try..." when you're stuck
• Curiosity and the habit of building things, even small projects

"In a fresher interview, a clear, simple answer beats a long, impressive-sounding one."

Common Mistakes Freshers Make in React Interviews

• Memorizing definitions without being able to write even a small component
• Changing state directly (for example, pushing into an array) instead of creating a new value
• Calling the handler (onClick={handleClick()}) instead of passing it
• Forgetting keys on list items, or using the index as a key without knowing the downside
• Confusing the real DOM with the virtual DOM, or calling React a framework
• Going silent when stuck instead of thinking out loud

How to Practice Before Your Interview

Reading answers helps you recognize the ideas. Writing code from a blank editor helps you produce them, which is what an interview asks for. A simple plan: learn these 25 questions well enough to explain each in a few sentences, build two or three small projects, and then practice small coding questions against tests that check the edge cases.

Ten complete coding questions with tested solutions: counter, forms, todo list, pagination and more. Read React coding interview questions with solutions →

A step-by-step plan for practicing React by skill level. Read: React practice, how to get good →

Not sure what to build? Here are project ideas by skill level. Browse React project ideas →

Check where you stand with a self-assessment checklist. Take the React skill-level checklist →

Where to Go Next

Once the basics feel comfortable, the questions get deeper, and so do the answers interviewers expect.

A much longer list of React interview questions with short answers, analogies and code. Browse all React interview questions and answers →

Moving to the next level? See how the questions change at 2 to 5+ years of experience. Read React interview questions for experienced developers →

Want to rehearse out loud before the real thing? Read the React mock interview guide →

The Practical Takeaway

React interview questions for freshers come down to a small set of fundamentals: what React and JSX are, how components, props and state fit together, how to render lists and handle forms, and how the basic hooks behave. You don't need to know everything. You need to explain the basics clearly and show that you can write a small, working component.

The fastest way to get there is the same as for any skill: say the answers out loud, then build the thing without looking.

Ready to turn these answers into working code? Browse all React coding challenges →