React Interview Questions for Freshers (2026): 35 Questions with Clear Answers

Short answer: fresher React interviews focus on the fundamentals you use daily: what JSX and components are, props vs state, the main hooks (useState, useEffect, useContext), how the dependency array and keys work, controlled forms, routing, and basic state management with Context or Redux Toolkit. Expect a small live task such as a counter, a to-do list or fetching and displaying data, and at least one question on performance or on what is new in React 19. The answers below are written the way you should say them in an interview.

React builds on JavaScript, so revise the language first with our JavaScript interview questions. If you are choosing a path, see Flutter vs React Native and MERN vs Java full stack.

React basics

1. What is React?

React is an open-source JavaScript library for building user interfaces from reusable components. It uses a declarative style (you describe what the UI should look like for a given state) and a virtual DOM to update the real DOM efficiently.

2. What is JSX?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. A build tool (such as Vite or Babel) compiles it to React.createElement calls. Use className instead of class, and wrap expressions in braces: {user.name}.

3. What is the virtual DOM?

A lightweight in-memory copy of the UI. When state changes, React builds a new virtual tree, compares it with the previous one (diffing / reconciliation) and updates only the parts of the real DOM that changed, which is faster than re-rendering everything.

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

Function components are plain functions that return JSX and use hooks for state and lifecycle. Class components use this.state and lifecycle methods. Modern React is written with function components and hooks; classes are mostly legacy.

5. What are components and how do you reuse them?

Components are independent, reusable pieces of UI. You compose small components into larger ones and pass data down with props, which keeps code modular and testable.

Props and state

6. What is the difference between props and state?

7. Why is state immutable, and how do you update it correctly?

You never mutate state directly; you call the setter with a new value so React knows to re-render. For objects and arrays, create a new copy: setItems([...items, newItem]) or setUser({...user, name}).

8. What is prop drilling and how do you avoid it?

Prop drilling is passing props through many intermediate components that do not use them. Avoid it with the Context API for shared data, or a state library such as Redux Toolkit for larger apps.

9. What are keys and why do they matter?

Keys are stable, unique identifiers you give to list items so React can track which items changed, were added or removed. Use a stable id, not the array index, when the list can reorder or change, or you get subtle bugs.

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

A controlled input has its value driven by React state (value plus onChange). An uncontrolled input keeps its own value in the DOM, read with a ref. Controlled components are the usual choice because the value lives in one place.

Hooks

11. What are hooks?

Functions that let function components use React features. The common ones are useState (state), useEffect (side effects), useContext (read context), useRef (mutable references), useMemo and useCallback (memoization) and useReducer (complex state).

12. What are the rules of hooks?

Call hooks only at the top level of a component or another hook, never inside conditions, loops or nested functions, and only from React functions. This keeps the order of hooks consistent between renders.

13. How does useState work?

const [count, setCount] = useState(0);
// use the updater form when the next value depends on the previous one
setCount(prev => prev + 1);

14. What does useEffect do?

It runs side effects after render, such as fetching data, setting up subscriptions or timers. The dependency array controls when it runs: [] runs once on mount, [value] runs when value changes, and no array runs after every render.

15. What is a cleanup function in useEffect?

A function you return from the effect. React runs it before the next effect and on unmount, which is where you clear timers, unsubscribe or cancel requests to avoid memory leaks.

16. What is the difference between useMemo and useCallback?

useMemo memoizes a computed value; useCallback memoizes a function reference. Both avoid unnecessary recalculation or re-creation between renders. Use them for genuinely expensive work or to keep stable references for memoized children, not everywhere.

17. When do you use useRef?

To hold a mutable value that does not trigger a re-render, or to access a DOM element directly, such as focusing an input. Changing ref.current does not cause a render.

18. What is useReducer and when is it better than useState?

useReducer manages state through a reducer function and dispatched actions. It suits complex state with many related updates, where a reducer is clearer than several useState calls.

19. What is a custom hook?

A reusable function whose name starts with use that bundles hook logic, such as useFetch or useLocalStorage, so you can share stateful logic between components.

Rendering and events

20. How do you handle events in React?

Pass a function to an event prop in camelCase: onClick={handleClick}. React uses synthetic events, a cross-browser wrapper around native events.

21. How do you render lists and conditional UI?

Map an array to elements with a key, and use short-circuiting or a ternary for conditions:

{items.map(item => <li key={item.id}>{item.name}</li>)}
{isLoading ? <Spinner /> : <List items={items} />}
{error && <p className="error">{error}</p>}

22. What causes a component to re-render?

A change in its state, a change in the props it receives, or its parent re-rendering. Context value changes also re-render consumers.

23. What is lifting state up?

Moving shared state to the closest common parent so several children can read and update it through props, keeping a single source of truth.

Routing and data

24. How do you add routing in a React app?

With React Router: wrap the app in a router, declare Routes and Route, navigate with Link or the useNavigate hook, and read URL parameters with useParams.

25. How do you fetch data in React?

Call fetch or axios inside useEffect and store the result in state, handling loading and error states. In real projects a data library such as React Query (TanStack Query) handles caching, retries and refetching for you.

26. What is the difference between client-side and server-side rendering?

Client-side rendering builds the page in the browser with JavaScript. Server-side rendering (for example with Next.js) sends ready HTML from the server, which helps first load and SEO.

State management

27. What is the Context API?

A built-in way to share data such as the current user or theme without prop drilling. You create a context, wrap part of the tree in its Provider and read it with useContext. It is best for low-frequency, global-ish data.

28. What is Redux Toolkit and when do you need it?

The standard way to use Redux, with less boilerplate. It centralises app state in a store with slices (reducers and actions) and is useful for large apps with complex, shared state. Many small apps do fine with Context and hooks.

Performance and React 19

29. How do you optimise a slow React app?

Memoize expensive values and components (useMemo, useCallback, React.memo), give lists stable keys, split code with lazy loading (React.lazy and Suspense), avoid creating new objects and functions in render where it matters, and virtualise very long lists.

30. What is React.memo?

A wrapper that skips re-rendering a component when its props have not changed, useful for pure presentational components that render often.

31. What is the difference between a controlled key change and reconciliation?

Changing a component’s key tells React to unmount the old instance and mount a fresh one (resetting its state), whereas normal reconciliation reuses the instance and updates it.

32. What is new in React 19?

React 19 (stable since December 2024) adds Actions and the useActionState and useOptimistic hooks for form and async flows, the use() API for reading promises and context during render, ref passed as a normal prop (so forwardRef is on its way out), built-in document metadata tags, and stable Server Components and Server Functions.

33. What are Server Components?

Components that render on the server and send the result to the client, reducing the JavaScript shipped to the browser. They are stable in React 19 and are commonly used through frameworks such as Next.js.

Coding tasks

34. Build a counter.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Add</button>
    </div>
  );
}

35. Fetch and display a list.

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("/api/users")
      .then(r => r.json())
      .then(data => setUsers(data))
      .finally(() => setLoading(false));
  }, []);
  if (loading) return <p>Loading...</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

How to prepare

1. Build three small apps: a to-do list, a data-fetching list with loading and error states, and a form with validation. Put them on GitHub.
2. Be ready to explain hooks, the dependency array and keys with examples.
3. Revise JavaScript fundamentals, since many React rounds start there. Use our JavaScript interview questions.
4. Prepare a two-minute walkthrough of one project: the components, how state flows and one bug you fixed.

For the full process, read our tech interview preparation guide.

Learn React at TryCatch Classes

TryCatch Classes’ React JS Training covers components and JSX, props, state and events, hooks, routing, forms with Formik, the Context API, Redux Toolkit, React Query and building SEO-friendly apps with Next.js, with industry-style projects and interview preparation. To learn the language first, see JavaScript Training. Learn at our Borivali West classroom or live online, with a 100% placement guarantee.

New to front-end development? Start with the front-end developer roadmap.

Choosing a framework or adding types? See React vs Angular vs Vue and TypeScript for beginners.

Frequently asked questions

Is React in demand for freshers in 2026?

Yes. React remains one of the most requested front-end skills in Indian job listings, often alongside JavaScript and Next.js, in both product companies and agencies.

Do I need to know JavaScript before React?

Yes. React is a JavaScript library, so you should be comfortable with ES6 features, functions, arrays, promises and async/await before going deep into React.

Class components or hooks for interviews?

Focus on function components and hooks, which is how modern React is written. Know enough about class components to recognise legacy code.

How many projects should a fresher show?

Two or three is enough if they are real and you can explain them: a to-do app, a data-fetching app and a small full-stack or API-driven project.

Cover image: photo by Emile Perron on Unsplash.