React JS interview questions and answers for freshers

React basic interview questions

Before an interviewer asks you about hooks, routing, or state management, they will almost always test your understanding of what React is and how it works at a fundamental level.

What is React?

React is an open-source JavaScript library developed and maintained by Meta (formerly Facebook). It is used for building fast, interactive user interfaces, particularly for single-page applications.

React follows a component-based architecture, meaning the UI is broken into small, reusable components that manage their own logic and rendering.

What is the virtual DOM, and how does it work?

The virtual DOM is a lightweight in-memory representation of the real DOM. When a component's state or props change, React creates a new virtual DOM tree and compares it with the previous one — a process called diffing.

Only the parts that have actually changed are updated in the real DOM. This process is what makes React fast and efficient.

What is JSX?

JSX stands for JavaScript XML. It allows developers to write HTML-like code directly inside JavaScript files. For example:

const element = <h1>Hello, world!</h1>;

JSX is not valid JavaScript on its own; it is transpiled by tools like Babel into React.createElement() calls. The ability to write HTML-like code alongside logic is one of the most recognizable React features.

What are props in React?

Props (short for properties) are the mechanism through which a parent component passes data to a child component. Props are read-only; a component in React cannot modify the props it receives. This is the foundation of unidirectional data flow (also called one-way data flow) in React.

What is state in React?

React state is a built-in object that stores data local to a component.

Unlike props, state can be updated by the component itself. When state changes, React re-renders the component to reflect the new data. Managing state correctly is central to building any React application.

What is unidirectional data flow?

React enforces a one-way data flow, meaning data moves from parent components down to child components via props. This makes data flow predictable and easier to debug, which is one of the core concepts that distinguishes React from older frameworks.

What is a React fragment?

React fragments let you group multiple elements without adding an extra node to the DOM. Instead of wrapping elements in a <div>, you can use:

<>
  <h1>Title</h1>
  <p>Description</p>
</>

This is useful when you want to return multiple child components from a single render without polluting the DOM structure.

What is the difference between a library and a framework?

React is a JavaScript library, not a framework.

It handles only the view layer of an application. Routing, state management, and data fetching are handled by separate tools that you integrate into your React app. This makes React flexible but also means you need to make architectural decisions yourself.

React JS components and lifecycle questions

Understanding components and how they behave over time is at the heart of building any React application.

What is a React component?

A React component is a self-contained, reusable piece of UI. It accepts inputs (props), manages its own state, and returns JSX to describe what should be rendered on screen. Components are the building blocks of every React application, and you can combine multiple components to build complex interfaces.

What is the difference between functional and class components?

React has two types of components:

• React function components (also called functional components) are plain JavaScript functions that return JSX. They are the modern standard and are used alongside hooks in React to manage state and side effects.
• Class components are ES6 classes that extend React.Component. They have a render() method and access to lifecycle methods directly. Before hooks were introduced, class components were the only way to use state and lifecycle methods.

Today, React functional components are preferred in most codebases. However, understanding class components remains important for interviews and for working with legacy code.

What are lifecycle methods?

Lifecycle methods are special methods available on class components that run at specific points in a component's life:

• componentDidMount: runs after the component mounts (first renders to the DOM)
• componentDidUpdate: runs after every update to props or state
• componentWillUnmount: runs before the component is removed from the DOM

In functional components, the useEffect hook covers all three of these stages.

What is the difference between a parent component and a child component?

A parent component renders one or more child components inside its JSX. The parent can pass data to a child via props.

A deeply nested child component sits several levels down the component tree, making it harder to pass data directly, which is why tools like Context or state management libraries become useful.

What are reusable components?

Reusable UI components are components designed to be used in multiple places in an application.

For example, a Button component that accepts props like label and onClick can be used across an entire React app without duplicating code. Building reusable components is one of the core principles of good React architecture.

What are error boundaries?

Error boundaries are class components that catch JavaScript errors anywhere in their child component tree and display a fallback UI instead of crashing the entire React application.

They are created using the componentDidCatch and getDerivedStateFromError lifecycle methods. As of now, error boundaries cannot be created using hooks; class components are still required for this pattern.

