I Parsed My Friend’s Capgemini Frontend Interview Notes. Here is the Complete Breakdown

A good friend of mine recently went through the grinder for a Mid-to-Senior Frontend Developer (React.js) role at Capgemini. After he cleared the rounds, we sat down over the weekend to dump his notes into something structured.

If you’ve got an enterprise-level interview coming up, skip the basic “how to write a component” guides. Big service and product firms are heavily filtering candidates based on deep core JavaScript, strict type safety, real-world security practices, and scalable frontend system design.

Here is the exact list of questions they threw at him, along with a rough guide on the core engineering angles you need to hit to clear the bar.

Section 1: The React.js Ecosystem

1. Explain the difference between controlled and uncontrolled components in React.

• The Core Concept: Where does the “source of truth” for the form data live?

Talking Points:

• Controlled: State is handled completely by React. The input value is bound to a useState hook, and changes run through onChange. Gives you absolute control for real-time validation but causes a re-render on every single keystroke.
• Uncontrolled: State is handled natively by the DOM itself. You pull the values when you need them using a useRef hook. Highly performant for massive forms where you don't need real-time validation.

2. How does the useEffect dependency array work, and what are common mistakes developers make?

• The Core Concept: Managing side-effect synchronization and memory tracking.

Talking Points:

• The Mechanism: React does a shallow comparison (Object.is) on the values in the array between renders to decide if it should re-run the effect.
• Common Pitfalls: Passing object/array literals directly into dependencies (causing infinite re-render loops due to new reference memory allocation on every render), forgetting to return a cleanup function (leaving active WebSockets, intervals, or event listeners dangling), and lying to the array by hiding variables used inside the effect.

3. What is the difference between SSR, CSR, and SSG?

• The Core Concept: Choosing where and when HTML is generated for the user.

Talking Points:

• Client-Side Rendering (CSR): Browser downloads a blank HTML shell and a massive JS bundle, then builds the DOM. Fast subsequent page transitions, but bad initial load time (TTI) and terrible SEO.
• Server-Side Rendering (SSR): Server generates raw HTML on every single request. Great for dynamic content that updates constantly and needs solid SEO, but adds server compute overhead.
• Static Site Generation (SSG): HTML is pre-built once during the build phase. Incredibly fast delivery via CDNs, ideal for blogs or documentation, but requires a full rebuild if data changes.

🧠 Section 2: Deep Core JavaScript

4. Explain closures in JavaScript with a real-world example.

• The Core Concept: Preserving access to an outer lexical scope.

Talking Points:

• Frame it practically. When a function is declared inside another function, it retains access to the outer function’s variables even after the outer function has finished executing.
• Real-world example: A stateful counter utility or a private configuration factory where you expose a method to read/increment a variable but hide the variable itself from the global scope.

5. What is the difference between null, undefined, and NaN?

• The Core Concept: Differentiating types of missing or invalid data states.

Talking Points:

• undefined: A variable has been declared but hasn't been assigned a value yet (default JS behavior).
• null: An intentional assignment indicating the explicit absence of any object value.
• NaN (Not a Number): The result of an invalid mathematical operation (e.g., trying to parse "hello" as an integer). Interestingly, its type is still technically number.

6. How do bind(), call(), and apply() differ?

• The Core Concept: Explicitly setting the this context of a function.

Talking Points:

• call(): Invokes the function immediately, accepting arguments separated by commas.
• apply(): Invokes the function immediately, accepting arguments as a single array.
• bind(): Does not execute immediately. It returns a brand-new function with the fixed this context bound permanently, ready to be called later.

7. What is debouncing and throttling? Where have you used them in production?

• The Core Concept: Limiting execution rates for high-frequency events.

Talking Points:

• Debouncing: Delays execution until a period of inactivity passes. Production use: A typeahead search bar to prevent hitting the backend API on every single character change.
• Throttling: Limits execution to a maximum of once every fixed time window. Production use: Window resizing or scroll events to update UI elements smoothly without stuttering.

8. Explain shallow copy vs. deep copy in JavaScript.

• The Core Concept: Reference copying vs. structural cloning.

Talking Points:

• Shallow: Copies top-level values, but nested objects or arrays keep their original references (e.g., using ...spread or Object.assign). Modifying a nested value in the copy alters the original.
• Deep: Recursively clones the entire tree structure into new memory locations. Traditionally done via JSON.parse(JSON.stringify(obj)) (which breaks on dates, regex, and functions), or modern native structuredClone().

⚙️ Section 3: Architecture, TypeScript & State Management

9. How does Redux Toolkit (RTK) simplify state management compared to traditional Redux?

• The Core Concept: Drastically lowering boilerplate and improving out-of-the-box defaults.

Talking Points: Explain that RTK eliminates writing repetitive action types, action creators, and manual store configurations. Natively includes configureStore (which sets up Thunk and DevTools automatically) and createSlice, which uses Immer under the hood—allowing developers to write clean "mutating" syntax that actually translates to safe immutable state updates.

10. Difference between type and interface in TypeScript. When do you choose?

