Land the job you want — prepare
with Real interviews Q&A

Curated interview questions, company-wise guides and coding rounds. Practice mock interviews, improve with feedback, and track your progress.

Start interview Prep Explore Topics

Q&A

Top curated interview packs

Company-wise & role-wise packs, quality assured.

Mock interview

AI scoring

Coding rounds

Top 10 sets

Beginner

1. What is React?

React is a popular JavaScript library used for building user interfaces (UI), especially for web applications. It was created by Meta Platforms (originally Facebook) and is widely used to build fast, interactive websites.

React lets you build a webpage as a collection of reusable components—small pieces of UI like buttons, forms, or menus—that can manage their own data and update efficiently.

Key ideas in React

Components : Think of these as building blocks. Each part of your UI (like a navbar or a card) is a component.
JSX (JavaScript XML) : A syntax that looks like HTML but is written inside JavaScript.
State : Data that changes over time (like a counter or user input).
Props (Properties) : Data passed from one component to another.
Virtual DOM : React keeps a lightweight copy of the real webpage in memory to update things faster.

Why developers use React ?

Fast updates (thanks to the Virtual DOM)
Reusable code (components)
Strong ecosystem and community
Works well for single-page applications (SPAs)

Where you see React in real life

Many major platforms use React, including parts of:

Facebook
Instagram
Netflix
Airbnb

Beginner

2. What are components?

In React, components are small, reusable pieces of UI (User Interface).

You can think of them like LEGO blocks for a website. Each component represents one part of the screen, such as:

Navbar
Button
Login form
Product card
Footer

These pieces can be reused multiple times across the application.

Example of a Component

React

function Welcome() {
  return <h1>Welcome to React</h1>;
}

Welcome is a component

It returns UI using JSX

You can use it anywhere in your app

Beginner

3. What is JSX?

JSX stands for JavaScript XML.

It is a syntax used in React that lets you write HTML-like code inside JavaScript.

JSX makes React code easier to read and write.

React


  //Without JSX

  const element = React.createElement(
  "h1",
  null,
  "Hello World"
);

//With JSX

const element = <h1>Hello World</h1>;

Beginner

4. Functional vs className components?

Functional components use hooks, className components use lifecycle methods.

Functional Components
Class Components

Today, developers mostly use Functional Components.

Functional Components

These are simple JavaScript functions that return JSX.

javascript


 const Welcome = () => {
  return <h1>Hello React</h1>;
};

Beginner

5. What is props?

Props stands for Properties.

Props are used to pass data from one component to another.

They work like function arguments in JavaScript.

javascript

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

<Welcome name="Akash" />

Beginner

6. What is state?

State is an object that holds component data and controls behavior.

When the state changes, React automatically updates the UI.

State = Data that can change over time.

Examples

Counter value
Form input
Dark/light mode
Logged-in status
Todo list items

Example of State in Functional Component

React

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

<Welcome name="Akash" />

Beginner

7. What is useState?

useState is a React Hook used to add state to functional components.

It allows components to store and update data dynamically.

React

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

//Basic Counter Example

import { useState } from "react";

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

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

Beginner

8. What is virtual DOM?

The Virtual DOM (VDOM) is a lightweight copy of the real HTML DOM.

React uses it to improve performance and update the UI efficiently.

Instead of updating the entire webpage directly, React:

Creates a virtual copy of the DOM
Detects what changed
Detects what changed

Beginner

9. What is event handling?

Event handling means responding to user actions like:

Clicking a button
Typing in an input
Hovering the mouse
Submitting a form

React

function App() {
  function handleClick() {
    alert("Button Clicked");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

Beginner

10. What is conditional rendering?

Conditional rendering means showing different UI based on a condition.

React uses normal JavaScript conditions like:

if
else
Ternary operator (? :)
Logical AND (&&)

React

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <h1>Welcome</h1> : <h1>Please Login</h1>}
    </div>
  );
}

Intermediate

16. What is useEffect?

useEffect is a React Hook used to handle side effects in functional components.

Side effects are operations that happen outside normal UI rendering.

Example

Fetching API data
Updating the DOM
Timers (setTimeout, setInterval)
Event listeners
Local storage access

