Top 100 React Interview Questions and Answers (2026 Updated)

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React that allows developers to write HTML-like code inside JavaScript.

It makes UI code more readable and easier to understand by combining structure and logic in one place.

Behind the scenes, JSX is converted into normal JavaScript using React.createElement().

Example:

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

What is reconciliation in React?

Reconciliation is the process by which React updates the real DOM efficiently by comparing the old Virtual DOM with the new Virtual DOM.

When a component’s state or props change, React creates a new Virtual DOM tree and finds the minimum number of changes needed to update the real DOM.

• Diffing: React compares old and new Virtual DOM.
• Minimal Updates: Only changed elements are updated.
• Better Performance: Avoids unnecessary re-rendering.

In simple terms: Reconciliation is React’s smart way of keeping the UI in sync with data.

What are props?

Props (short for properties) are used to pass data from one component to another in React.

Props allow components to be dynamic and reusable by receiving different values from their parent components.

• Read-only: Props cannot be modified inside the child component.
• One-way: Data flows from parent to child.
• Reusable: Same component can behave differently with different props.

Example:

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

// Usage
<Greeting name="Manish" />
    

What are hooks?

Hooks are special functions in React that allow you to use state and other React features inside functional components.

Before hooks, these features were only available in class components. Hooks make functional components more powerful and easier to write.

• Enable state: Use state in functional components.
• Use lifecycle features: Handle side effects.
• Reuse logic: Share logic between components.
• Cleaner code: No need for classes or this keyword.

Common hooks:

• useState
• useEffect
• useContext
• useRef
• useMemo

Example:

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

What is useEffect?

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

Side effects include tasks like data fetching, subscriptions, timers, and manually updating the DOM.

• Runs after render by default.
• Replaces lifecycle methods like componentDidMount and componentDidUpdate.
• Used for external operations (API calls, events).

Syntax:

useEffect(() => {
  // side effect
}, [dependencies]);
    

Example:

useEffect(() => {
  fetchData();
}, []);
    

In simple words: useEffect runs code when something changes.

What happens if dependency array is empty?

If the dependency array in useEffect is empty ([]), the effect runs only once after the initial render.

This behavior is similar to componentDidMount in class components.

• Runs only once: Executes after the component is mounted.
• No re-run: Does not run again on state or prop changes.
• Best for: API calls, subscriptions, initial setup.

Example:

useEffect(() => {
  fetchData();
}, []);
    

In simple words: Empty dependency array means “run this effect only once”.

What is useMemo?

useMemo is a React hook used to memoize (cache) the result of an expensive calculation so that it is not recalculated on every render.

It helps improve performance by recomputing the value only when its dependencies change.

• Optimizes performance: Avoids unnecessary calculations.
• Caches result: Stores computed value.
• Recomputes only when needed: Based on dependency array.

Syntax:

const value = useMemo(() => {
  return expensiveCalculation();
}, [dependencies]);
    

Example:

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

In simple words: useMemo remembers a value so React doesn’t recompute it again and again.

What is useContext?

useContext is a React hook used to access values from React Context without passing props manually through every level.

It helps in sharing global data like theme, user information, or language settings across components.

• Avoids prop drilling: No need to pass props deeply.
• Access global state: Use shared data easily.
• Cleaner code: Reduces complexity.

Example:

const ThemeContext = React.createContext();

const theme = useContext(ThemeContext);
    

In simple words: useContext lets components read shared data directly.

Phases of lifecycle in React

The React component lifecycle is divided into three main phases that describe how a component is created, updated, and removed.

• Mounting: When the component is created and inserted into the DOM. Example methods: constructor, render, componentDidMount
• Updating: When the component re-renders due to changes in state or props. Example methods: render, componentDidUpdate
• Unmounting: When the component is removed from the DOM. Example method: componentWillUnmount

In modern React, these phases are handled using hooks like useEffect.

componentWillUnmount equivalent?

The equivalent of componentWillUnmount in hooks is the cleanup function inside useEffect.

The cleanup function runs when the component is about to be removed from the DOM.

Example:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running...");
  }, 1000);

  return () => {
    clearInterval(timer); // cleanup
  };
}, []);
    

• componentWillUnmount: Runs before component is destroyed.
• Cleanup in useEffect: Runs before component is removed.

In simple words: The return function inside useEffect replaces componentWillUnmount.

How to prevent unnecessary re-renders?

Unnecessary re-renders happen when a component updates even though its data has not meaningfully changed. React provides several ways to optimize this.

• React.memo: Prevents re-render if props are the same.
• useMemo: Memoizes expensive calculated values.
• useCallback: Memoizes function references.
• Proper state design: Keep state minimal and local.
• Avoid anonymous functions: Inside JSX when not needed.
• Key optimization: Use stable keys in lists.

Example using React.memo:

const Child = React.memo(({ value }) => {
  return <div>{value}</div>;
});
    

In simple words: Cache values and functions, and avoid updating components when data hasn’t changed.

What is key in React?

A key in React is a special attribute used to uniquely identify elements in a list.

Keys help React understand which items have changed, been added, or removed.

• Unique: Each key must be unique among siblings.
• Improves performance: Helps in efficient re-rendering.
• Avoids bugs: Prevents incorrect UI updates.

Example:

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

In simple words: Keys help React track list items efficiently.

What is React.lazy?

React.lazy is a function used to load components lazily (on demand) instead of loading them at the start.

It helps reduce the initial bundle size and improves application performance.

• Loads components only when needed.
• Used with Suspense.
• Improves page load speed.

Example:

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

<Suspense fallback={<div>Loading...</div>}>
  <Dashboard />
</Suspense>
    

In simple words: React.lazy loads components only when required.

What is Synthetic Event?

A Synthetic Event is a cross-browser wrapper around the browser’s native event system provided by React.

It ensures that events behave consistently across different browsers.

• Cross-browser compatibility: Same behavior everywhere.
• Normalized API: Works like native events.
• Better performance: Uses event pooling.

Example:

function handleClick(e) {
  console.log(e.target.value);
}
    

In simple words: Synthetic events make event handling reliable across browsers.

How to validate forms?

Form validation in React ensures that user input is correct before submitting the form.

Validation can be done using React state or built-in HTML validation.

• Client-side validation: Using state and conditions.
• HTML validation: Using required, pattern, minLength.
• Show errors: Display error messages.
• Disable submit: Until form is valid.

Example:

if (!email.includes("@")) {
  setError("Invalid email");
}
    

In simple words: Validation checks user input before submission.