Top 30 React Interview Questions for Freshers 2026 — With Answers

These are the React questions that freshers get asked in Hyderabad tech interviews — collected from 100+ student interview debriefs. I've ranked them by frequency and given answers that are clear enough to say aloud in an interview.

---

Section 1 — Core Concepts

1. What is React and why do companies use it?

React is a JavaScript library for building user interfaces — specifically, component-based UIs where each piece of the UI is an independent, reusable component.

Companies use it because:

• Component reusability reduces code duplication
• Virtual DOM makes UI updates efficient
• One-directional data flow makes apps predictable and easier to debug
• Large ecosystem and community (hooks, routing, state management, testing tools)

2. What is JSX?

JSX is a syntax extension that lets you write HTML-like code inside JavaScript. Browsers can't read it directly — Babel compiles it to React.createElement() calls.

// JSX
const element = <h1 className="title">Hello, {name}</h1>;

// What it compiles to
const element = React.createElement("h1", { className: "title" }, "Hello, " + name);

Key JSX rules:

• Use className instead of class
• All tags must be closed (<br />, not <br>)
• Return one root element (or use <>...</> Fragment)

3. What is the Virtual DOM?

The Virtual DOM is an in-memory representation of the real DOM. When state changes, React:

1. Creates a new Virtual DOM tree
2. Compares it with the previous Virtual DOM (this is called "diffing")
3. Computes the minimum number of changes needed
4. Updates only those specific parts of the real DOM

This makes React updates faster than directly manipulating the DOM on every change.

4. What is the difference between a functional component and a class component?

You should know class components for reading legacy code, but always write functional components with hooks.

5. What are props in React?

Props (short for properties) are inputs passed from a parent component to a child component. They are read-only — a child cannot modify its own props.

// Parent
<StudentCard name="Priya" city="Hyderabad" score={92} />

// Child
function StudentCard({ name, city, score }) {
  return <div>{name} from {city} — Score: {score}</div>;
}

6. What is state in React?

State is data that belongs to a component and can change over time. When state changes, React re-renders the component.

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

Props vs State:

• Props come from outside (parent) — read-only
• State lives inside the component — mutable, triggers re-render when changed

---

Section 2 — Hooks

7. What is useState and how does it work?

useState creates a state variable in a functional component. It returns an array with two elements: the current value and a setter function.

const [name, setName] = useState(""); // initial value is ""

// Update state
setName("Priya"); // triggers re-render with name = "Priya"

8. What is useEffect and what are its dependencies?

useEffect runs side effects after rendering. The dependency array controls when it runs:

useEffect(() => { /* runs after every render */ });
useEffect(() => { /* runs once on mount */ }, []);
useEffect(() => { /* runs when userId changes */ }, [userId]);

9. What is the cleanup function in useEffect?

The function returned from useEffect runs before the next effect or when the component unmounts:

useEffect(() => {
  const timer = setInterval(() => { /* ... */ }, 1000);
  return () => clearInterval(timer); // cleanup — prevents memory leaks
}, []);

10. What is the difference between useCallback and useMemo?

• useCallback memoizes a function — returns the same function reference unless dependencies change
• useMemo memoizes a value — returns the same computed result unless dependencies change

const handleClick = useCallback(() => doSomething(id), [id]); // memoized function
const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]); // memoized value

11. What is useRef?

useRef returns a mutable object ({ current: value }) that persists across renders without triggering re-renders.

Main uses:

1. Access a DOM element directly (ref.current.focus())
2. Store a value that shouldn't trigger re-renders (like a timer ID)

12. What are the rules of hooks?

1. Only call hooks at the top level — not inside if statements, loops, or nested functions
2. Only call hooks from React functional components or custom hooks — not regular JS functions

---

Section 3 — State Management

13. What is prop drilling and how do you solve it?

Prop drilling happens when you pass props through multiple intermediate components that don't need the data — just to get it to a deeply nested child.

Solutions:

1. useContext — create a React context and consume it anywhere in the tree
2. Redux — centralized state store (for complex, global state)
3. Zustand — simpler alternative to Redux

14. When should you use Redux vs Context API?

Context API re-renders all consumers when value changes — Redux is optimized with selectors.

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

Controlled — React controls the input value through state:

const [value, setValue] = useState("");
<input value={value} onChange={e => setValue(e.target.value)} />

Uncontrolled — DOM manages the value, accessed via ref:

const ref = useRef();
<input ref={ref} />
// Access value: ref.current.value

Controlled is preferred — it gives React full control over form data.

---

Section 4 — Performance

16. What is React.memo?

React.memo prevents a component from re-rendering if its props haven't changed:

const StudentCard = React.memo(function StudentCard({ name, score }) {
  return <div>{name}: {score}</div>;
});

Use it for components that are expensive to render and receive the same props frequently.

17. What is key prop and why is it important in lists?

The key prop helps React identify which list items changed, were added, or removed. Without keys, React re-renders all list items on any change. With stable unique keys, React updates only changed items.

{students.map(s => <StudentCard key={s.id} {...s} />)}

Never use index as key if the list can be reordered — it causes bugs.

18. What causes unnecessary re-renders in React?

1. Parent re-renders → all children re-render by default
2. New object/array created inline as prop (new reference = "changed")
3. State updates with same value (React 18 batches these but earlier versions don't)

Solutions: React.memo, useCallback, useMemo

---

Section 5 — Routing & Patterns

19. How do you implement routing in React?

Using React Router v6:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/students">Students</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/students" element={<StudentList />} />
        <Route path="/students/:id" element={<StudentDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

20. How do you access URL parameters in React Router?

import { useParams } from "react-router-dom";

function StudentDetail() {
  const { id } = useParams(); // from /students/:id
  // use id to fetch student data
}

21. What is a Higher Order Component (HOC)?

A HOC is a function that takes a component and returns a new component with enhanced behavior:

function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const { user } = useAuth();
    if (!user) return <Navigate to="/login" />;
    return <WrappedComponent {...props} />;
  };
}

HOCs are a pattern from class component era — hooks have largely replaced them for new code.

---

Section 6 — Lifecycle & Advanced

22. What are the React component lifecycle phases?

Three phases (applies to class and functional components):

1. Mount — component is created and inserted into DOM (useEffect(() => {}, []))
2. Update — re-render due to state/prop change (useEffect(() => {}, [dep]))
3. Unmount — component removed from DOM (cleanup function in useEffect)

23. What is the difference between useEffect and useLayoutEffect?

• useEffect — runs asynchronously after the browser has painted the screen
• useLayoutEffect — runs synchronously after DOM mutations but before browser paint

Use useLayoutEffect only when you need to measure the DOM or make changes that should be invisible to the user (like scroll position adjustments). Use useEffect for everything else.

24. What is Suspense in React?

Suspense lets you declaratively specify a loading state while a component is waiting for something (lazy-loaded component, async data):

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <HeavyComponent />
    </Suspense>
  );
}

25. How do you call a REST API in React and handle errors?

function StudentList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("/api/students")
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(setData)
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p style={{ color: "red" }}>Error: {error}</p>;
  return <ul>{data.map(s => <li key={s.id}>{s.name}</li>)}</ul>;
}

---

Common Mistakes in React Interviews

1. Saying "React is a framework" — it's a library. Angular is a framework.
2. Not knowing prop drilling — this comes up in every interview
3. Confusing useCallback and useMemo — functions vs values
4. Not being able to write a controlled form from scratch
5. Using index as key — always explain why this is wrong

---

Practice these by building, not just reading. CodeBegun's React module includes 4 weeks of hands-on labs and project work. View the full program → or WhatsApp us.