React

import { useEffect } from "react";

function App() {

  useEffect(() => {
    console.log("Component Mounted");
  }, []);

  return <h1>Hello</h1>;
}

Intermediate

17. Dependency array in useEffect?

The dependency array is the second argument of useEffect.

It controls when the effect should run.

React

useEffect(() => {

}, [dependencies]);

// run on cont change

useEffect(() => {
  console.log("Count changed");
}, [count]);

// run on every render

useEffect(() => {
  console.log("Runs every render");
});

//Multiple Dependencies

useEffect(() => {
  console.log("Runs when count or name changes");
}, [count, name]);

Intermediate

18. What is lifting state up?

Lifting state up means moving state from a child component to a common parent component so multiple components can share the same data.

It is used when two or more components need access to the same state.

React

Imagine two input components that should always show the same text.

If each has separate state
//--------------------function one------------------
function Input1() {
  const [text, setText] = useState("");
}
//-----------function two--------
function Input2() {
  const [text, setText] = useState("");
}

//Lift State Up

//Parent Component

import { useState } from "react";

function App() {

  const [text, setText] = useState("");

  return (
    <div>
      <Input
        text={text}
        setText={setText}
      />

      <Display
        text={text}
      />
    </div>
  );
}

//Child Input Component

function Input({ text, setText }) {

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
}

//Child Display Component

function Display({ text }) {
  return <h1>{text}</h1>;
}

How it Works

Parent stores the state
Parent passes state to children using props
Children use or update the state
All components stay synchronized

React

import { useState } from "react";

function App() {

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

  return (
    <div>

      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <h1>{name}</h1>

    </div>
  );
}

Intermediate

19. What is controlled component?

A controlled component is a form element whose value is controlled by React state.

React stores the form data in state
The input value comes from state
Changes are handled using onChange

React

import { useState } from "react";

function App() {

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

  return (
    <div>

      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <h1>{name}</h1>

    </div>
  );
}

Controlled Component Cycle

User types
onChange fires
State updates
React re-renders
Input shows updated value

Why Controlled Components are Important

Form validation
Dynamic input handling
Real-time updates
Better control over forms
Easier debugging

React

// Example Without Key

Intermediate

20. What is key in React?

A key is a special prop used when rendering lists of elements in React.

It helps React identify which items changed, were added, or removed.

Why Keys are Needed

When React updates a list, it must know:

Which item stayed the same
Which item changed
Which item was removed

Keys help React update the UI efficiently.

React

//Example Without Key

const users = ["Akash", "Rahul", "Aman"];

users.map((user) => (
  <li>{user}</li>
));


//Correct Example with Key

const users = ["Akash", "Rahul", "Aman"];

users.map((user, index) => (
  <li key={index}>{user}</li>
));

//Best Practice: Use Unique IDs

const users = [
  { id: 1, name: "Akash" },
  { id: 2, name: "Rahul" }
];

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

Intermediate

21. What is Context API?

The Context API is a React feature used to share data between components without manually passing props at every level.

It helps avoid prop drilling.

Passing props through many nested components.

React



import {
  createContext,
  useContext
} from "react";

const UserContext = createContext();

function App() {

  return (
    <UserContext.Provider value="Akash">
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {

  const user = useContext(UserContext);

  return <h1>Hello {user}</h1>;
}

Intermediate

22. What is prop drilling?

Prop drilling means passing props from one component to another through multiple levels of components, even when intermediate components do not need those props.

App → Parent → Child → GrandChild

Suppose only GrandChild needs the user data.

But you must pass it through every component:

React



//App Component

function App() {

  const user = "Akash";

  return <Parent user={user} />;
}

//function Parent({ user }) {

  return <Child user={user} />;
}

//function Child({ user }) {

  return <GrandChild user={user} />;
}

//function GrandChild({ user }) {

  return <h1>{user}</h1>;
}

Problem HereParent and Child don't actually use user.They only pass it forward.

Harder to maintain
Messy
Difficult to scale

Ways to Avoid Prop Drilling

Context API
Redux
Zustand
Component composition

Intermediate

23. What is memo?

memo is a React feature used to prevent unnecessary re-rendering of components.