What is lazy loading in React?

Lazy loading is a technique for splitting your JavaScript bundle so that certain components are only loaded when they are needed. This reduces the initial load time of the React application. It is implemented using React.lazy() combined with <Suspense>:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

React Hooks interview questions

Hooks transformed the way React developers write components, and they are now one of the most heavily tested topics in any fresher interview, so make sure you know these well.

What are hooks in React?

Hooks are functions that let functional components use state and other React features that were previously available only in class components. Hooks were introduced in React 16.8. The most commonly used hooks are useState, useEffect, useContext, useRef, useMemo, and useCallback.

What is useState?

useState is a hook that adds local state to a functional component. Here is a basic example:

import React, { useState } from 'react';

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

In the example above, const [count, setCount] = useState(0) initializes the state variable count to 0. Calling setCount triggers a re-render with the updated value.

What is useEffect?

useEffect is a hook that lets you perform side effects in functional components, such as data fetching, DOM manipulation, or setting up subscriptions. It runs after the component renders. The dependency array controls when it runs:

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

useEffect(() => {
  // runs only on mount
}, []);

useEffect(() => {
  // runs when `count` changes
}, [count]);

The dependency array is a list of values the effect depends on. When any value in the array changes, the effect re-runs.

What is useContext?

useContext is a hook that lets a component read from a React context without wrapping it in a consumer component. It is commonly used to avoid prop drilling, the process of manually passing props through many levels of the component tree, especially to a deeply nested child component.

What is useRef?

useRef returns a mutable ref object that persists across renders without triggering a re-render when updated. It is commonly used to access DOM elements directly or to store a value that should not cause a re-render when changed.

What are useMemo and useCallback?

Both hooks are used to prevent unnecessary re-renders by memoizing values and functions:

• useMemo returns a memoized value. It recalculates only when its dependencies change.
• useCallback returns a memoized function. It is particularly useful for passing stable callback references to optimized child components.

What is useReducer?

useReducer is an alternative to useState for managing complex state logic.

It follows the same pattern as a Redux reducer; you dispatch actions, and a reducer function returns the new state. It is useful when the next state depends on the previous state or when the state logic involves multiple sub-values.

What are the rules of hooks?

• Only call hooks at the top level of a function; never inside loops, conditions, or nested functions.
• Only call hooks from React function components or custom hooks.

Violating these rules leads to inconsistent behavior and bugs.

React router interview questions

Once you can build components and manage state, the next step is navigation, and React Router is how most React applications handle it.

What is React Router?

React Router is the standard library for client-side routing in React applications. It allows you to navigate between different views or pages without a full page reload, enabling the SPA (single-page application) behavior that React is well-suited for.

What are the core components of React Router?

• <BrowserRouter>: wraps the React app and enables routing using the browser's history API
• <Routes>: a container for all route definitions
• <Route>: maps a URL path to a component
• <Link>: renders an anchor tag that navigates without reloading the page
• <Navigate>: programmatically redirects the user

What is the difference between <Link> and <a> in React?

A standard HTML <a> tag causes a full browser reload when clicked. <Link> from React Router handles navigation client-side, updating the URL and rendering the appropriate component without refreshing the page.

What are dynamic routes?

Dynamic routes use URL parameters to render different content based on the URL. For example:

<Route path="/user/:id" element={<UserProfile />} />

Inside UserProfile, you access the id parameter using the useParams hook.

What is useNavigate?

useNavigate is a hook provided by React Router that lets you programmatically navigate to a different route. For example, after a form submission, you can redirect the user to a success page.

What is nested routing?

Nested routing allows child routes to render inside a parent route's component. This is useful for layouts; for example, a dashboard with a shared sidebar where only the main content area changes based on the route.

Advanced React interview questions

These are the questions that separate candidates who have only read about React from those who have actually built with it.

What are higher-order components?

Higher-order components (HOCs) are functions that take a react component as input and return a new component with enhanced functionality. They are a pattern for reusing component logic.

For example, a withAuth HOC could wrap any component and redirect unauthenticated users.

