Top 30 React Interview Questions for Freshers 2026 — With Answers

The most asked React JS interview questions for freshers in 2026, with clear answers. Covers components, hooks, state, lifecycle, performance, and real interview scenarios.

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
// 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?

| Feature | Functional | Class |
|---|---|---|
| Syntax | Function | ES6 class extending React.Component |
| State | useState hook | this.state |
| Lifecycle | useEffect hook | componentDidMount, etc. |
| Complexity | Simpler | More boilerplate |
| Performance | Slightly better | Slightly heavier |
| Modern usage | Standard (2019+) | Legacy codebases |

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.

```jsx
// 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.

```jsx
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.

```jsx
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:

```jsx
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:

```jsx
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

```jsx
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?

| Scenario | Use |
|---|---|
| Simple global state (theme, auth) | Context API |
| Complex state with many updates | Redux Toolkit |
| Derived state, selectors | Redux Toolkit |
| Small-medium app | Context API |
| Large app with teams | Redux Toolkit |

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:
```jsx
const [value, setValue] = useState("");
<input value={value} onChange={e => setValue(e.target.value)} />
```

**Uncontrolled** — DOM manages the value, accessed via ref:
```jsx
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:

```jsx
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.

```jsx
{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:

```jsx
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?

```jsx
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:

```jsx
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):

```jsx
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?

```jsx
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 →](/java-full-stack) or [WhatsApp us](https://wa.me/916301099587).