It improves performance by re-rendering a component only when its props change.

Why memo is Needed

Normally, when a parent component re-renders:All child components also re-render Even if their props did not change. This can reduce performance in large applications.

React

//Without memo

function Child() {
  console.log("Child Rendered");

  return <h1>Child</h1>;
}

//With memo

import React, { memo } from "react";

const Child = memo(() => {

  console.log("Child Rendered");

  return <h1>Child</h1>;
});

//Example

import React, { useState, memo } from "react";

const Child = memo(({ name }) => {

  console.log("Child Rendered");

  return <h1>{name}</h1>;
});

function App() {

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

  return (
    <div>

      <Child name="Akash" />

      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>

    </div>
  );
}

Intermediate

24. What is useCallback?

useCallback is a React Hook used to memoize functions.

It prevents a function from being recreated on every render.

This helps improve performance, especially when passing functions to child components.

React

const memoizedFunction = useCallback(() => {

}, [dependencies]);

Intermediate

25. What is useMemo?

useMemo is a React Hook used to memoize computed values.

It prevents expensive calculations from running again unless dependencies change.

This helps improve performance.

React



const memoizedValue = useMemo(() => {

  return expensiveCalculation();

}, [dependencies]);

//Why useMemo is Needed
//Every render reruns calculations inside the component.

const result = slowFunction(data);

//If the component re-renders frequently, this calculation runs again and again.

solution useMemo stores the calculated value and recalculates only when dependencies change.

import { useMemo } from "react";

function App() {

  const number = 5;

  const squared = useMemo(() => {
    return number * number;
  }, [number]);

  return <h1>{squared}</h1>;
}
  
//Real Performance Example

import { useState, useMemo } from "react";

function App() {

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

  const expensiveCalculation = (num) => {
    console.log("Calculating...");

    for (let i = 0; i < 1000000000; i++) {}

    return num * 2;
  };

  const result = useMemo(() => {
    return expensiveCalculation(count);
  }, [count]);

  return (
    <div>

      <h1>{result}</h1>

      <button onClick={() => setCount(count + 1)}>
        Count
      </button>

      <button onClick={() => setDark(!dark)}>
        Theme
      </button>

    </div>
  );
}

Advanced

31. What is reconciliation?

Reconciliation is the process React uses to update the UI efficiently when data changes.

React compares:

Old Virtual DOM
New Virtual DOM

Then updates only the changed parts in the real DOM.

Reconciliation = React’s process of finding differences and updating the UI efficiently.

Advanced

32. What are HOCs?

Higher Order Components reuse component logic.

Advanced

33. What is lazy loading?

Lazy loading means loading components or resources only when they are needed instead of loading everything at once.

This improves:

Performance
Initial page load speed
User experience

Why Lazy Loading is Important

Many pages
Heavy components
Large libraries

React

import React, { lazy, Suspense } from "react";

const About = lazy(() => import("./About"));

function App() {

  return (

    <Suspense fallback={<h1>Loading...</h1>}>

      <About />

    </Suspense>

  );
}

Advanced

34. What is Suspense?

Suspense is a React component used to handle loading states while waiting for something to load.

It is commonly used with:

React.lazy()
Data fetching
Code splitting

React

import React, { lazy, Suspense } from "react";

const About = lazy(() => import("./About"));

function App() {

  return (

    <Suspense fallback={<h1>Loading...</h1>}>

      <About />

    </Suspense>

  );
}

Why Suspense is Important

Without Suspense:

Users may see blank screens
UI may feel broken

Suspense improves user experience with loading indicators.

Advanced

35. What is Redux?

Redux is a state management library used to manage and share application state in a predictable way.It is commonly used with React for large applications.

Redux stores all shared application data in one central place called the store.

Instead of passing data through many components, any component can access the store directly.

Why Redux is Used

Authentication
Shopping carts
User data
Theme settings
Complex shared state

Redux Data Flow

Component ↓ Dispatch Action ↓ Reducer ↓ Store Updated ↓ UI Re-renders

React

import { useSelector, useDispatch } from "react-redux";