function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    if (!isLoggedIn) return <Redirect to="/login" />;
    return <WrappedComponent {...props} />;
  };
}

What are React portals?

React portals provide a way to render a component's children into a DOM node that exists outside the parent component's DOM hierarchy. This is useful for modals, tooltips, and dropdowns that need to visually escape overflow or z-index constraints of their parent.

ReactDOM.createPortal(child, document.getElementById('modal-root'));

What is code splitting?

Code splitting is the practice of breaking the JavaScript bundle into smaller chunks that are loaded on demand. Combined with lazy loading, this significantly improves the initial load time of a react application.

What is server-side rendering (SSR)?

Server-side rendering (SSR) is the process of rendering a React application on the server and sending the fully rendered HTML to the browser.

This improves initial load time and is beneficial for SEO. Frameworks like Next.js make server-side rendering straightforward for React apps.

What is React Concurrent Mode?

React concurrent mode is a set of features that allows React to interrupt, pause, and resume rendering work.

It enables better responsiveness in complex React applications by prioritizing urgent user interactions over less critical background updates. Features like useTransition and Suspense are part of this model.

What is reconciliation?

Reconciliation is the process by which React updates the virtual DOM tree and determines the minimum number of changes needed to update the real DOM. React uses a diffing algorithm that compares the new and previous virtual DOM trees to make this process efficient.

What are React's performance optimization techniques?

• Use React.memo to prevent re-renders of optimized child components when their props have not changed
• Use useMemo and useCallback to avoid unnecessary recalculations and function re-creation
• Use lazy loading and code splitting to reduce the initial load time
• Avoid deeply nested component structures where possible
• Use the key prop correctly in lists to help React identify changes efficiently

React State Management questions

These questions focus on how you handle state, share data, and choose the right approach for different scenarios.

What is state management in React?

State management refers to how data is stored, updated, and shared across a React application. For simple apps, local component state (via useState) is sufficient. As the application grows, managing global state — data that multiple components need access to — becomes a challenge.

What is the Context API?

The Context API is React's built-in solution for sharing global state across the component tree without prop drilling. You create a context, provide it at a high level in the component tree, and consume it anywhere below using useContext. It is best suited for low-frequency updates like themes or authentication status.

What is Redux?

Redux is one of the most popular state management libraries for React. It stores the entire application state in a single global store.

Components can read from the store and dispatch actions to update it. Redux enforces a strict unidirectional data flow, which makes managing data flow predictable and traceable.

When should you use Redux vs. the Context API?

• Use the Context API for simple, infrequently updated global state (theme, locale, authentication).
• Use Redux (or alternatives like Zustand or Jotai) when your React application has complex state logic, frequent updates, or when you need advanced features like middleware and time-travel debugging.

What is prop drilling, and how do you avoid it?

Prop drilling occurs when you need to pass data through multiple levels of the component tree just to reach a deeply nested child component that needs it. You can avoid it by using the Context API, a state management library, or component composition patterns.

What is Zustand?

Zustand is a lightweight state management library that offers a simpler API than Redux. It does not require wrapping the React app in a provider and stores state in plain JavaScript objects. It is increasingly popular for medium-complexity applications that do not need the full Redux setup.

React projects/practical questions

Most React interviews include a practical round. These questions test how you build, debug, and think through real application scenarios.

What are React coding interview questions likely to cover?

React coding interview questions for freshers typically involve:

• Building a simple function counter or to-do list using useState
• Fetching data from an API using useEffect and displaying it
• Creating controlled and uncontrolled form components
• Implementing a parent component that passes data to child components via props
• Using React Router to build a multi-page React app

What is the difference between controlled and uncontrolled components?

A controlled component is one where form data is handled by React state. The input's value is always driven by state:

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

An uncontrolled component stores form data in the DOM itself. You access its value using a useRef:

const inputRef = useRef();
// inputRef.current.value gives the current input value

Controlled components give you full control over form data, which is why they are preferred in most React applications. Uncontrolled components are simpler for quick integrations or when working with non-React libraries.

How do you fetch data in React?

