Top Basic React Interview Questions and Answers for Capgemini

Introduction

Preparing for a React interview at Capgemini? React is a widely used JavaScript library for building modern web applications with reusable components. Capgemini frequently asks fundamental React questions to assess candidates’ knowledge of React concepts, state management, hooks, performance optimization, and component lifecycle.

This blog provides a comprehensive list of basic React interview questions to help freshers and experienced developers succeed in their Capgemini technical interview.

✔ Covers essential React concepts
✔ SEO-optimized for better ranking
✔ Includes practical examples
✔ Suitable for freshers and experienced developers

📌 Save this page and review these questions before your Capgemini React interview! 🚀

Top Basic React Interview Questions and Answers

1. What is React?

Answer: React is a JavaScript library developed by Facebook for building fast and scalable user interfaces using a component-based architecture.

2. What are the key features of React?

Answer:

• JSX (JavaScript XML) – Allows writing HTML within JavaScript
• Component-based architecture – Code is divided into reusable components
• Virtual DOM – Enhances performance by updating only the changed parts of the UI
• Unidirectional data flow – Ensures predictable state management
• Hooks – Allows state and lifecycle management in functional components

3. What is JSX in React?

Answer: JSX (JavaScript XML) is a syntax extension that enables writing HTML-like code inside JavaScript.

Example:

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

JSX is transpiled into JavaScript using Babel.

4. What is the difference between functional and class components?

Answer:

Example of a functional component:

function Greet() {
  return <h1>Hello, Capgemini!</h1>;
}

5. What is the Virtual DOM in React?

Answer: The Virtual DOM is a lightweight copy of the actual DOM. React updates the Virtual DOM first, compares differences using the diffing algorithm, and then updates only the changed elements in the real DOM for better performance.

6. What are React props?

Answer: Props (short for properties) allow passing data from a parent component to a child component.

Example:

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

<Welcome name="Capgemini" />  // Output: Hello, Capgemini!

Props are immutable inside the child component.

7. What is the difference between props and state?

Answer:

8. What is state in React?

Answer: State is an internal object that holds dynamic data within a component.

Example using useState:

import { useState } from "react";

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

9. What is useState in React?

Answer: useState is a React Hook that allows functional components to handle state.

Example:

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

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

Answer:

Example of a controlled component:

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

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

11. What is useEffect in React?

Answer: useEffect is a React Hook used for handling side effects like API calls, DOM manipulation, and subscriptions.

Example:

import { useEffect } from "react";

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

12. What are React fragments?

Answer: React fragments (<></>) allow grouping multiple elements without adding extra DOM nodes.

Example:

<>
  <h1>Hello</h1>
  <p>Welcome to Capgemini</p>
</>

13. What is React Router?

Answer: React Router is a library for navigation in React applications.

Example:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

14. What are higher-order components (HOCs) in React?

Answer: A higher-order component (HOC) is a function that takes a component and returns a new enhanced component.

Example:

function withLogging(WrappedComponent) {
  return function NewComponent(props) {
    console.log("Component rendered");
    return <WrappedComponent {...props} />;
  };
}

15. What is Redux in React?

Answer: Redux is a state management library that helps manage global state in React applications.

Example:

const reducer = (state, action) => {
  if (action.type === "INCREMENT") return state + 1;
  return state;
};

16. What are React portals?

Answer: Portals allow rendering elements outside the main React tree.

Example:

import ReactDOM from "react-dom";

ReactDOM.createPortal(<div>Outside DOM</div>, document.getElementById("portal-root"));

17. What is memoization in React?

Answer: Memoization is an optimization technique that caches function results to prevent unnecessary re-renders.

Example using React.memo:

const MemoizedComponent = React.memo(MyComponent);

18. What is lazy loading in React?

Answer: Lazy loading improves performance by loading components only when needed.

Example:

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

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

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>;

19. What is a key prop in React lists?

Answer: The key prop uniquely identifies elements in lists and optimizes re-renders.

Example:

{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

20. What is hydration in React?

Answer: Hydration is used in Server-Side Rendering (SSR) to attach event listeners to pre-rendered HTML.