function Counter() {

  const count = useSelector(state => state.count);

  const dispatch = useDispatch();

  return (
    <div>

      <h1>{count}</h1>

      <button
        onClick={() =>
          dispatch({ type: "INCREMENT" })
        }
      >
        Increase
      </button>

    </div>
  );
}

Coding Round

41. useState example

This example creates a counter using useState.

React

import React, { useState } from "react";

function Counter() {

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

  return (
    <div>

      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>

      <button onClick={() => setCount(count - 1)}>
        Decrease
      </button>

      <button onClick={() => setCount(0)}>
        Reset
      </button>

    </div>
  );
}

export default Counter;

Coding Round

42. useEffect example

This example runs code when the component loads.

React

import React, { useEffect } from "react";

function App() {

  useEffect(() => {
    console.log("Component Mounted");
  }, []);

  return (
    <h1>Hello React</h1>
  );
}

export default App;

Coding Round

43. Map list rendering

List rendering means displaying multiple items dynamically using JavaScript’s map() method.

React commonly uses map() to render arrays as UI elements.

React

import React from "react";

function App() {

  const users = ["Akash", "Rahul", "Aman"];

  return (
    <div>

      {users.map((user, index) => (
        <h1 key={index}>
          {user}
        </h1>
      ))}

    </div>
  );
}

export default App;

Coding Round

44. Event handling

What is Event Handling in React?

Event handling means responding to user actions like:

Button clicks
Typing in inputs
Form submission
Mouse hover
Keyboard press

React

import React from "react";

function App() {

  function handleClick() {
    alert("Button Clicked");
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default App;

Coding Round

45. Controlled input

What is a Controlled Input in React?

A controlled input is an input field whose value is controlled by React state.

React becomes the single source of truth for the input value.

React

import React, { useState } from "react";

function App() {

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

  return (
    <div>

      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <h1>Hello {name}</h1>

    </div>
  );
}

export default App;

Coding Round

46. Conditional render

What is Conditional Rendering in React?

Conditional rendering means displaying different UI based on a condition.

React uses normal JavaScript conditions to decide what to show.

React

import React from "react";

function App() {

  const isLoggedIn = true;

  return (
    <div>

      {
        isLoggedIn
          ? <h1>Welcome User</h1>
          : <h1>Please Login</h1>
      }

    </div>
  );
}

export default App;

Coding Round

47. Props passing

What is Props Passing in React?

Props passing means sending data from a parent component to a child component using props.

Props are like function arguments in JavaScript.

React

import React from "react";
import User from "./User";

function App() {

  return (
    <div>

      <User name="Akash" age={25} />

    </div>
  );
}

export default App;

Coding Round

48. Fragment usage

A Fragment lets you group multiple elements without adding extra HTML elements to the DOM.

It helps avoid unnecessary "DiV" wrappers.

React

//Problem Without Fragment
//React components must return a single parent element.

function App() {

  return (
    <h1>Hello</h1>
    <p>Welcome</p>
  );
}

//Solution Using <div>

function App() {

  return (
    <div>

      <h1>Hello</h1>

      <p>Welcome</p>

    </div>
  );
}

Coding Round

49. Context usage

The Context API is used to share data between components without passing props manually through every level.It helps avoid prop drilling.

React


//App.js

import React from "react";
import UserContext from "./UserContext";
import Home from "./Home";

function App() {
  const username = "AK Singh";

  return (
    <UserContext.Provider value={username}>
      <Home />
    </UserContext.Provider>
  );
}

export default App;

//Home.js
import React from "react";
import Profile from "./Profile";

function Home() {
  return (
    <div>
      <h1>Home Component</h1>
      <Profile />
    </div>
  );
}

export default Home;

//Access Context
//Profile.js

import React, { useContext } from "react";
import UserContext from "./UserContext";

function Profile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h2>Welcome {user}</h2>
    </div>
  );
}

export default Profile;

Coding Round

50. Lazy import

React

import React from "react";
import { UserContext } from "./UserContext";
import Profile from "./Profile";

function App() {

  const user = "Akash";

  return (

    <UserContext.Provider value={user}>

      <Profile />

    </UserContext.Provider>

  );
}

export default App;

Land the job you want — prepare with Real interviews Q&A

Land the job you want — prepare
with Real interviews Q&A