Data fetching in React is typically done inside a useEffect hook, either using the native fetch API or a library like Axios. For more advanced data fetching with caching and refetching, libraries like React Query (TanStack Query) are widely used.

What is React Testing Library?

React Testing Library is a testing utility that encourages testing React components from the perspective of the user.

Instead of testing implementation details, it focuses on how the user actually interacts with the UI; clicking buttons, typing into inputs, and reading text. It is the most widely used tool to test React components and pairs well with Jest.

How do you optimize a React app's performance in a project?

To optimize React app’s performance:

• Avoid unnecessary re-renders using React.memo, useMemo, and useCallback
• Apply lazy loading to routes and heavy components
• Use pagination or virtual scrolling for large data lists
• Keep the component tree shallow and avoid deeply nested component structures
• Profile the app using React DevTools to identify bottlenecks

How do you import React in modern projects?

In React 17 and above, you no longer need to explicitly write import React at the top of every file for JSX to work. The new JSX transform handles this automatically. However, you still need to import react (or specific hooks) when using hooks:

import React, { useState, useEffect } from 'react';

In modern setups, import React from 'react' is only necessary when using React APIs directly.

What is React Native?

React Native is a framework built on top of React for building mobile applications for iOS and Android using JavaScript and React.

It uses native components instead of web components, which means apps built with react native look and feel native rather than web-based. The core concepts — components, state, props, and hooks — are shared with React for the web.

Common React JS interview tips for freshers

A strong foundation and the right preparation approach can set you apart. Here are the key areas to focus on before your interview.

Understand the fundamentals first

Before diving into React advanced interview questions, make sure you are solid on the core concepts — what React is, how the virtual DOM works, the difference between functional and class components, and how props in React and state work. Interviewers almost always start here.

Practice writing code by hand

Many React.js coding interview questions require you to write code in a shared editor or on a whiteboard without autocomplete. Practice writing a function counter, a controlled component, or a basic fetch-and-display pattern from memory.

Know your hooks cold

React hooks interview questions are among the most common in any fresher interview. Be comfortable explaining useState, useEffect, useContext, useMemo, useCallback, and useReducer; including when and why to use each one.

Be ready for React.js interview questions for freshers on projects

Even if you do not have professional experience, you need at least one or two personal projects to talk about. Build a React practice assessment app, something like a quiz app, a movie search tool, or a task manager — to demonstrate that you can connect React's features to real user interactions.

Understand state management at a conceptual level

You do not need to be a Redux expert as a fresher, but you should be able to explain what global state is, why prop drilling is a problem, and how the Context API solves it.

Study React testing basics

Interviewers increasingly ask about React testing. Know what React Testing Library is, why it is preferred over Enzyme, and be able to describe how you would test a simple button click or form submission.

Learn about performance and rendering

Understanding how to prevent unnecessary re-renders and how to optimize React app performance is a differentiator, even for freshers. Know what React.memo, useMemo, and useCallback do and when to reach for them.

Brush up on React developer job requirements

Looking at actual React developer job listings will tell you what skills are most valued in the current market. Most React.js developer jobs require familiarity with React Router, React Hooks, a state management solution (even just Context), and basic React testing.

Keep up with ecosystem trends

Knowing about server-side rendering (SSR), React concurrent mode, and tools like Next.js shows that you are engaged with the React ecosystem beyond the basics. You do not need to be an expert, but awareness signals genuine enthusiasm for the field.

Build your dream React career with MyCareernet

Preparing for React interviews goes beyond memorizing answers. A clear understanding of fundamentals beyond, combined with consistent practice and real project experience, makes a noticeable difference in how confidently you approach interviews.

Spending time building small projects, revisiting common patterns, and practicing under timed conditions can help you move from knowing concepts to applying them with ease. That shift is often what sets candidates apart in real interviews.

Once your preparation is in place, the next step is finding the right opportunities to apply it. Find jobs on MyCareernet and start applying to positions that match your skills, interests, and career goals. You can also revisit common interview questions and answers to ensure your behavioral preparation is as strong as your technical skills.

Frequently asked questions