• The Core Concept: Defining object shapes vs. complex type compositions.

Talking Points:

• Use interfaces for defining object structures, especially if you expect them to be extended. Interfaces support “declaration merging” (defining the same interface twice merges their properties).
• Use types for unions (string | number), intersections, primitives, or tuples.
• Rule of thumb: Default to interface for public APIs and structural layouts; use type for complex data mappings.

11. Explain TypeScript utility types like Pick, Omit, Exclude, and Record.

• The Core Concept: Transforming existing types dynamically to avoid duplicate code.

Talking Points:

• Pick<T, K>: Extracts a specific set of keys from an existing type.
• Omit<T, K>: Removes specific keys from an existing type.
• Exclude<T, U>: Excludes types from a union that are assignable to another union.
• Record<K, T>: Creates an object type where keys are of type K and values are of type T (great for strict map dictionaries).

12. How would you build a reusable and scalable component library for a large enterprise application?

• The Core Concept: Decoupling logic from design to maximize composability.
• Talking Points: Focus on atomic design principles. Build primitive headless foundation components (using tools like Radix UI or Aria primitives for accessibility out of the box), implement a strict theme configuration layer (via Tailwind tokens or CSS variables), write thorough documentation using Storybook, and structure it as a monorepo via Turborepo or npm/pnpm workspaces for independent package publishing.

13. How do you secure frontend applications using JWT authentication and refresh tokens?

• The Core Concept: Mitigating XSS token theft while managing seamless session updates.
• Talking Points: Never store access tokens in localStorage (highly vulnerable to XSS). Keep the short-lived access token strictly in in-memory JavaScript state. Keep the long-lived refresh token in an HttpOnly, Secure, SameSite=Strict cookie so client-side JavaScript cannot touch it. Use an Axios/Fetch interceptor to intercept 401 Unauthorized responses, silently call the refresh endpoint to obtain a new access token, and re-try the failed request seamlessly.

14. What techniques would you use to improve Core Web Vitals and reduce bundle size in a React application?

• The Core Concept: Optimizing for LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift).
• Talking Points: Code-splitting routes using React.lazy and Suspense to shrink the initial bundle size, optimizing images (using WebP, sizing layout spaces explicitly to prevent layout shifts), stripping heavy dependencies out via tree-shaking, tracking size via webpack-bundle-analyzer, and prioritizing critical asset loading.

🏗️ The System Design Challenge: Enterprise Dashboard Architecture

The round wrapped up with a comprehensive architectural whiteboard scenario: How do you build a massive dashboard application used by multiple enterprise clients, each having distinct roles and permissions?

Instead of jumping into code, my friend broke down the problem into these systematic components:

+-----------------------------------------------------------------------------+
|                          Enterprise Core Shell                              |
|   +--------------------------+  +---------------------------------------+   |
|   |  Auth & RBAC Context     |  |   API Abstraction Layer (Axios)       |   |
|   +--------------------------+  +---------------------------------------+   |
+-----------------------------------------------------------------------------+
                                     |
                                     v
+-----------------------------------------------------------------------------+
|                      TanStack Query Caching Architecture                    |
|   [Tenant Stale Time Configurations] <-> [Central Cache Invalidation Sync]  |
+-----------------------------------------------------------------------------+
                                     |
                                     v
+-----------------------------------------------------------------------------+
|                        Dynamic UI Orchestration Block                       |
|   +---------------------------------------------------------------------+   |
|   |  Lazy-Loaded Route Modules (Dynamic Imports via Suspense)           |   |
|   +---------------------------------------------------------------------+   |
|   |  Permission Guard Wrapper Component (<HasPermission role="Admin">)  |   |
|   +---------------------------------------------------------------------+   |
+-----------------------------------------------------------------------------+
                                     |
                                     v
+-----------------------------------------------------------------------------+
|                        System Resiliency & Observability                    |
|   [Global React Error Boundary]  -->  [Telemetry Logging Agent (Sentry)]    |
+-----------------------------------------------------------------------------+

• Role-Based Access Control (RBAC): Don’t just hide links in the navbar. Implement strict declarative wrappers (e.g., <HasPermission role="Admin">) around components and set up centralized route guards that intercept unauthorized paths at the router level.
• Data Fetching & Cache Strategy: Leverage TanStack Query (React Query). Configure explicit staleTime and cacheTime values specific to each client tenant. This ensures high-frequency analytics dashboards reuse cached data instead of hammering backend APIs on every tab change, while providing explicit cache invalidation logic for mutations.
• Resiliency & Observability: Wrap decoupled feature blocks in local React Error Boundaries so a single crashing widget doesn’t tear down the entire dashboard shell. Pipe telemetry, slow render timings, and raw UI errors directly to a logging service (like Sentry or LogRocket) for live performance profiling.

The Takeaway

The biggest signal Capgemini looked for throughout the evaluation was a clear transition away from theoretical definitions toward system-level tradeoffs. They wanted to know why you chose one approach over another and how those choices impact long-term production maintenance.