MERN Stack Interview Questions

1. MongoDB Fundamentals

What is MongoDB and its key features?

MongoDB is a NoSQL document database that stores data in flexible JSON-like documents. Key features include schema flexibility, horizontal scalability, rich query language, indexing support, aggregation framework, and replication for high availability.

Explain BSON vs JSON

BSON (Binary JSON) is MongoDB’s binary-encoded format. It extends JSON with additional data types like Date, Binary, ObjectId, and provides more efficient encoding/decoding and traversal.

What are collections and documents?

Collections are groups of MongoDB documents, similar to tables in relational databases. Documents are records in BSON format, consisting of field-value pairs with flexible schemas.

Explain CRUD operations

Create: insertOne(), insertMany(). Read: find(), findOne(). Update: updateOne(), updateMany(), replaceOne(). Delete: deleteOne(), deleteMany(). These operations form the foundation of MongoDB interactions.

What is the _id field?

The _id field is the primary key in MongoDB documents, automatically generated as ObjectId if not provided. It’s unique within a collection and indexed by default for fast lookups.

2. MongoDB Advanced Concepts

What is indexing?

Indexing creates data structures for faster queries. Types include single field, compound, multikey, text, and geospatial indexes. Indexes improve query performance but increase write overhead and storage.

Explain aggregation framework

Aggregation processes data through a pipeline of stages like $match, $group, $project, $sort, $lookup. It enables complex data transformations and analytics directly in the database.

What is sharding?

Sharding distributes data across multiple servers for horizontal scaling. It enables handling large datasets by partitioning data based on a shard key across multiple shards.

Explain replica sets

Replica sets are groups of MongoDB instances maintaining the same data for high availability. They include one primary (writes) and multiple secondaries (replication) with automatic failover.

What are embedded vs referenced relationships?

Embedded: related data within the same document (denormalized). Referenced: separate documents linked by IDs (normalized). Choice depends on access patterns and data size.

3. Express.js Basics and Middleware

What is Express.js?

Express.js is a minimal, flexible Node.js web framework providing robust features for web and mobile applications with a thin layer over Node.js’s http module.

Explain middleware

Middleware functions have access to req, res, and next. They execute code, modify req/res, end cycles, or call next(). Types include application-level, router-level, error-handling, and third-party.

How does routing work?

Routing defines how applications respond to client requests at specific endpoints (URIs) and HTTP methods. Express provides app.METHOD(PATH, HANDLER) syntax for route definition.

What are route parameters?

Route parameters capture values from URL segments (/users/:id) accessible via req.params. Query strings (?key=value) are accessed via req.query for optional parameters.

How to handle POST requests?

Use express.json() and express.urlencoded() middleware to parse request bodies. Access parsed data via req.body in route handlers.

What is Express.js and why is it used?

Express.js is a minimal and flexible Node.js web framework that simplifies handling HTTP requests, routing, and middleware integration. It acts as a wrapper around Node’s HTTP module, providing a clean abstraction to build REST APIs and web applications.

Example:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello from Express!');
});

app.listen(3000, () => console.log('Server running on port 3000'));

Why:

Because Node’s native HTTP module is low-level. Express provides convenient abstractions like routing, middleware, and request parsing.

When:

Use it when building REST APIs, microservices, or web apps that require request handling.

Where:

It’s the most common framework in production Node.js environments.

Explain the middleware concept in Express.js

Middleware functions are functions that execute during the request-response cycle. They have access to req, res, and next() — used to modify requests, handle authentication, validation, logging, etc.

Example:

function logger(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  next(); // Pass control to next middleware
}

app.use(logger);
app.get('/', (req, res) => res.send('Home'));

Why:

Middleware provides a way to modularize logic — logging, authentication, validation — without polluting route handlers.

When:

Use middleware whenever you want to perform an action before reaching your route (or after response, like error logging).

Where:

Common examples:

express.json() for parsing JSON
cors() for handling cross-origin requests
Custom middleware for auth/validation

What types of middleware exist in Express.js?

Type	Description	Example
Application-level	Bound to app	`app.use()`
Router-level	Bound to an Express router	`router.use()`
Built-in	Provided by Express	`express.json()`, `express.static()`
Third-party	Installed via npm	`cors`, `helmet`, `morgan`
Error-handling	4 parameters (err, req, res, next)	Custom error middleware

Example:

// Error-handling middleware
app.use((err, req, res, next) => {
  console.error(err.message);
  res.status(500).send('Internal Server Error');
});

Why:

To create reusable, layered logic pipelines.

When:

Whenever you need pre/post-processing around route handlers.

Where:

Throughout the Express lifecycle (before/after routes).

What is the role of next() in middleware?

next() passes control to the next middleware in the stack. If not called, the request hangs (no response sent).

Example:

app.use((req, res, next) => {
  console.log('Before route');
  next(); // Pass to next middleware or route
});

app.get('/', (req, res) => {
  res.send('After middleware');
});

Why:

To chain multiple middlewares for modular logic.

When:

When you need layered control (logging → validation → controller).

Where:

Always in custom middleware unless it ends the request.

What's the difference between app.use() and app.get()?

Function	Purpose
app.use()	Registers middleware (runs for all methods unless filtered by path)
app.get()	Defines a route handler specifically for GET requests

Example:

app.use('/users', (req, res, next) => {
  console.log('Middleware for /users');
  next();
});

app.get('/users', (req, res) => res.send('User list'));

Why:

use() is for pre-processing, get() is for request handling.

When:

Use use() for shared logic like authentication.

Where:

Across all routes or specific prefixes.

How does Express handle the request-response lifecycle?

Request enters Express
Passes through middleware stack
If matched, route handler executes
If no match → 404 handler
If error → error-handling middleware

Example Flow:

Incoming Request
   ↓
app.use(logger)
   ↓
app.use(auth)
   ↓
app.get('/users', controller)
   ↓
app.use(errorHandler)
   ↓
Response Sent

Why:

Understanding this helps you debug request flow and performance.

When:

When analyzing middleware order or debugging missed routes.

Where:

In Express core — it’s what powers routing and middleware sequencing.

How do you handle errors globally in Express.js?

By using a custom error-handling middleware — identified by 4 parameters (err, req, res, next).

Example:

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ message: err.message });
});

// And to trigger it:
app.get('/', (req, res, next) => {
  next(new Error('Something went wrong'));
});

Why:

Centralized error handling avoids repeating try/catch everywhere.

When:

In production APIs, always define a global error middleware.

Where:

Place at the bottom of middleware stack (after routes).

What's the difference between res.send(), res.json(), and res.end()?

Method	Purpose
res.send()	Sends response (auto-detects type)
res.json()	Sends JSON response (sets content-type)
res.end()	Ends response without data

Example:

res.send('Hello');
res.json({ success: true });
res.end(); // No data, just closes connection

Why:

Each method suits different scenarios (raw text vs structured data).

When:

Use:

send() → text or HTML
json() → APIs
end() → streams or empty responses

Where:

Controllers or route handlers.

How can you secure your Express app?

Key practices:

Use Helmet → sets HTTP headers
Use Rate-limiter → prevent brute-force
Use CORS properly
Use express.json({ limit }) → prevent payload overflows
Disable x-powered-by header
Validate all inputs (with Joi/Zod)

Example:

const helmet = require('helmet');
const rateLimit = require('express-rate-limit');

app.use(helmet());
app.use(rateLimit({ windowMs: 60 * 1000, max: 100 }));
app.disable('x-powered-by');

Why:

Express is not secure by default; hardening prevents XSS, CSRF, and DoS attacks.

When:

Always in production environments.

Where:

At app initialization or middleware level.

How can you handle async errors in Express route handlers?

Async functions throw errors inside Promises, so you must use:

Try/catch inside route, or
Wrap with async error handler.

Example:

// Approach 1: try/catch
app.get('/', async (req, res, next) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (err) {
    next(err);
  }
});

// Approach 2: wrapper function
const asyncHandler = fn => (req, res, next) =>
  Promise.resolve(fn(req, res, next)).catch(next);

Why:

Express doesn’t automatically catch async errors without .catch().

When:

Always for async routes (DB calls, APIs).

Where:

Use asyncHandler pattern across all async routes.

How does Express handle routing internally?

Express maintains a router stack for every HTTP method and path. When a request comes in, it iterates through this stack and executes the first matching route or middleware.

Example:

app.get('/users', handler1);
app.use('/users', handler2);

The router internally uses the path-to-regexp library to match routes efficiently.

Why:

To provide performant routing and predictable middleware flow.

When:

When debugging routing conflicts or order issues.

Where:

Inside express/lib/router/layer.js and route.js source.

What are route parameters and how do you access them?

Route parameters are dynamic values in URL paths, accessible via req.params.

Example:

app.get('/users/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

Why:

Used to identify specific resources (user by ID, post by slug).

When:

For REST endpoints like /users/:id, /posts/:slug.

Where:

Inside route handlers.

4. Express.js Authentication & Authorization

What is the difference between authentication and authorization?

Authentication → verifying identity (e.g., login with email/password or Google OAuth)
Authorization → verifying permissions (e.g., only admin can delete a user)

Example:

// Example route using both
app.get('/admin', authenticateUser, authorizeRole('admin'), (req, res) => {
  res.send('Welcome Admin!');
});

Why:

Separating these concerns improves scalability and security.

When:

Always implement authenticate first, then apply authorize on protected routes.

Where:

Middleware layer is the best place — reusable across routes.

How do you implement JWT authentication in Node.js?

JWT (JSON Web Token) is a stateless authentication mechanism — no need to store sessions in the database.

Steps:

User logs in with credentials
Server verifies credentials and issues a signed JWT using jsonwebtoken
Client stores JWT (usually in localStorage or cookie)
Client sends JWT in Authorization: Bearer <token> header for protected routes

Example:

import jwt from 'jsonwebtoken';

// Generate Token
const token = jwt.sign({ userId: user.id, role: user.role }, process.env.JWT_SECRET, {
  expiresIn: '1h',
});

// Middleware for verification
function verifyToken(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({ error: 'No token provided' });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    res.status(403).json({ error: 'Invalid token' });
  }
}

Why:

JWT avoids database lookups on every request (unlike sessions).

When:

Use JWT for REST APIs and microservices.

Where:

Ideal for stateless systems or distributed apps (like mobile + web).

When would you prefer sessions over JWT?

Use sessions when:

The app is monolithic and server-rendered (like an Express + EJS app)
You need easy session invalidation (e.g., logout all sessions)
You store user-specific state in the backend

import session from 'express-session';

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false },
}));

Why:

Sessions allow you to track user data server-side and revoke tokens instantly.

When:

In traditional web apps or dashboards.

Where:

Stored in Redis for scalability.

How do you protect routes and implement Role-Based Access Control (RBAC)?

RBAC ensures only specific roles can perform actions.

Example:

function authorizeRole(...roles) {
  return (req, res, next) => {
    if (!roles.includes(req.user.role)) {
      return res.status(403).json({ error: 'Access denied' });
    }
    next();
  };
}

// Usage
app.delete('/users/:id', verifyToken, authorizeRole('admin'), deleteUser);

Why:

Prevents unauthorized operations from lower-privileged users.

When:

In systems with hierarchical roles (admin, manager, user).

Where:

Middleware layer.

What is the difference between RBAC and ABAC?

Concept	RBAC	ABAC
Full form	Role-Based Access Control	Attribute-Based Access Control
Based on	User role	User + Resource attributes
Flexibility	Static	Dynamic (context-aware)

Example (ABAC):

// Only allow if user owns the resource
if (req.user.id !== post.authorId) {
  return res.status(403).json({ error: 'Not allowed' });
}

Why:

ABAC allows more granular control.

When:

Use ABAC in enterprise apps needing dynamic policies (like file sharing).

Where:

Applied at business logic level.

How do you securely store passwords in Node.js?

Never store plain text passwords — always hash and salt them.

Example using bcrypt:

import bcrypt from 'bcrypt';

const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(password, salt);

Why:

Hashing protects passwords even if the database is compromised.

When:

During user registration or password change.

Where:

Inside your user service layer before saving to DB.

How would you implement refresh tokens with JWT?

Access tokens expire quickly (e.g., 15m). Refresh tokens generate new access tokens securely.

Example:

// Generate both
const accessToken = jwt.sign({ userId }, JWT_SECRET, { expiresIn: '15m' });
const refreshToken = jwt.sign({ userId }, REFRESH_SECRET, { expiresIn: '7d' });

// Refresh endpoint
app.post('/refresh', (req, res) => {
  const { token } = req.body;
  const user = jwt.verify(token, REFRESH_SECRET);
  const newAccessToken = jwt.sign({ userId: user.id }, JWT_SECRET, { expiresIn: '15m' });
  res.json({ accessToken: newAccessToken });
});

Why:

Improves security while maintaining usability.

When:

For long-lived sessions (like mobile apps).

Where:

Store refresh tokens in DB or secure cookies.

How do you handle token revocation (logout) in JWT-based systems?

Since JWTs are stateless, you can’t just “delete” them.

Common strategies:

Blacklist tokens in Redis
Rotate refresh tokens (invalidate old ones)
Use short expiry times for access tokens

Example:

// Blacklist token on logout
redisClient.setex(token, expiryTime, 'blacklisted');

Why:

Prevents reuse of stolen tokens.

When:

During logout or detected suspicious activity.

Where:

Store in Redis for quick lookup.

What are common security vulnerabilities in authentication systems?

JWT token leakage — store tokens securely
No HTTPS — exposes credentials
Brute force attacks — use rate limiting
Insecure password reset links — use short-lived tokens

Example mitigation:

import rateLimit from 'express-rate-limit';
app.use('/auth/login', rateLimit({ windowMs: 15 * 60 * 1000, max: 5 }));

Why:

Authentication is a top security target.

When:

Apply protections globally.

Where:

Security middleware layer.

How would you integrate social logins like Google or Facebook?

Use OAuth 2.0 and libraries like passport.js.

Example:

import passport from 'passport';
import { Strategy as GoogleStrategy } from 'passport-google-oauth20';

passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_ID,
  clientSecret: process.env.GOOGLE_SECRET,
  callbackURL: '/auth/google/callback',
}, (accessToken, refreshToken, profile, done) => {
  done(null, profile);
}));

Why:

Simplifies user onboarding.

When:

In consumer apps (like e-commerce or SaaS).

Where:

Handled by auth microservice or route handler.

5. React Fundamentals & Core Concepts

Beginner Level - React Fundamentals

What is React?

React is a JavaScript library for building user interfaces with component-based architecture, virtual DOM, one-way data flow, and JSX syntax.

Explain JSX

JSX is syntax extension allowing HTML-like code in JavaScript. It transpiles to React.createElement() calls, providing intuitive UI description with JavaScript expressions.

What are components?

Components are independent, reusable UI pieces. Functional components are preferred: const MyComponent = (props) => {props.text}. They accept props and return React elements.

What are props?

Props are read-only inputs passed from parent to child components. They enable data flow and component communication: <Component prop="value" />.

What is state?

State stores component’s dynamic data. Use useState hook: const [count, setCount] = useState(0). State updates trigger re-renders. Never mutate state directly.

What is the difference between render and re-render in React?

Render is when React executes your component function and creates the Virtual DOM tree. Re-render happens when React needs to update the component due to state or props changes.

Initial Render (Mount Phase):

When a component is first added to the UI:

React calls your component function (App(), Button(), etc.)
Returns JSX (or React.createElement)
React builds a virtual DOM tree
It renders to the real DOM
Triggers effects like useEffect(() => {}, [])

Re-render (Update Phase):

A re-render happens when:

useState change: setCount(1)
useReducer dispatch: dispatch({ type: 'ADD' })
Props from parent change
Context value update

What happens during re-render:

React re-invokes the component function
Gets new JSX
Builds a new virtual DOM
Diffs it with the previous one (using a diffing algorithm)
Updates only the changed elements in the real DOM — improving performance

That’s called reconciliation.

Understanding render vs re-render is crucial for optimizing React applications and debugging performance issues.

How does useState work under the hood?

When you call useState, React:

Creates an internal memory slot (in the Fiber node)
Stores the initialValue there
Returns two things:
- The current value from memory
- A setState function that schedules a re-render

React Internally Stores Hooks Like an Array:

function Component() {
  const [a] = useState(1); // hooks[0]
  const [b] = useState(2);  // hooks[1]
}

Internally it tracks like: hooks = [1, 2]

That’s why you can’t call hooks inside if/else or loops — React must know the order of hooks each render.

Does setState replace or merge the value in useState?

useState replaces the value entirely, unlike class components (this.setState) which merge.

Example:

const [user, setUser] = useState({ name: 'John', age: 25 });
setUser({ name: 'Doe' }); // ❌ age is gone!

To preserve previous values:

setUser(prev => ({ ...prev, name: 'Doe' })); // ✅ preserves age

Always use the functional update form when updating based on previous state.

Is setState synchronous or asynchronous?

setState is asynchronous. React schedules the state update, and the new state is applied on the next render.

Example:

setCount(1);
console.log(count); // ❌ still shows previous value

To get the latest value:

setCount(prev => {
  console.log(prev); // ✅ logs updated value
  return prev + 1;
});

Use useEffect or the functional update form to work with the latest state value.

What are common pitfalls when using useState?

Mistake	Why it breaks
Calling `useState` conditionally	Breaks hook ordering
Not copying old state in object/array updates	You’ll lose previous data
Setting state and expecting it to update instantly	Updates are asynchronous and batched

Example of state update pitfall:

// ❌ Wrong - loses previous state
const [user, setUser] = useState({ name: 'John', age: 25 });
setUser({ name: 'Doe' });

// ✅ Correct - preserves previous state
setUser(prev => ({ ...prev, name: 'Doe' }));

What are real-world use cases for useState?

Common use cases include:

Form inputs: useState("")
Toggling modal open/close: useState(false)
Page tabs: useState("home")
Simple UI flags (loading, error): useState(false)

Example:

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  return (
    <form>
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <input 
        type="password"
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <button disabled={isLoading}>
        {isLoading ? "Loading..." : "Login"}
      </button>
    </form>
  );
}

What is useEffect and when does it run?

useEffect is a side effect hook that allows your code to run after the component renders.A side effect in React is anything that:

Reaches outside the component (e.g., fetch, timer, localStorage)
Doesn’t directly involve rendering JSX

Basic Syntax:

useEffect(() => {
  // side effect here (e.g., API call, event listener)
  return () => {
    // cleanup (optional)
  };
}, [dependencies]);

Breakdown by Dependency Array:

1. No array = Run on every render:

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

2. Empty array = Run once (like componentDidMount):

useEffect(() => {
  console.log("Runs once after mount");
}, []);

3. With dependencies = Run when values change:

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

How does useEffect cleanup function work?

The cleanup function is your replacement for componentWillUnmount. It runs:

Before running the effect again (on updates)
When the component unmounts

Example:

useEffect(() => {
  const timer = setInterval(() => console.log('Tick'), 1000);
  
  return () => {
    clearInterval(timer); // Cleanup on unmount or re-run
  };
}, []);

Real Example - Logging Scroll Position:

function Logger() {
  useEffect(() => {
    const logScroll = () => console.log(window.scrollY);
    window.addEventListener('scroll', logScroll);

    // Cleanup
    return () => {
      window.removeEventListener('scroll', logScroll);
    };
  }, []); // empty array = run once
}

Always clean up subscriptions, timers, and event listeners to prevent memory leaks.

How does useEffect map to class component lifecycle methods?

Lifecycle	useEffect Equivalent
componentDidMount	`useEffect(() => {...}, [])`
componentDidUpdate	`useEffect(() => {...}, [dep])`
componentWillUnmount	Cleanup function inside useEffect

Example:

// Class Component
class Example extends React.Component {
  componentDidMount() {
    console.log("Mounted");
  }
  componentDidUpdate(prevProps) {
    if (prevProps.user !== this.props.user) {
      console.log("User changed");
    }
  }
  componentWillUnmount() {
    console.log("Unmounting");
  }
}

// Functional Component with useEffect
function Example({ user }) {
  useEffect(() => {
    console.log("Mounted");
    return () => console.log("Unmounting");
  }, []);

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

Why does useEffect run after the component renders?

useEffect runs after the component renders because:

React first renders the component to the DOM
Then it runs side effects (like API calls, subscriptions)
This ensures the UI is visible immediately, and side effects don’t block rendering

If you need to run code before the browser paints, use useLayoutEffect instead.

What happens if you don't provide a key in a list?

Without a unique key, React cannot properly identify which items changed, were added, or removed — leading to:

Unnecessary re-renders
Incorrect UI updates

Code Example:

function ListExample({ items }) {
  return (
    <ul>
      {items.map((item) => (
        // Always provide a unique key!
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Bad Example (causes re-render issues):

<li key={index}>{item.name}</li>

If the list order changes, items may be mismatched when using index as key.

How does state lifting work and why is it needed?

When multiple child components need to share or sync state, the state is “lifted up” to their common parent. This makes one source of truth for shared data.

Code Example:

function Parent() {
  const [value, setValue] = useState("");

  return (
    <>
      <ChildInput value={value} setValue={setValue} />
      <DisplayValue value={value} />
    </>
  );
}

function ChildInput({ value, setValue }) {
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

function DisplayValue({ value }) {
  return <p>You typed: {value}</p>;
}

Why it’s important:

Prevents inconsistent state across components.

Explain the difference between props drilling and context API. When would you use each?

Props Drilling: Passing props manually through multiple nested components
Context API: Allows data to be shared globally without passing props at every level

Props Drilling Example:

function GrandParent() {
  const theme = "dark";
  return <Parent theme={theme} />;
}

function Parent({ theme }) {
  return <Child theme={theme} />;
}

function Child({ theme }) {
  return <p>Theme is {theme}</p>;
}

Context API Example:

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function GrandParent() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <p>Theme is {theme}</p>;
}

When to use Context:

When data (like theme, user, locale) is needed globally or deeply nested.

Explain the Virtual DOM and how React uses it to optimize rendering

The Virtual DOM (VDOM) is a lightweight copy of the real DOM that React keeps in memory. When a component’s state or props change:

React creates a new virtual DOM tree
It diffs it with the previous one (using a diffing algorithm)
It updates only the changed elements in the real DOM — improving performance

Code Example:

import React, { useState } from "react";

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

  // React updates only the <p> element, not the entire DOM
  return (
    <div>
      <h1>Virtual DOM Example</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Why it matters:

Directly updating the DOM is expensive. The Virtual DOM allows React to minimize those updates efficiently.

Difference between Controlled and Uncontrolled Components

Controlled Component: React controls the input’s value using state
Uncontrolled Component: The DOM handles the input’s value directly via ref

Code Example (Controlled):

import { useState } from "react";

function ControlledInput() {
  const [value, setValue] = useState("");

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Controlled"
    />
  );
}

Code Example (Uncontrolled):

import { useRef } from "react";

function UncontrolledInput() {
  const inputRef = useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} placeholder="Uncontrolled" />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

Controlled is best for validation or dynamic UI; uncontrolled can be used for performance or simple forms.

What are React Hooks? Can you explain how useEffect works with dependencies?

Hooks are special functions that let you use React features (state, lifecycle, context, etc.) in function components.

useEffect allows you to perform side effects (like data fetching, DOM updates, event listeners)
The dependency array controls when the effect runs

Code Example:

import { useEffect, useState } from "react";

function FetchUser() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users/1")
      .then((res) => res.json())
      .then(setUser);
  }, []); // runs once after component mounts

  return <p>{user ? user.name : "Loading..."}</p>;
}

Behavior based on dependencies:

[] → runs once (on mount)
[var] → runs when var changes
no array → runs on every render

What are custom hooks and when do you create one?

Custom Hooks allow you to reuse logic between components. You create one when multiple components share the same logic (e.g., fetching, resizing, authentication).

Code Example:

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(setData);
  }, [url]);

  return data;
}

// Usage
function User() {
  const user = useFetch("https://jsonplaceholder.typicode.com/users/1");
  return <p>{user ? user.name : "Loading..."}</p>;
}

When to use:

When you want to abstract and share reusable React logic without duplicating code.

Intermediate Level - Advanced Hooks & Optimization

What is automatic batching in React 18?

In React 18, automatic batching means that all state updates—no matter where they happen (events, timeouts, async functions)—are grouped into a single re-render.

Difference from Earlier Versions:

React 17 and earlier: Only updates in React event handlers were batched
React 18: All updates are batched automatically, even in async code

Example:

function DataFetcher() {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    setIsLoading(true);        // Update 1
    const result = await fetch('/api/data');
    const json = await result.json();
    setData(json);             // Update 2
    setIsLoading(false);       // Update 3
  };
}

What Happens in React 18:

All 3 updates (setIsLoading(true), setData(), and setIsLoading(false)) are batched together, and the component re-renders only once.

This reduces unnecessary re-renders and makes your app faster, especially when fetching data from APIs or using setTimeout/Promises.

What is event handler batching in React?

Event handler batching means React groups multiple state updates made inside the same event handler (like a button click or input change) into a single re-render.

✅ This helps avoid multiple re-renders for each individual state update
✅ It’s built-in and works in both class and functional components
✅ This behavior has existed in React even before version 18

Real-Life Example:

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

  const handleSubmit = () => {
    setName('John Doe');           // 1st update
    setEmail('[email protected]');  // 2nd update
    // React batches these - only one re-render!
  };

  return (
    <div>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

When handleSubmit runs, React batches the two state updates, and the component re-renders only once, not twice. This makes the UI faster and avoids flicker or lag.

What is flushSync() and when should you use it?

flushSync() is a special React method that tells React to apply state updates immediately—not later, not in the next render cycle, but right now.Normally, React waits and batches updates to make rendering more efficient. But sometimes, you need the UI to update right away—synchronously.

Example:

import { useState } from 'react';
import { flushSync } from 'react-dom';

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

  const handleIncrement = () => {
    flushSync(() => {
      setCount(count + 1); // force this update to be applied right away
    });
    console.log('Count after flushSync:', count); // logs updated count
  };

  return <button onClick={handleIncrement}>Increment</button>;
}

When to Use:

Testing: When writing tests, you want to ensure all updates are done before checking the result
Real-time UI: In collaborative editors or games where instant feedback is critical
Third-party libraries: When working with libraries that depend on real-time DOM updates

Use it sparingly—React delays updates on purpose to improve performance. Only force sync updates when truly needed.

How do React.memo, useMemo, and useCallback help optimize re-renders?

These help optimize unnecessary re-renders by caching:

React.memo → skips re-rendering if props haven’t changed
useMemo → skips recalculating expensive values
useCallback → skips recreating identical function references

These do not prevent re-renders — they help avoid unnecessary re-renders.

Example with React.memo:

const Child = React.memo(({ name }) => {
  console.log("Child rendered");
  return <p>{name}</p>;
});

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>Count: {count}</p>
      <Child name="John" /> {/* Won't re-render when count changes */}
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </>
  );
}

Example with useMemo:

function ExpensiveComponent({ items }) {
  const expensiveValue = useMemo(() => {
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);

  return <div>Total: {expensiveValue}</div>;
}

Example with useCallback:

const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return <Child onClick={increment} />;
}

What happens during a re-render with useEffect cleanup?

During a re-render with useEffect:

React re-executes the component function
Compares old + new Virtual DOM
Decides what to update in the real DOM (reconciliation)
Cleanup function runs (if dependencies changed or component unmounts)
New effect runs after the updated DOM is committed

Real Example:

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

  useEffect(() => {
    console.log("Effect runs");
    return () => {
      console.log("Cleanup runs");
    };
  }, [count]);

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

On First Render:

count is 0
Renders JSX
Prints: “Effect runs”

Click Button → Re-render:

setCount(1) triggers re-render
JSX re-evaluated
Cleanup prints: “Cleanup runs”
Then new effect prints: “Effect runs”

How do you handle component re-renders and optimize performance?

Use memoization and avoid unnecessary renders:

React.memo() → prevents re-render if props haven’t changed
useMemo() → memoizes values
useCallback() → memoizes functions
Avoid anonymous functions inside render if possible

Code Example:

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

const Child = memo(({ onClick }) => {
  console.log("Child rendered");
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((c) => c + 1), []);

  return (
    <>
      <p>Count: {count}</p>
      <Child onClick={increment} />
    </>
  );
}

Result:

Child won’t re-render unnecessarily because onClick reference stays stable.

Explain the differences between useMemo() and useCallback() in React.

Both are optimization hooks, but they serve different purposes:

Hook	Purpose	Returns
`useMemo`	Memoizes values	The memoized value
`useCallback`	Memoizes functions	The memoized function reference

useMemo Example:

function ExpensiveComponent({ items }) {
  // Recalculates only when items change
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);

  return <div>Total: ${total}</div>;
}

useCallback Example:

function Parent() {
  const [count, setCount] = useState(0);
  
  // Function reference stays stable
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={handleClick} />;
}

Don’t overuse these hooks. They have their own overhead. Only use when you have performance issues.

How would you implement a search feature with debouncing in React?

Debouncing delays the execution of a function until after a specified time has passed.

Example:

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query) {
      setResults([]);
      return;
    }

    const timer = setTimeout(() => {
      // Perform search
      fetch(`/api/search?q=${query}`)
        .then(r => r.json())
        .then(setResults);
    }, 500); // Wait 500ms after user stops typing

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}

Custom Hook Version:

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

// Usage
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
  if (debouncedQuery) {
    fetchResults(debouncedQuery);
  }
}, [debouncedQuery]);

Debouncing reduces API calls and improves performance by waiting for the user to finish typing.

How would you re-render a component when the window is resized?

Use useEffect with a resize event listener:

Example:

function ResponsiveComponent() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>Window: {windowSize.width} x {windowSize.height}</div>;
}

Custom Hook Version:

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

// Usage
function Component() {
  const { width, height } = useWindowSize();
  return <div>{width} x {height}</div>;
}

How do you handle asynchronous operations in React using async/await or Promises?

Handling async operations in React:

In useEffect:

useEffect(() => {
  async function fetchData() {
    const data = await fetch('/api/data').then(r => r.json());
    setData(data);
  }
  fetchData();
}, []);

In Event Handlers:

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData)
    });
    const result = await response.json();
    console.log('Success:', result);
  } catch (error) {
    console.error('Error:', error);
  }
};

With Promises:

useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => setError(error));
}, []);

You cannot make the useEffect callback itself async. Always define an async function inside useEffect and call it.

Explain the use case of useEffect() for fetching data from an API.

useEffect is commonly used for data fetching because it runs after render and can handle async operations.

Example:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchUser() {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchUser();
  }, [userId]); // Re-fetch when userId changes

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  return <div>{user?.name}</div>;
}

For better data fetching, consider React Query or SWR which handle caching, refetching, and error states automatically.

How do you handle errors in a React app, and what is the role of error boundaries?

Error boundaries catch JavaScript errors in the component tree and display fallback UI.

Error Boundary Example:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo);
    // Log to error reporting service
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Important Notes:

Error boundaries only catch errors in children components
They don’t catch errors in event handlers, async code, or during SSR
Use multiple error boundaries for granular error handling

Error boundaries must be class components. Functional components cannot be error boundaries (yet).

How would you implement dynamic form handling and validation in React?

Dynamic form handling with validation:

Example:

function DynamicForm() {
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});

  const handleChange = (name, value) => {
    setFormData(prev => ({ ...prev, [name]: value }));
    // Clear error when user types
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const validate = () => {
    const newErrors = {};
    if (!formData.email) newErrors.email = 'Email required';
    if (!formData.email?.includes('@')) newErrors.email = 'Invalid email';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log('Form valid:', formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.email || ''}
        onChange={(e) => handleChange('email', e.target.value)}
      />
      {errors.email && <span>{errors.email}</span>}
      <button type="submit">Submit</button>
    </form>
  );
}

For complex forms, consider libraries like React Hook Form or Formik for better validation and performance.

What is lazy loading in React, and how does it improve application performance?

Lazy loading defers loading components until they’re needed, reducing initial bundle size.

How it works:

Components are split into separate chunks
Loaded only when required (route navigation, conditional rendering)
Reduces initial JavaScript bundle size

Example:

import { lazy, Suspense } from 'react';

// Lazy load the component
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Benefits:

Faster Initial Load: Smaller initial bundle
Better Performance: Load code on demand
Improved User Experience: Faster time to interactive

In Next.js, code splitting is automatic per page. Use React.lazy() for manual code splitting in regular React apps.

Describe how React Context API can be used for state management in an app.

Context API provides a way to share data across the component tree without prop drilling.

Example:

// Create Context
const ThemeContext = createContext();

// Provider Component
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Content />
    </ThemeContext.Provider>
  );
}

// Consumer Component
function Header() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current: {theme}
    </button>
  );
}

When to Use:

Global state like theme, user, language
Avoiding prop drilling through many levels
Simple state that doesn’t need complex logic

Context causes all consumers to re-render when value changes. Split contexts or use memoization for performance.

What is the role of React Router, and how does it work with dynamic routing?

React Router enables client-side routing in single-page applications.

Basic Setup:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Dynamic Routing:

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams(); // Gets :id from URL
  return <div>User ID: {id}</div>;
}

import { useNavigate, Link } from 'react-router-dom';

function Navigation() {
  const navigate = useNavigate();
  return (
    <>
      <Link to="/about">About</Link>
      <button onClick={() => navigate('/users/123')}>
        Go to User
      </button>
    </>
  );
}

React Router enables SPA navigation without full page reloads, improving user experience.

How would you pass data between sibling components in React without using Redux?

Methods to pass data between siblings without Redux:

Lift State Up: Move shared state to common parent
Context API: Share data through React Context
Event Emitters: Use custom event system
State Management Libraries: Zustand, Jotai (lighter than Redux)

Example - Lifting State:

function Parent() {
  const [sharedData, setSharedData] = useState('');
  return (
    <>
      <SiblingA data={sharedData} setData={setSharedData} />
      <SiblingB data={sharedData} />
    </>
  );
}

Example - Context API:

const DataContext = createContext();

function Parent() {
  const [data, setData] = useState('');
  return (
    <DataContext.Provider value={{ data, setData }}>
      <SiblingA />
      <SiblingB />
    </DataContext.Provider>
  );
}

function SiblingA() {
  const { setData } = useContext(DataContext);
  return <input onChange={(e) => setData(e.target.value)} />;
}

Advanced Level - Expert Questions

What are the limitations of React in building large-scale applications?

React has several limitations when building large-scale applications:

State Management Complexity: As apps grow, prop drilling and state management become complex without additional libraries (Redux, Zustand)
Bundle Size: React itself adds to bundle size, and without code splitting, initial load can be slow
SEO Challenges: Client-side rendering can hurt SEO without SSR (Next.js helps)
Performance with Large Lists: Rendering thousands of items can be slow without virtualization
No Built-in Routing: Requires additional libraries (React Router)
Learning Curve: JSX, hooks, and patterns require significant learning
Debugging Complexity: Large component trees can be hard to debug

These limitations are often addressed with ecosystem tools like Next.js, Redux, React Router, and virtualization libraries.

How does React manage the Virtual DOM, and what are the benefits?

React manages the Virtual DOM by:

Creating a Virtual Representation: React creates a lightweight JavaScript object representation of the DOM
Diffing Algorithm: When state changes, React creates a new Virtual DOM tree and compares it with the previous one
Reconciliation: React determines the minimal set of changes needed
Batch Updates: React batches DOM updates for efficiency
Commit Phase: React applies only the necessary changes to the real DOM

Benefits:

Performance: Avoids expensive direct DOM manipulation
Efficiency: Only updates what changed, not entire trees
Predictability: Makes UI updates more predictable and easier to reason about
Cross-browser Compatibility: Abstracts browser differences

The Virtual DOM is React’s core optimization strategy that makes it fast even with complex UIs.

Can React Hooks fully replace Redux for state management? Explain why or why not.

React Hooks (useState, useContext, useReducer) can replace Redux in many cases, but not always.

When Hooks are Sufficient:

Small to medium applications
Simple state that doesn’t need time-travel debugging
Local component state or shared state via Context
No need for middleware (logging, async actions)

When Redux is Better:

Large applications with complex state
Need for time-travel debugging
Middleware requirements (Redux Thunk, Saga)
Predictable state updates with strict patterns
DevTools for debugging

Example with useReducer (Redux-like):

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

For most apps, Context + useReducer can replace Redux. Use Redux when you need its ecosystem and tooling.

What are the best practices for managing state in large React applications?

Best practices for state management in large React applications:

Lift State Appropriately: Keep state as local as possible, lift only when needed
Use Context for Global State: For theme, user, locale that many components need
Consider State Management Libraries: Redux, Zustand, or Jotai for complex state
Separate Server and Client State: Use React Query or SWR for server state
Normalize State Shape: Keep state flat and normalized (like Redux)
Use Custom Hooks: Abstract state logic into reusable hooks
Avoid Prop Drilling: Use Context or state management for deeply nested props

Example Structure:

// Local state (component level)
const [isOpen, setIsOpen] = useState(false);

// Shared state (Context)
const { user, setUser } = useContext(UserContext);

// Server state (React Query)
const { data } = useQuery(['users'], fetchUsers);

// Global state (Zustand)
const { count, increment } = useStore();

How would you optimize performance in a React app with large component trees?

Optimization strategies for large component trees:

Code Splitting: Use React.lazy() and Suspense to split code
Memoization: Use React.memo(), useMemo(), useCallback()
Virtualization: Use react-window or react-virtualized for long lists
Avoid Inline Functions: Move functions outside render or use useCallback
Proper Keys: Use stable, unique keys in lists
State Colocation: Keep state close to where it’s used
React.memo with Custom Comparison: For expensive components

Example:

// Code splitting
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Virtualization
import { FixedSizeList } from 'react-window';
<FixedSizeList height={600} itemCount={1000} itemSize={35}>
  {Row}
</FixedSizeList>

// Memoization
const ExpensiveChild = React.memo(Child, (prev, next) => {
  return prev.id === next.id;
});

Explain React's Strict Mode and its impact on development.

React Strict Mode is a development tool that helps identify potential problems in your application.

What it does:

Double Invokes: Intentionally double-invokes functions to detect side effects
Deprecation Warnings: Warns about deprecated APIs
Unsafe Lifecycle Warnings: Identifies unsafe lifecycle methods
Legacy String Ref Warnings: Warns about string refs

Example:

import { StrictMode } from 'react';

function App() {
  return (
    <StrictMode>
      <MyComponent />
    </StrictMode>
  );
}

Impact:

Helps catch bugs early in development
Ensures components are resilient to re-mounting
Prepares for future React features
Note: Strict Mode only runs in development, not production

Strict Mode helps ensure your code is ready for concurrent features and future React versions.

How can you prevent unnecessary re-renders in React functional components?

Strategies to prevent unnecessary re-renders:

React.memo(): Wrap components to prevent re-renders if props haven’t changed
useMemo(): Memoize expensive calculations
useCallback(): Memoize function references
State Colocation: Move state down to the component that needs it
Split Components: Break large components into smaller ones
Avoid Creating Objects in Render: Move object/array creation outside render

Example:

// ❌ Bad - creates new object every render
function Parent() {
  const [count, setCount] = useState(0);
  return <Child config={{ theme: 'dark' }} />;
}

// ✅ Good - stable reference
const config = { theme: 'dark' };
function Parent() {
  const [count, setCount] = useState(0);
  return <Child config={config} />;
}

// ✅ Better - useMemo
function Parent() {
  const [count, setCount] = useState(0);
  const config = useMemo(() => ({ theme: 'dark' }), []);
  return <Child config={config} />;
}

Describe the key differences between functional and class components in React.

Aspect	Functional Components	Class Components
Syntax	Function declaration	Class extends Component
State	`useState` hook	`this.state`
Lifecycle	`useEffect` hook	`componentDidMount`, etc.
Performance	Generally faster	Slightly more overhead
Code Size	Less code	More boilerplate
Hooks	✅ Can use all hooks	❌ Cannot use hooks
`this` binding	Not needed	Required for methods

Example Comparison:

// Functional Component
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => console.log('Mounted'), []);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// Class Component
class Counter extends React.Component {
  state = { count: 0 };
  componentDidMount() { console.log('Mounted'); }
  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
      {this.state.count}
    </button>;
  }
}

Functional components are now the recommended approach. Class components are maintained for legacy code.

What is the significance of the React Fiber architecture?

React Fiber is a complete rewrite of React’s reconciliation algorithm that enables:

Incremental Rendering: Can split work into chunks and prioritize updates
Concurrent Rendering: Can pause, abort, or reuse work as needed
Better Performance: More efficient rendering for complex UIs
Priority-based Updates: Can prioritize user interactions over background updates
Error Boundaries: Better error handling and recovery

Key Benefits:

Non-blocking Rendering: UI stays responsive during heavy computations
Time Slicing: Breaks work into small units that can be interrupted
Suspense: Enables features like Suspense and concurrent mode

Fiber architecture is what enables React 18 features like automatic batching, Suspense, and concurrent rendering.

How does React handle side effects, and how can you manage them effectively?

React handles side effects through the useEffect hook, which runs after render.

Effective Management:

Separate Concerns: Use multiple useEffect hooks for different side effects
Proper Dependencies: Always include all dependencies in the dependency array
Cleanup: Always clean up subscriptions, timers, and event listeners
Avoid Infinite Loops: Be careful with dependencies that change on every render

Example:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);

  // Separate effects for different concerns
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  useEffect(() => {
    fetchPosts(userId).then(setPosts);
  }, [userId]);

  // Cleanup example
  useEffect(() => {
    const interval = setInterval(() => console.log('Tick'), 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>{user?.name}</div>;
}

How would you implement custom hooks to abstract logic in React?

Custom hooks are functions that start with “use” and can call other hooks.

Example - useFetch:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// Usage
function UserProfile({ userId }) {
  const { data: user, loading, error } = useFetch(`/api/users/${userId}`);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <div>{user.name}</div>;
}

Example - useLocalStorage:

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

Custom hooks enable code reuse and logic abstraction across components.

What are Higher-Order Components (HOCs) and when would you use them?

HOCs are functions that take a component and return a new component with added functionality. They’re used to share logic across multiple components (like authentication, logging, or analytics).

Example:

// withAuth.js
const withAuth = (WrappedComponent) => {
  return function AuthenticatedComponent(props) {
    const isAuthenticated = Boolean(localStorage.getItem("token"));
    if (!isAuthenticated) {
      return <p>Please login first</p>;
    }
    return <WrappedComponent {...props} />;
  };
};

// Usage
const Dashboard = () => <h2>Welcome to Dashboard</h2>;
export default withAuth(Dashboard);

HOCs are less common now with hooks, but still useful for cross-cutting concerns.

What is the Render Props pattern?

Render Props is a technique where a component accepts a function as a prop and uses it to determine what to render. It helps in sharing logic between components without using HOCs.

Example:

// MouseTracker.js
function MouseTracker({ render }) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

// Usage
<MouseTracker render={({ x, y }) => <p>Mouse at {x}, {y}</p>} />

Render Props pattern is less common now with custom hooks, but still a valid pattern for sharing logic.

What are the benefits of server-side rendering (SSR) in React applications?

Benefits of SSR in React:

SEO: Search engines can crawl fully rendered HTML
Faster Initial Load: Users see content immediately
Better Performance: Reduces client-side JavaScript execution
Social Sharing: Proper meta tags for social media previews
Accessibility: Works better with screen readers on initial load

SSR vs CSR:

Aspect	SSR	CSR
Initial HTML	Fully rendered	Empty shell
SEO	✅ Excellent	❌ Poor
Time to First Byte	Slower	Faster
Time to Interactive	Faster	Slower

Next.js provides excellent SSR support with features like getServerSideProps and Server Components.

How do you handle styling in React components? Discuss different approaches.

Common styling approaches in React:

CSS Modules: Scoped CSS files
Styled Components: CSS-in-JS library
Tailwind CSS: Utility-first CSS framework
Inline Styles: JavaScript objects
CSS-in-JS: Libraries like Emotion, styled-components

Example - CSS Modules:

// Button.module.css
.button { background: blue; }

// Button.jsx
import styles from './Button.module.css';
<button className={styles.button}>Click</button>

Example - Styled Components:

import styled from 'styled-components';
const Button = styled.button`
  background: blue;
  color: white;
`;
<Button>Click</Button>

Example - Tailwind:

<button className="bg-blue-500 text-white px-4 py-2">
  Click
</button>

Choose based on your project needs: CSS Modules for simplicity, Tailwind for rapid development, styled-components for dynamic styling.

How would you optimize React app performance when handling large lists or grids?

Optimization strategies for large lists:

Virtualization: Only render visible items
Pagination: Load items in chunks
Memoization: Memoize list items
Proper Keys: Use stable, unique keys

Example with react-window:

import { FixedSizeList } from 'react-window';

function LargeList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );

  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={35}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

Example with Pagination:

function PaginatedList() {
  const [page, setPage] = useState(1);
  const itemsPerPage = 20;
  const start = (page - 1) * itemsPerPage;
  const paginatedItems = items.slice(start, start + itemsPerPage);

  return (
    <>
      {paginatedItems.map(item => <Item key={item.id} data={item} />)}
      <button onClick={() => setPage(p => p + 1)}>Next</button>
    </>
  );
}

Virtualization is the best approach for very large lists (1000+ items) as it only renders visible items.

Explain the difference between shallow and deep comparison in React's shouldComponentUpdate.

Shallow Comparison: Compares object references, not nested values Deep Comparison: Recursively compares all nested properties

Shallow Comparison (React.memo default):

const prev = { user: { name: 'John' } };
const next = { user: { name: 'John' } };
// Shallow: false (different object references)
// Deep: true (same values)

Custom Comparison:

const UserCard = React.memo(({ user }) => {
  return <div>{user.name}</div>;
}, (prevProps, nextProps) => {
  // Custom shallow comparison
  return prevProps.user.id === nextProps.user.id;
});

React uses shallow comparison by default for performance. Deep comparison is expensive and rarely needed.

How do you handle asynchronous code execution and state updates in React?

Handling async code and state updates:

Pattern 1: useEffect with async:

useEffect(() => {
  let cancelled = false;
  async function fetchData() {
    const data = await fetch('/api/data').then(r => r.json());
    if (!cancelled) setData(data);
  }
  fetchData();
  return () => { cancelled = true; };
}, []);

Pattern 2: AbortController:

useEffect(() => {
  const controller = new AbortController();
  fetch('/api/data', { signal: controller.signal })
    .then(r => r.json())
    .then(setData);
  return () => controller.abort();
}, []);

Pattern 3: Functional Updates:

const handleAsyncUpdate = async () => {
  const result = await someAsyncOperation();
  setCount(prev => prev + result); // Safe with functional update
};

Always clean up async operations to prevent state updates on unmounted components.

How would you structure large React or Next.js projects?

A common scalable structure:

src/
 ├── app/
 │    ├── (routes)
 │    ├── layout.tsx
 │    └── page.tsx
 ├── components/
 │    ├── ui/
 │    ├── forms/
 │    ├── layout/
 ├── hooks/
 ├── context/
 ├── lib/
 ├── services/
 ├── store/
 ├── styles/
 └── utils/

Feature-based organization helps scale
Shared state or UI logic goes to /context or /hooks
Pages are lazy-loaded in Next.js automatically

What are error boundaries and how do they work?

Error boundaries catch JavaScript errors in React components and show fallback UIs instead of breaking the app. They only work in class components.

Example:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error("Error logged:", error, info);
  }
  render() {
    if (this.state.hasError) return <h2>Something went wrong!</h2>;
    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <ComponentThatMayCrash />
</ErrorBoundary>

Explain the concept of render optimization in React

To prevent unnecessary re-renders:

Use React.memo() for pure functional components
Use useCallback and useMemo to memoize functions and computed values
Avoid creating new objects/functions in render unnecessarily

Example:

const Button = React.memo(({ onClick }) => {
  console.log("Rendered Button");
  return <button onClick={onClick}>Click me</button>;
});

function App() {
  const handleClick = React.useCallback(() => console.log("Clicked!"), []);
  return <Button onClick={handleClick} />;
}

What is the difference between a monolithic and modular frontend architecture?

Aspect	Monolithic	Modular (Micro-frontend)
Structure	All components tightly coupled and deployed together	App divided into independent modules (built & deployed separately)
Team Size	Better for small teams	Ideal for large teams, multiple domains
Deployment	Single deployment	Independent deployments
Tech Stack	Single technology	Tech diversity (React + Vue + Angular)

When to use Modular:

Large teams, multiple domains
Independent deployments
Tech diversity requirements

How do you manage global state in large apps?

Options:

Context API for light global state
Redux Toolkit / Zustand / Jotai for complex or shared logic
React Query for server state

Example with Zustand:

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increase } = useStore();
  return <button onClick={increase}>Count: {count}</button>;
}

Explain React's reconciliation process and how it updates the DOM efficiently.

Reconciliation is React’s algorithm for comparing the old and new Virtual DOM trees to determine what needs to be updated.

Process:

Render Phase: React creates a new Virtual DOM tree
Diffing: Compares new tree with previous tree
Reconciliation: Determines minimal set of changes
Commit Phase: Applies changes to real DOM

Key Optimizations:

Same-level Comparison: React compares elements at the same level
Key Optimization: Keys help React identify which items changed
Batching: Multiple updates are batched together
Fiber Architecture: Enables incremental rendering

Example:

// Old Virtual DOM
<div>
  <p>Hello</p>
  <span>World</span>
</div>

// New Virtual DOM
<div>
  <p>Hello</p>
  <span>React</span>  // Only this changes
</div>

// React only updates the <span> text node, not the entire tree

Reconciliation is what makes React fast - it minimizes expensive DOM operations by only updating what changed.

6. NEXT JS

Explain the difference between the Pages Router and App Router in Next.js

Feature	Pages Router (pages/)	App Router (app/)
Introduced	Before Next.js 13	Next.js 13+
Rendering	CSR, SSR, SSG	RSC, SSR, SSG, ISR
File-based routing	Yes	Yes (with nested layouts)
Data fetching	`getServerSideProps`, `getStaticProps`	Async components or fetch directly
Layouts	Custom	Built-in persistent layouts
Server Components	❌	✅ Default
Client Components	✅	✅ (with “use client”)

Example (App Router):

// app/page.tsx
export default async function HomePage() {
  const data = await fetch("https://api.example.com/posts").then(res => res.json());
  return <div>{data.map(p => <p key={p.id}>{p.title}</p>)}</div>;
}

Example (Pages Router):

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/posts");
  const data = await res.json();
  return { props: { data } };
}
export default function Home({ data }) {
  return <div>{data.map(p => <p key={p.id}>{p.title}</p>)}</div>;
}

What are Server Components and Client Components in Next.js 13+?

Server Components (default):
- Run on the server (never in browser)
- Can fetch data directly
- Reduce bundle size and improve performance
Client Components:
- Run in the browser
- Must be marked with “use client”
- Can use useState, useEffect, event handlers, etc.

Example:

// app/page.tsx (Server Component)
import ClientButton from "./ClientButton";

export default async function Page() {
  const data = await fetch("https://api.example.com/user").then(r => r.json());
  return (
    <div>
      <h1>Hello, {data.name}</h1>
      <ClientButton />
    </div>
  );
}

// app/ClientButton.tsx (Client Component)
"use client";
import { useState } from "react";

export default function ClientButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count}</button>;
}

How does SSR differ from SSG and ISR in Next.js?

Mode	Description	When to Use
SSR (Server-Side Rendering)	Page rendered at every request	Dynamic data that changes often (e.g., dashboard)
SSG (Static Site Generation)	Page pre-rendered at build time	Static content (e.g., blog, docs)
ISR (Incremental Static Regeneration)	SSG + revalidation after a time interval	Semi-static content (e.g., news feed)

Example (ISR):

// app/blog/page.tsx
export const revalidate = 60; // regenerate every 60 seconds

export default async function BlogPage() {
  const posts = await fetch("https://api.example.com/posts").then(res => res.json());
  return <div>{posts.map(p => <p key={p.id}>{p.title}</p>)}</div>;
}

When would you choose SSR vs CSR?

SSR: When SEO and fast first paint are important
CSR (Client-Side Rendering): When user-specific or highly interactive data is needed (like dashboards)

Example CSR (client fetch):

"use client";
import { useEffect, useState } from "react";

export default function Dashboard() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/api/data").then(res => res.json()).then(setData);
  }, []);

  return <div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
}

How do you handle API routes in Next.js?

In App Router, API routes live under /app/api/*/route.ts.

Example:

// app/api/user/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const user = { name: "Shehroze", age: 28 };
  return NextResponse.json(user);
}

export async function POST(req: Request) {
  const body = await req.json();
  return NextResponse.json({ message: "User created", data: body });
}

Usage:

const res = await fetch("/api/user");
const user = await res.json();

Explain middleware and where it runs

Middleware runs before a request is processed. It can:

Redirect or rewrite requests
Check authentication
Modify headers

Runs on: Edge Runtime (very fast, lightweight)

Example:

// middleware.ts
import { NextResponse } from "next/server";

export function middleware(req) {
  const isLoggedIn = req.cookies.get("token");
  const url = req.nextUrl.clone();

  if (!isLoggedIn && url.pathname.startsWith("/dashboard")) {
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }
}

How does generateMetadata work in the App Router?

generateMetadata() allows dynamic SEO metadata generation per page.

Example:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());
  return {
    title: post.title,
    description: post.excerpt,
  };
}

export default function BlogPost({ params }) {
  return <h1>Post: {params.slug}</h1>;
}

Benefit: SEO-friendly and supports dynamic OG tags, locales, etc.

What are Layouts and Parallel Routes in Next.js?

Layouts: Persistent UI (e.g., navbars, sidebars) wrapping child routes
Parallel Routes: Allow rendering multiple route segments simultaneously (e.g., tabs)

Layout Example:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <nav>Navigation</nav>
        {children}
      </body>
    </html>
  );
}

Parallel Routes Example:

// app/@tabs/(profile)/page.tsx
export default function ProfileTab() {
  return <p>Profile Tab</p>;
}

// app/@tabs/(settings)/page.tsx
export default function SettingsTab() {
  return <p>Settings Tab</p>;
}

How does Next.js handle Image Optimization?

Next.js <Image> component optimizes images automatically:

Lazy loading
Responsive resizing
WebP conversion

Example:

import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero Banner"
      width={1200}
      height={600}
      priority
    />
  );
}

Benefit: Automatically reduces payload and improves Core Web Vitals.

How do you do Internationalization (i18n) in Next.js?

Next.js has built-in i18n support in config and route-level solutions.

Example using next-intl:

// middleware.ts
import createMiddleware from "next-intl/middleware";

export default createMiddleware({
  locales: ["en", "ar"],
  defaultLocale: "en",
});

Usage:

// app/[locale]/page.tsx
import { useTranslations } from "next-intl";

export default function HomePage() {
  const t = useTranslations("Home");
  return <h1>{t("welcome")}</h1>;
}

Result: Automatically renders pages in the selected locale.

7. React State Management and Advanced Patterns

What is code splitting?

Code splitting breaks bundle into chunks loaded on demand. Use React.lazy() for component-level splitting: const LazyComponent = React.lazy(() => import('./Component')).

Explain error boundaries

Error boundaries catch JavaScript errors in component tree. Implement with componentDidCatch and getDerivedStateFromError. Display fallback UI instead of crashing.

What are portals?

Portals render children outside parent DOM hierarchy: ReactDOM.createPortal(child, container). Useful for modals, tooltips, overlays maintaining React tree relationship.

What is React Router?

React Router enables client-side routing in SPAs. Define routes with <Route path="/" element={<Component />} />. Navigate with Link or useNavigate hook.

Explain performance optimization

Techniques: React.memo, useCallback, useMemo, code splitting, virtualization, lazy loading, avoid inline functions, proper keys, lift state appropriately.

What's the difference between Redux, Zustand, and React Query?

Library	Purpose	Best For
Redux	Centralized predictable state management (global state)	Large apps needing structured data flow
Zustand	Lightweight state management using hooks	Simpler state sharing without boilerplate
React Query (TanStack Query)	Server-state management (fetching, caching, syncing)	Handling API data efficiently

Example: Redux

// store.ts
import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: { increment: (state) => { state.count++; } }
});

export const { increment } = counterSlice.actions;
export const store = configureStore({ reducer: counterSlice.reducer });

// Counter.tsx
"use client";
import { useDispatch, useSelector } from "react-redux";
import { increment } from "./store";

export default function Counter() {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.count);
  return <button onClick={() => dispatch(increment())}>Count: {count}</button>;
}

Example: Zustand

// useCounterStore.ts
import { create } from "zustand";

export const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Component
"use client";
import { useCounterStore } from "./useCounterStore";

export default function Counter() {
  const { count, increment } = useCounterStore();
  return <button onClick={increment}>Zustand Count: {count}</button>;
}

Example: React Query

// app/page.tsx
"use client";
import { useQuery } from "@tanstack/react-query";

export default function Users() {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Summary:

Redux → predictable, structured, global state
Zustand → minimal, fast local/global store
React Query → asynchronous data fetching & caching

How do you handle server and client data synchronization?

Server data is fetched and stored on load (SSR or ISR), while client data changes locally. To sync:

Use React Query or SWR for automatic refetching
Use mutations and invalidate queries after updates

Example with React Query:

"use client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

function Todos() {
  const queryClient = useQueryClient();
  const { data: todos } = useQuery(["todos"], () =>
    fetch("/api/todos").then(r => r.json())
  );

  const addTodo = useMutation({
    mutationFn: (newTodo) =>
      fetch("/api/todos", {
        method: "POST",
        body: JSON.stringify(newTodo),
      }),
    onSuccess: () => queryClient.invalidateQueries(["todos"]),
  });

  return (
    <>
      <ul>{todos?.map(t => <li key={t.id}>{t.title}</li>)}</ul>
      <button onClick={() => addTodo.mutate({ title: "New Task" })}>
        Add Todo
      </button>
    </>
  );
}

Key concept: invalidateQueries ensures fresh data after mutation — syncing server + client.

Explain how to use useReducer hook

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

Example:

"use client";
import { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "decrement": return { count: state.count - 1 };
    default: return state;
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}

When to use:

When state transitions are complex or multiple actions affect the same state.

How would you implement pagination or infinite scrolling efficiently?

Use API parameters like ?page=1&limit=10
Use React Query with getNextPageParam for infinite scroll

Example:

"use client";
import { useInfiniteQuery } from "@tanstack/react-query";

export default function InfiniteUsers() {
  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
    queryKey: ["users"],
    queryFn: ({ pageParam = 1 }) =>
      fetch(`https://api.example.com/users?page=${pageParam}`).then(r => r.json()),
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false,
  });

  return (
    <>
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.users.map((user) => <p key={user.id}>{user.name}</p>)}
        </div>
      ))}
      {hasNextPage && <button onClick={() => fetchNextPage()}>Load more</button>}
    </>
  );
}

Benefit: Efficient, incremental loading instead of fetching the entire dataset.

What is hydration and what problems can occur during hydration in Next.js?

Hydration = The process where React on the client attaches event handlers to the already rendered HTML from the server
Hydration mismatch happens when server-rendered HTML differs from client render output

Example (problematic):

// app/page.tsx
"use client";
export default function Page() {
  const now = new Date().toLocaleTimeString();
  return <p>{now}</p>;
}

Issue: Server renders one time, client renders another (time mismatch)

Fix:

"use client";
import { useEffect, useState } from "react";

export default function Page() {
  const [time, setTime] = useState("");
  useEffect(() => setTime(new Date().toLocaleTimeString()), []);
  return <p>{time}</p>;
}

Common causes of mismatch:

Conditional rendering differences between server/client
Using window, localStorage on the server
Non-deterministic values during SSR

How do you handle loading and error states in data fetching?

Use React Suspense or manual conditional rendering.

Example (React Query):

"use client";
import { useQuery } from "@tanstack/react-query";

function Users() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

How can you persist state across pages or reloads?

You can persist state using:

LocalStorage / SessionStorage
URL query params
Redux Persist or Zustand middleware

Example (Zustand persist):

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useUserStore = create(
  persist(
    (set) => ({
      name: "",
      setName: (name) => set({ name }),
    }),
    { name: "user-storage" }
  )
);

Usage:

"use client";
import { useUserStore } from "./useUserStore";

export default function Profile() {
  const { name, setName } = useUserStore();
  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Hello, {name}</p>
    </>
  );
}

How do you prefetch data in Next.js App Router?

You can use React’s async Server Components to fetch before rendering (SSR-like behavior).

Example:

// app/users/page.tsx
export default async function UsersPage() {
  const users = await fetch("https://api.example.com/users", {
    cache: "no-store", // SSR-like
  }).then(r => r.json());

  return (
    <div>
      {users.map(u => <p key={u.id}>{u.name}</p>)}
    </div>
  );
}

Options:

cache: "no-store" → always fresh (SSR)
next: { revalidate: 60 } → ISR caching

What are Higher-Order Components (HOCs) and when would you use them?

HOCs are functions that take a component and return a new component with added functionality. They’re used to share logic across multiple components (like authentication, logging, or analytics).

Example:

// withAuth.js
const withAuth = (WrappedComponent) => {
  return function AuthenticatedComponent(props) {
    const isAuthenticated = Boolean(localStorage.getItem("token"));
    if (!isAuthenticated) {
      return <p>Please login first</p>;
    }
    return <WrappedComponent {...props} />;
  };
};

// Usage
const Dashboard = () => <h2>Welcome to Dashboard</h2>;
export default withAuth(Dashboard);

What is the Render Props pattern?

Render Props is a technique where a component accepts a function as a prop and uses it to determine what to render. It helps in sharing logic between components without using HOCs.

Example:

// MouseTracker.js
function MouseTracker({ render }) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

// Usage
<MouseTracker render={({ x, y }) => <p>Mouse at {x}, {y}</p>} />

What is Compound Components pattern?

Compound components allow multiple components to work together, sharing implicit state via React Context.

Example:

const TabsContext = React.createContext();

function Tabs({ children }) {
  const [active, setActive] = React.useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      <div>{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  return <div>{children}</div>;
}

function Tab({ index, children }) {
  const { active, setActive } = React.useContext(TabsContext);
  return (
    <button
      onClick={() => setActive(index)}
      style={{ fontWeight: active === index ? "bold" : "normal" }}
    >
      {children}
    </button>
  );
}

function TabPanels({ children }) {
  const { active } = React.useContext(TabsContext);
  return <div>{children[active]}</div>;
}

// Usage
<Tabs>
  <TabList>
    <Tab index={0}>Profile</Tab>
    <Tab index={1}>Settings</Tab>
  </TabList>
  <TabPanels>
    <div>Profile content</div>
    <div>Settings content</div>
  </TabPanels>
</Tabs>

What is the Provider Pattern?

The Provider Pattern exposes shared data and behavior to components via React Context. It’s heavily used for themes, authentication, and state management.

Example:

const ThemeContext = React.createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = React.useState("light");
  const toggle = () => setTheme(t => (t === "light" ? "dark" : "light"));

  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Usage
function ThemeToggleButton() {
  const { theme, toggle } = React.useContext(ThemeContext);
  return <button onClick={toggle}>Theme: {theme}</button>;
}

What is code-splitting and how do you implement it in React?

Code-splitting helps load only the code needed for the current page, improving performance. React provides React.lazy() and Suspense for this.

Example:

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

function App() {
  return (
    <React.Suspense fallback={<p>Loading...</p>}>
      <Dashboard />
    </React.Suspense>
  );
}

In Next.js, code-splitting is automatic per page.

How do you structure large React or Next.js projects?

A common scalable structure:

src/
 ├── app/
 │    ├── (routes)
 │    ├── layout.tsx
 │    └── page.tsx
 ├── components/
 │    ├── ui/
 │    ├── forms/
 │    ├── layout/
 ├── hooks/
 ├── context/
 ├── lib/
 ├── services/
 ├── store/
 ├── styles/
 └── utils/

Feature-based organization helps scale
Shared state or UI logic goes to /context or /hooks
Pages are lazy-loaded in Next.js automatically

What are error boundaries and how do they work?

Error boundaries catch JavaScript errors in React components and show fallback UIs instead of breaking the app. They only work in class components.

Example:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.error("Error logged:", error, info);
  }
  render() {
    if (this.state.hasError) return <h2>Something went wrong!</h2>;
    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <ComponentThatMayCrash />
</ErrorBoundary>

Explain the concept of render optimization in React

To prevent unnecessary re-renders:

Use React.memo() for pure functional components
Use useCallback and useMemo to memoize functions and computed values
Avoid creating new objects/functions in render unnecessarily

Example:

const Button = React.memo(({ onClick }) => {
  console.log("Rendered Button");
  return <button onClick={onClick}>Click me</button>;
});

function App() {
  const handleClick = React.useCallback(() => console.log("Clicked!"), []);
  return <Button onClick={handleClick} />;
}

What is the difference between a monolithic and modular frontend architecture?

Aspect	Monolithic	Modular (Micro-frontend)
Structure	All components tightly coupled and deployed together	App divided into independent modules (built & deployed separately)
Team Size	Better for small teams	Ideal for large teams, multiple domains
Deployment	Single deployment	Independent deployments
Tech Stack	Single technology	Tech diversity (React + Vue + Angular)

When to use Modular:

Large teams, multiple domains
Independent deployments
Tech diversity requirements

How do you manage global state in large apps?

Options:

Context API for light global state
Redux Toolkit / Zustand / Jotai for complex or shared logic
React Query for server state

Example with Zustand:

import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increase } = useStore();
  return <button onClick={increase}>Count: {count}</button>;
}

8. React and Next JS testing

Why is testing important in React apps?

Testing ensures that UI and logic behave as expected after changes. It helps catch regressions early and builds confidence in refactoring.

Types of tests:

Unit tests → Test small pieces (functions, components)
Integration tests → Verify component interaction
E2E tests → Test entire user flows (via Playwright / Cypress)

What testing libraries are commonly used in React and Next.js?

Jest → Testing framework (built-in with Next.js)
React Testing Library (RTL) → DOM interaction & behavior testing
Playwright / Cypress → End-to-end browser testing

How do you test a simple React component using Jest and RTL?

Example Component:

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

Test File:

// Counter.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import Counter from "./Counter";

test("increments counter when button clicked", () => {
  render(<Counter />);
  fireEvent.click(screen.getByText("Increment"));
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

Key Concept: RTL focuses on testing how users interact, not implementation details.

How do you mock API calls in tests?

You can use Jest’s jest.fn() or libraries like MSW (Mock Service Worker).

Example using Jest mock:

// fetchUser.js
export const fetchUser = async () => {
  const res = await fetch("/api/user");
  return res.json();
};

// fetchUser.test.js
import { fetchUser } from "./fetchUser";

global.fetch = jest.fn(() =>
  Promise.resolve({ json: () => Promise.resolve({ name: "Shehroze" }) })
);

test("fetches user correctly", async () => {
  const user = await fetchUser();
  expect(user.name).toBe("Shehroze");
});

How do you test Next.js pages or server functions?

You can test server actions, API routes, or getServerSideProps using Jest’s mocks.

Example:

// app/api/hello/route.js
export async function GET() {
  return Response.json({ message: "Hello Next.js" });
}

// route.test.js
import { GET } from "./route";

test("returns hello message", async () => {
  const response = await GET();
  const data = await response.json();
  expect(data.message).toBe("Hello Next.js");
});

How do you perform snapshot testing in React?

Snapshot tests ensure UI doesn’t change unexpectedly.

Example:

import { render } from "@testing-library/react";
import Button from "./Button";

test("renders correctly", () => {
  const { asFragment } = render(<Button label="Click me" />);
  expect(asFragment()).toMatchSnapshot();
});

If the UI changes, Jest will show a diff.

How do you test components that use React Context?

Wrap your component inside the provider in the test.

Example:

// ThemeContext.js
const ThemeContext = React.createContext();
export const ThemeProvider = ({ children }) => (
  <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
);
export default ThemeContext;

// ThemedText.js
import ThemeContext from "./ThemeContext";
export default function ThemedText() {
  const theme = React.useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

// ThemedText.test.js
import { render, screen } from "@testing-library/react";
import { ThemeProvider } from "./ThemeContext";
import ThemedText from "./ThemedText";

test("renders theme from context", () => {
  render(
    <ThemeProvider>
      <ThemedText />
    </ThemeProvider>
  );
  expect(screen.getByText("Theme: dark")).toBeInTheDocument();
});

How do you debug React apps efficiently?

Use React Developer Tools in browser
Add console.log() inside hooks or effects
Use VSCode breakpoints
Use why-did-you-render library to detect unnecessary re-renders
For Next.js, run next dev --inspect for Node debugging

How do you handle test coverage?

Jest has built-in coverage reporting:

npm run test -- --coverage

It generates a report showing what percentage of lines, functions, and branches are tested.

Key metrics to aim for:

80%+ line coverage
70%+ branch coverage

What are common issues you debug in Next.js?

Problem	Possible Cause	Solution
Hydration Error	Mismatch between SSR and client rendering	Avoid using browser-only APIs during SSR
API Route not working	Wrong file structure or method name	Ensure correct `/app/api/.../route.js` naming
404 after deploy	Static export paths missing	Check dynamic routes and revalidate configs
Performance lag	Over-fetching or large bundle	Use lazy loading, memoization, code-splitting

How do you test components using async effects?

Example Component:

// UserProfile.js
export default function UserProfile() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then(setUser);
  }, []);
  if (!user) return <p>Loading...</p>;
  return <p>Hello, {user.name}</p>;
}

Test File:

// UserProfile.test.js
import { render, screen, waitFor } from "@testing-library/react";
import UserProfile from "./UserProfile";

global.fetch = jest.fn(() =>
  Promise.resolve({ json: () => Promise.resolve({ name: "Shehroze" }) })
);

test("renders user after fetch", async () => {
  render(<UserProfile />);
  await waitFor(() => expect(screen.getByText("Hello, Shehroze")).toBeInTheDocument());
});

9. Performance and Optimization React | Next JS

How do you prevent unnecessary re-renders in React?

To prevent unnecessary re-renders in React:

Wrap pure components with React.memo
Use useCallback to memoize event handlers
Use useMemo for computed values
Split large components
Keep state as local as possible

Example:

const Child = React.memo(({ value }) => {
  console.log("Child rendered");
  return <p>{value}</p>;
});

function App() {
  const [count, setCount] = React.useState(0);
  const memoValue = React.useMemo(() => count * 2, [count]);
  return (
    <>
      <Child value={memoValue} />
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </>
  );
}

How do you optimize images and assets in Next.js?

Use the built-in next/image component for automatic:

Lazy loading
Responsive sizes
Format optimization (WebP/AVIF)

Example:

import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero Image"
      width={1200}
      height={600}
      priority
    />
  );
}

Tips:

Use priority for above-the-fold images
Use blurDataURL for placeholder effect

How do you handle large bundle sizes?

Use dynamic imports:

const Chart = dynamic(() => import("../components/Chart"), { ssr: false });

Analyze with:

npm run build && npx next analyze

Move heavy logic to server components (Next.js App Router)

How does React Suspense help performance?

Suspense lets you pause rendering while data is loading, improving perceived performance.

Example:

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

function App() {
  return (
    <React.Suspense fallback={<p>Loading user...</p>}>
      <User />
    </React.Suspense>
  );
}

What are server and client components in Next.js 13+?

Server Components: Run on the server; ideal for data fetching and heavy logic
Client Components: Run in the browser; used for interactivity

Example:

// server component (default)
export default async function Page() {
  const data = await fetch("https://api.example.com/posts").then(r => r.json());
  return <List posts={data} />;
}

// client component
"use client";
export function List({ posts }) {
  return posts.map(p => <p key={p.id}>{p.title}</p>);
}

How do you cache API responses in Next.js?

Use revalidate for ISR (Incremental Static Regeneration)
Use fetch caching options (force-cache, no-store, revalidate)

Example:

export default async function Page() {
  const res = await fetch("https://api.example.com/data", { 
    next: { revalidate: 60 } 
  });
  const data = await res.json();
  return <div>{data.title}</div>;
}

What are some performance debugging tools?

React Profiler → Measures render time
Lighthouse → Measures Core Web Vitals
Next.js build analyzer → Bundle size breakdown
Chrome DevTools Performance tab → JS execution time

What are React rendering phases and how to profile them?

React rendering has:

Render phase → Reconciliation (diffing virtual DOM)
Commit phase → Apply changes to real DOM

Use React DevTools Profiler to visualize and measure these phases.

How do you handle performance in lists (1000+ items)?

Use windowing (e.g. react-window or react-virtualized)
Use key properly
Paginate data

Example:

import { FixedSizeList as List } from "react-window";

const Row = ({ index, style }) => <div style={style}>Row {index}</div>;

<List height={400} width={300} itemCount={1000} itemSize={35}>
  {Row}
</List>;

What are best practices for Next.js SEO performance?

Use generateMetadata() in App Router
Lazy load below-the-fold components
Preload fonts via next/font
Optimize routes with static rendering when possible
Use semantic HTML and proper heading structure
Implement structured data with JSON-LD
Ensure fast loading times with image optimization

10. Security and Best Practices in React | Next JS

How do you prevent XSS (Cross-Site Scripting) in React?

React escapes all strings by default, preventing XSS unless you use dangerouslySetInnerHTML.

Safe Practice:

Never insert user input into HTML directly.

<p>{userInput}</p> // ✅ Safe
<div dangerouslySetInnerHTML={{ __html: userInput }} /> // ❌ Dangerous

If you must, sanitize it using DOMPurify:

import DOMPurify from "dompurify";
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />;

How do you secure API routes in Next.js?

Use authentication middleware
Validate incoming data with Zod or Yup
Restrict methods (GET, POST, etc.)
Avoid exposing sensitive env vars to the client

Example:

// app/api/user/route.js
import { auth } from "@/lib/auth";
import { z } from "zod";

const schema = z.object({ name: z.string() });

export async function POST(req) {
  const user = await auth(req);
  if (!user) return new Response("Unauthorized", { status: 401 });

  const body = await req.json();
  schema.parse(body);
  // safe to use body.name
}

How do you store secrets securely in Next.js?

Use .env.local for local secrets
Access via process.env.SECRET_KEY on server
Never expose private keys using NEXT_PUBLIC_ prefix unless intentional

Environment variables without NEXT_PUBLIC_ prefix are only available on the server side.

How do you prevent CSRF attacks?

Use tokens or double-submit cookies
For sensitive actions, validate Origin and Referer headers
Use libraries like NextAuth.js (handles CSRF internally)
Implement SameSite cookies

cookies.set("token", jwt, { 
  httpOnly: true, 
  secure: true, 
  sameSite: "strict" 
});

How do you handle authentication securely?

Use HTTP-only cookies for tokens
Avoid storing JWT in localStorage (can be stolen via XSS)
Implement proper session management
Use secure and sameSite flags for cookies

cookies.set("token", jwt, { 
  httpOnly: true, 
  secure: true, 
  sameSite: "strict" 
});

HTTP-only cookies prevent JavaScript access, reducing XSS attack impact.

What are CSP (Content Security Policies)?

A CSP header restricts sources for scripts, styles, images, etc., reducing XSS risk.

Example:

// next.config.js
async headers() {
  return [
    {
      source: "/(.*)",
      headers: [
        {
          key: "Content-Security-Policy",
          value: "default-src 'self'; img-src https: data:; script-src 'self';",
        },
      ],
    },
  ];
}

CSP helps prevent XSS attacks by whitelisting trusted sources for content loading.

How do you handle rate limiting for APIs?

Use middleware like Upstash, Redis, or rate-limiter-flexible.

Example (middleware):

import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.fixedWindow(10, "60 s"),
});

export async function middleware(req) {
  const ip = req.ip ?? "127.0.0.1";
  const { success } = await ratelimit.limit(ip);
  if (!success) return new Response("Too many requests", { status: 429 });
  return NextResponse.next();
}

How do you prevent sensitive data exposure in logs?

Never log JWTs, passwords, or full API responses. Mask sensitive data before logging.

Example:

// ❌ Don't do this
console.log({ email, password: userPassword });

// ✅ Do this instead
console.log({ email, password: "***" });

// For debugging, use redaction
const safeLog = (data) => {
  const { password, token, ...safeData } = data;
  console.log({ ...safeData, sensitive: "REDACTED" });
};

Always redact sensitive information before logging to prevent data leaks.

How to handle CORS safely?

Always whitelist origins
Avoid using * in production
Use middleware to configure headers

Example:

export const config = { api: { bodyParser: false } };
export default function handler(req, res) {
  res.setHeader("Access-Control-Allow-Origin", "https://trusted.com");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
}

Never use Access-Control-Allow-Origin: * in production for sensitive endpoints.

How to secure Next.js deployment?

Security Checklist:

✅ Use HTTPS
✅ Set NODE_ENV=production
✅ Use environment variables, not hardcoded secrets
✅ Keep dependencies updated (npm audit)
✅ Use a WAF (Web Application Firewall) if available
✅ Implement proper CORS policies
✅ Use security headers (CSP, HSTS, X-Frame-Options)
✅ Regular security scanning and penetration testing
✅ Monitor for suspicious activities
✅ Implement proper error handling (don’t leak stack traces)

Regular security audits and dependency updates are crucial for maintaining application security.

How do you protect sensitive environment variables in Next.js?

Environment variables starting with NEXT_PUBLIC_ are exposed to the client. Sensitive keys (like API secrets or DB credentials) must not use NEXT_PUBLIC_ and should only be accessed on the server (API routes, getServerSideProps, or server components).

Example:

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_API_KEY=my_super_secret_key

// app/api/data/route.js
export async function GET() {
  const res = await fetch("https://secureapi.com", {
    headers: { Authorization: `Bearer ${process.env.SECRET_API_KEY}` },
  });
  const data = await res.json();
  return Response.json(data);
}

Secret key never goes to the browser when not using NEXT_PUBLIC_ prefix.

What are some common security vulnerabilities in React apps and how do you prevent them?

1️⃣ XSS (Cross-Site Scripting):

Occurs when malicious scripts are injected into the DOM.✅ Fix:

Avoid dangerouslySetInnerHTML
Sanitize input using libraries like DOMPurify

import DOMPurify from "dompurify";

function SafeHtml({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />;
}

2️⃣ CSRF (Cross-Site Request Forgery):

Attackers trick users into making unwanted requests.✅ Fix:

Use anti-CSRF tokens (NextAuth and other libs handle this)
Validate origin headers in API routes

3️⃣ Data Leakage via Source Code:

Leaking private tokens in frontend code.✅ Fix:

Never expose secrets in NEXT_PUBLIC_ vars
Validate .env usage during CI/CD

4️⃣ Insecure Direct Object Reference (IDOR):

Users access others’ data by manipulating IDs.✅ Fix:

Always verify authorization on the server
Never trust frontend route params

How do you handle authentication securely in Next.js?

Approach 1: Using NextAuth.js

// app/api/auth/[...nextauth]/route.js
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        const res = await fetch("https://api.example.com/login", {
          method: "POST",
          body: JSON.stringify(credentials),
        });
        const user = await res.json();
        if (user?.token) return user;
        return null;
      },
    }),
  ],
  session: { strategy: "jwt" },
});

export { handler as GET, handler as POST };

Uses server-side token validation. Sessions stored as HTTP-only cookies (protects from XSS).

What are HTTP-only cookies and why are they more secure?

HttpOnly flag prevents JavaScript from reading cookies
Reduces XSS impact since scripts can’t access sensitive tokens

Example:

// Setting cookie securely
cookies().set("token", jwt, { 
  httpOnly: true, 
  secure: true, 
  sameSite: "Strict" 
});

Prevents token theft from browser scripts by making cookies inaccessible to JavaScript.

How do you handle CORS securely?

CORS controls which domains can make API requests.

Example:

// app/api/route.js
export async function GET(req) {
  return new Response("ok", {
    headers: {
      "Access-Control-Allow-Origin": "https://yourdomain.com",
      "Access-Control-Allow-Credentials": "true",
    },
  });
}

Never use ”*” for production as it allows any domain to access your API.

How do you prevent open redirects in Next.js?

Attackers could redirect users to malicious sites.✅ Fix: Validate redirect URLs before allowing them:

export async function POST(req) {
  const { redirectUrl } = await req.json();
  const safeDomains = ["example.com", "app.example.com"];
  const url = new URL(redirectUrl);

  if (!safeDomains.includes(url.hostname))
    return new Response("Invalid redirect", { status: 400 });

  return Response.redirect(redirectUrl);
}

How to secure API routes in Next.js?

Example:

import { cookies } from "next/headers";

export async function GET() {
  const token = cookies().get("token");
  if (!token) return Response.json({ error: "Unauthorized" }, { status: 401 });
  
  // verify JWT, then fetch data
  const user = await verifyToken(token.value);
  return Response.json({ data: user });
}

Authentication handled on the server, not the client.

What is CSP (Content Security Policy) and how does it protect your app?

CSP prevents malicious scripts or resources from loading.

Example:

// next.config.js
const securityHeaders = [
  {
    key: "Content-Security-Policy",
    value: "default-src 'self'; img-src *; script-src 'self'; style-src 'self';",
  },
];

module.exports = {
  async headers() {
    return [{ source: "/(.*)", headers: securityHeaders }];
  },
};

Helps prevent XSS and data injection attacks by restricting content sources.

How do you secure Next.js API endpoints with JWT?

Example:

import jwt from "jsonwebtoken";
import { cookies } from "next/headers";

export async function GET() {
  const token = cookies().get("token")?.value;
  if (!token) return Response.json({ message: "No token" }, { status: 401 });

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    return Response.json({ user: decoded });
  } catch {
    return Response.json({ message: "Invalid token" }, { status: 403 });
  }
}

Validates access at runtime using JWT verification.

How do you secure Next.js Server Actions or Route Handlers?

Example:

"use server";
import { cookies } from "next/headers";

export async function deleteUserAccount() {
  const token = cookies().get("token");
  if (!token) throw new Error("Unauthorized");

  // call backend securely
  await deleteAccountFromDatabase();
}

Server actions run on the server only, so secrets remain safe.

What are some best practices for secure React + Next.js apps?

Category	Best Practice
🔐 Authentication	Use JWT or NextAuth with HttpOnly cookies
🔑 Secrets	Store in .env.local, never in client
🧱 XSS	Sanitize HTML, avoid dangerouslySetInnerHTML
🔄 CSRF	Use anti-CSRF tokens or same-site cookies
🧭 Routing	Validate redirect URLs
🧰 Packages	Audit dependencies with `npm audit`
⚙️ Headers	Set CSP, X-Frame-Options, Strict-Transport-Security
📦 API	Rate limit requests and validate input
📡 HTTPS	Always use SSL in production

Regular security audits and dependency updates are essential for maintaining application security.

11. Node.js Advanced Topics

What is Node.js?

Node.js is a JavaScript runtime built on V8 engine, enabling server-side JavaScript. Features: event-driven, non-blocking I/O, single-threaded event loop, NPM ecosystem.

Explain the Node.js Event Loop. How does it handle asynchronous operations?

Node.js is single-threaded, but it handles concurrency using the event loop, which is part of the libuv library. The event loop allows Node.js to perform non-blocking I/O operations, even though JavaScript runs on a single thread.

Event Loop Phases (TCCPPI)

Timers – Executes callbacks from setTimeout() and setInterval()
Pending Callbacks – Executes I/O callbacks deferred from the previous cycle
Idle / Prepare – Internal use
Poll – Retrieves new I/O events; executes their callbacks
Check – Executes callbacks from setImmediate()
Close Callbacks – Executes callbacks like socket.on('close')

Example

setTimeout(() => console.log("Timeout"), 0);
setImmediate(() => console.log("Immediate"));
process.nextTick(() => console.log("NextTick"));
console.log("Sync");

Output:

Sync
NextTick
Timeout
Immediate

Why this order?

process.nextTick() runs before the event loop continues
Timers (setTimeout) are queued for the Timers phase
setImmediate() runs during the Check phase

When to use:

Use process.nextTick() for micro-tasks after the current operation
Use setImmediate() for tasks after I/O events are processed

What is the difference between process.nextTick() and setImmediate()?

Both schedule asynchronous callbacks, but they run at different times in the event loop.

process.nextTick() executes before the event loop continues — a micro-task
setImmediate() executes after the current poll phase — a macro-task

Example:

console.log('Start');
process.nextTick(() => console.log('Next Tick'));
setImmediate(() => console.log('Immediate'));
console.log('End');

Output:

Start
End
Next Tick
Immediate

When to use:

Use process.nextTick() for quick callbacks that must run before I/O
Use setImmediate() when you want to yield to I/O first to prevent blocking

Explain how Node.js handles non-blocking I/O

Node.js uses libuv, a C library providing an event-driven, non-blocking I/O model. I/O operations (file read, network calls, etc.) are delegated to the OS kernel or libuv’s thread pool, so Node’s main thread stays free to handle other tasks.

Example:

const fs = require('fs');

console.log('Start');
fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log('File read complete');
});
console.log('End');

Output:

Start
End
File read complete

Why:

The file read happens asynchronously; Node doesn’t block waiting for it.

Where/When:

Used in high-throughput systems — e.g., API gateways, chat apps — where many concurrent requests are served without thread blocking.

What are Streams in Node.js?

Streams are continuous data flows — they let you process data chunk by chunk instead of loading it all into memory. They’re instances of the EventEmitter class.

Types of Streams:

Readable – e.g. fs.createReadStream()
Writable – e.g. fs.createWriteStream()
Duplex – both readable and writable (e.g. TCP socket)
Transform – modifies data while reading/writing (e.g. zlib compression)

Example:

const fs = require('fs');
const read = fs.createReadStream('input.txt');
const write = fs.createWriteStream('output.txt');

read.pipe(write);

Why:

Efficient for large files or live data (video, logs)
Uses constant memory regardless of file size

Where:

File uploads/downloads
Real-time data transfer
Log streaming

What is the difference between spawn, fork, and exec in Node.js?

Method	Description	Use Case
spawn	Launches a new process	For long-running or streaming output
exec	Launches a process and buffers entire output	For small output commands
fork	Special case of spawn that runs a Node.js script with IPC	For creating worker processes

Example:

const { spawn, exec, fork } = require('child_process');

// spawn example
const ls = spawn('ls', ['-lh', '/usr']);
ls.stdout.on('data', data => console.log(`Spawn output: ${data}`));

// exec example
exec('ls -lh /usr', (err, stdout) => console.log(`Exec output: ${stdout}`));

// fork example
const child = fork('./worker.js');
child.on('message', msg => console.log('Message from child:', msg));

Why/When/Where:

Use spawn for streaming output (e.g., logs)
Use exec when you need full command output as a string
Use fork for scaling CPU-bound tasks or worker threads

What are Worker Threads and how do they differ from the Event Loop?

Worker Threads allow multi-threading in Node.js for CPU-intensive tasks, unlike the single-threaded event loop.

Example:

const { Worker, isMainThread, parentPort } = require('worker_threads');

if (isMainThread) {
  const worker = new Worker(__filename);
  worker.on('message', msg => console.log('Received:', msg));
} else {
  parentPort.postMessage('Hello from Worker');
}

Why:

To offload heavy computations (e.g. image processing, encryption) so they don’t block the main event loop.

Where:

In apps with mixed I/O and CPU workloads, like video encoding servers.

How do you handle uncaught exceptions and unhandled promise rejections?

You should always handle unexpected errors globally, but never rely solely on them — they indicate bugs that should be fixed.

Example:

process.on('uncaughtException', (err) => {
  console.error('Uncaught Exception:', err);
  process.exit(1); // Restart service safely
});

process.on('unhandledRejection', (reason) => {
  console.error('Unhandled Promise Rejection:', reason);
});

Why:

Prevents app from crashing unexpectedly and allows logging/restarting.

When/Where:

Use this for graceful shutdown and to catch programming mistakes in production.

Explain Cluster Mode in Node.js and how it helps in scaling

Cluster mode allows you to spawn multiple Node.js processes (workers) to utilize multi-core CPUs. Each worker runs a separate instance of your app and shares the same server port via IPC managed by the cluster module.

Example:

const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;

if (cluster.isPrimary) {
  for (let i = 0; i < numCPUs; i++) cluster.fork();
  cluster.on('exit', (worker) => cluster.fork());
} else {
  http.createServer((req, res) => {
    res.end(`Handled by worker ${process.pid}`);
  }).listen(3000);
}

Why:

Single Node.js process uses only one CPU core
Cluster mode scales horizontally across all cores

Where:

Used in production APIs — e.g., Express servers, GraphQL APIs — to handle more traffic efficiently.

How does Node.js handle memory management?

Node.js uses V8’s garbage collector, which manages heap memory automatically, but developers must avoid leaks.

Common causes of leaks:

Global variables
Unclosed timers or listeners
Caching large data objects indefinitely

Example Leak:

const cache = {};
setInterval(() => {
  cache[Math.random()] = new Array(1000000).join('x');
}, 1000);

Fix: Use WeakMap, clear intervals, or implement LRU caches.

When/Where:

Monitor memory with tools like:

--inspect + Chrome DevTools
clinic.js, heapdump, node --trace-gc

What are Buffers in Node.js?

Buffers are binary data containers — used to handle raw data (files, streams, sockets) that can’t be represented as strings.

Example:

const buf = Buffer.from('Hello');
console.log(buf); // <Buffer 48 65 6c 6c 6f>
console.log(buf.toString()); // 'Hello'

Why:

Buffers allow manipulation of binary data efficiently (e.g., file systems, TCP streams).

Where:

Used in file operations, network protocols, and binary serialization.

What are Modules in Node.js and how are they resolved?

Node.js uses CommonJS (require) and ES Modules (import) systems.

Example:

// math.js
module.exports.add = (a, b) => a + b;

// app.js
const { add } = require('./math');
console.log(add(2, 3));

Module Resolution Order:

Core modules (fs, path)
Local files (./, ../)
node_modules directory

Why:

Encapsulation of code — prevents global scope pollution.

Where:

Used in all Node.js apps; ES Modules preferred for modern codebases.

How do you structure a large-scale Node.js application?

Large Node.js applications need modular, layered architecture to keep code organized and maintainable.

Common Structure:

src/
 ┣ config/          # Environment variables, constants
 ┣ modules/
 ┃ ┣ user/
 ┃ ┃ ┣ user.controller.js
 ┃ ┃ ┣ user.service.js
 ┃ ┃ ┣ user.model.js
 ┃ ┃ ┣ user.routes.js
 ┣ middlewares/
 ┣ utils/
 ┣ app.js
 ┣ server.js

Layers Explained:

Controller: Handles request/response (HTTP logic)
Service: Business logic
Model: Database schema and queries
Middleware: Reusable pre-processing (auth, validation)
Routes: Maps endpoints to controllers

Why:

Improves separation of concerns
Enables unit testing per layer
Simplifies onboarding and scalability

Where/When:

Used in all enterprise-level Node.js APIs or microservices where team collaboration and modularization are essential.

What are some common design patterns used in Node.js?

Node.js heavily uses asynchronous and modular design patterns.

Key Patterns:

Pattern	Description	Example	Use Case
Singleton	Single shared instance	DB connection pool	Database connections
Factory	Creates objects dynamically	Model creation	Dynamic service instantiation
Observer	Event-driven	EventEmitter	Real-time systems
Middleware	Chain of functions	Express middlewares	API requests
Repository	Abstract data layer	Repository class	Decoupled DB logic
Decorator	Adds behavior without altering	Wrapping services	Logging, caching

Singleton Pattern Example:

class Database {
  constructor() {
    if (Database.instance) return Database.instance;
    this.connection = this.connect();
    Database.instance = this;
  }
  connect() {
    console.log("DB connected");
    return {};
  }
}
const db1 = new Database();
const db2 = new Database();
console.log(db1 === db2); // true

Why: Ensures only one DB connection exists across the app
When: Use for connection pools, config objects, caches

Factory Pattern Example:

class Payment {
  process() {}
}

class Paypal extends Payment {
  process() { console.log("PayPal Payment"); }
}

class Stripe extends Payment {
  process() { console.log("Stripe Payment"); }
}

class PaymentFactory {
  static create(type) {
    if (type === "paypal") return new Paypal();
    if (type === "stripe") return new Stripe();
  }
}

const payment = PaymentFactory.create("paypal");
payment.process(); // PayPal Payment

Why: Avoids tight coupling between code and object types
When: Use for service selection (e.g., multiple gateways, APIs)

What is MVC (Model-View-Controller) and how is it used in Node.js?

MVC separates your application into:

Model: Manages data and database operations
View: Renders UI (in REST APIs, often JSON)
Controller: Handles requests, uses Model to get data, and sends responses

Example:

// user.model.js
export const User = mongoose.model('User', new Schema({ name: String }));

// user.controller.js
import { User } from './user.model.js';
export const getUsers = async (req, res) => {
  const users = await User.find();
  res.json(users);
};

// user.routes.js
router.get('/users', getUsers);

Why:

Encourages separation of concerns, clean testing, and reusability.

Where/When:

Common in Express-based web APIs and server-rendered apps.

How would you design a scalable microservices architecture in Node.js?

Microservices = small, independent services communicating via APIs or message queues.

Key Components:

Each service has own database, own deployment
Communication via REST, gRPC, or message queues (e.g., RabbitMQ, Kafka)
Use API Gateway for centralized routing/auth

Example Setup:

user-service      → handles users
order-service     → handles orders
payment-service   → handles payments
api-gateway       → routes and aggregates requests

Example Communication:

// user-service calls order-service via REST
const axios = require('axios');
const orders = await axios.get(`http://order-service/orders?userId=${userId}`);

Why:

Independent scaling and deployment
Easier fault isolation
Better for large teams or multi-domain systems

When/Where:

Used in enterprise systems (e.g., eCommerce, SaaS) where modularity and scaling are critical.

How do microservices communicate with each other?

Node.js microservices can communicate via:

Type	Example	Use Case
Synchronous (Request-Response)	REST, gRPC	Real-time data
Asynchronous (Event-driven)	RabbitMQ, Kafka, Redis Pub/Sub	Decoupled systems

Asynchronous Messaging Example (RabbitMQ):

const amqp = require('amqplib');

(async () => {
  const conn = await amqp.connect('amqp://localhost');
  const channel = await conn.createChannel();
  await channel.assertQueue('orderQueue');
  channel.sendToQueue('orderQueue', Buffer.from('New order created'));
})();

Why:

Async messaging improves resilience and fault tolerance.

When/Where:

Use async communication when loose coupling is desired (e.g., sending notifications after order creation).

Explain Repository Pattern and why it's useful

Repository Pattern abstracts database logic into a single layer, separating it from business logic.

Example:

// user.repository.js
export class UserRepository {
  async findByEmail(email) {
    return User.findOne({ email });
  }
}

// user.service.js
const repo = new UserRepository();
const user = await repo.findByEmail(req.body.email);

Why:

Makes business logic database-agnostic
Simplifies unit testing (mock repositories)
Promotes clean architecture

When/Where:

Used in large teams where database changes should not affect business logic.

What is Dependency Injection and how can it be applied in Node.js?

Dependency Injection (DI) means passing dependencies (services, repositories, etc.) into classes/functions instead of creating them inside.

Example:

class EmailService {
  send(email, msg) { console.log(`Email sent to ${email}`); }
}

class UserController {
  constructor(emailService) {
    this.emailService = emailService;
  }
  register(user) {
    this.emailService.send(user.email, "Welcome!");
  }
}

const emailService = new EmailService();
const userController = new UserController(emailService);

Why:

Enables loose coupling and easier testing
Supports inversion of control

When/Where:

Used in testable architectures, e.g., NestJS framework (which has DI built-in).

How do you handle configuration management in Node.js across environments?

Store configurations separately for each environment (dev, staging, prod).

Example Structure:

config/
 ┣ default.json
 ┣ development.json
 ┣ production.json

Use libraries like dotenv or config.

Example with dotenv:

require('dotenv').config();
console.log(process.env.DB_HOST);

Why:

Keeps secrets out of source code
Easier environment portability

Where/When:

In CI/CD pipelines and multi-environment deployments (e.g., AWS, Docker).

What is a layered architecture in backend design?

Layered architecture separates the backend into logical layers — each with its responsibility.

Typical Layers:

Presentation (Controller) – Handles requests
Business (Service) – Contains logic
Data (Repository) – Handles persistence
Integration (External APIs) – Handles external comms

Example Flow:

Controller → Service → Repository → Database

Why:

Makes the system modular, testable, and maintainable

Where:

Used in enterprise backends and API-first architectures.

How would you handle versioning in REST APIs?

Versioning allows you to introduce new features without breaking old clients.

Ways to Version:

URL-based: /api/v1/users
Header-based: Accept: application/vnd.api.v2+json
Query-based: /users?version=2

Example:

app.use('/api/v1', v1Routes);
app.use('/api/v2', v2Routes);

Why:

Maintains backward compatibility and smooth client migration.

When/Where:

Use when rolling out breaking API changes.

Explain how you'd implement CQRS (Command Query Responsibility Segregation)

CQRS separates read and write operations into different models/services.

Example:

// Command (write)
POST /orders → creates order in DB

// Query (read)
GET /orders/:id → reads from optimized read model or cache

Why:

Improves scalability (writes and reads can scale independently)
Enables event sourcing and audit trails

Where/When:

Used in financial, e-commerce, and high-scale event systems.

What are modules in Node.js and why are they important?

Modules in Node.js are reusable blocks of code that encapsulate functionality. They help in organizing code into manageable, independent components.

Node.js supports three main types of modules:

Core Modules (built-in) → e.g., fs, path, http
Local Modules → custom files in your app
Third-party Modules → installed from npm (e.g., express, lodash)

Example:

// math.js (Local module)
function add(a, b) {
  return a + b;
}
module.exports = { add };

// app.js
const { add } = require('./math');
console.log(add(5, 10));

Why:

To promote reusability and separation of concerns. Without modules, everything would live in one file, making maintenance and testing hard.

When:

Use modules when splitting logic — routes, services, utilities, models, etc.

Where:

Common in every medium to large-scale Node.js app, especially with MVC or layered architecture.

Explain the difference between CommonJS (require) and ES Modules (import)

Feature	CommonJS (require)	ES Modules (import)
Loading	Synchronous	Asynchronous
Syntax	`const x = require('x')`	`import x from 'x'`
Scope	Wrapped in function	Strict top-level
Default in	Node.js before v14	Modern Node.js (with “type”: “module”)

Example:

// CommonJS
const express = require('express');

// ES Module
import express from 'express';

Why:

ESM is the modern standard (tree-shaking, async loading, static analysis).

When:

Use CommonJS in legacy or mixed codebases
Use ESM for modern projects (especially with TypeScript or Next.js APIs)

Where:

Configured via package.json → "type": "module"

What is the difference between MVC and layered architecture in Node.js?

Concept	MVC	Layered Architecture
Pattern	Model–View–Controller	Request–Controller–Service–Repository
Purpose	Web apps with UI	APIs and backend systems
Focus	Separation of UI and logic	Logical separation by responsibility

Example Layered Architecture Flow:

Request → Controller → Service → Repository → Database

// userController.js
const userService = require('../services/userService');
exports.getUser = async (req, res) => {
  const user = await userService.getById(req.params.id);
  res.json(user);
};

// userService.js
const userRepo = require('../repositories/userRepo');
exports.getById = async (id) => await userRepo.findById(id);

Why:

Each layer has a single responsibility — easy to test and change independently.

When:

For scalable APIs and microservices.

Where:

Used in enterprise Node.js apps (Express, NestJS, Fastify-based systems).

How do you manage environment variables in Node.js?

Using dotenv or process.env to manage secrets and configurations per environment (dev, staging, production).

Example:

# .env file
PORT=5000
DB_URI=mongodb://localhost:27017/mydb

// config.js
require('dotenv').config();
module.exports = {
  port: process.env.PORT,
  db: process.env.DB_URI,
};

Why:

Keeps sensitive data (like DB passwords, API keys) out of code.

When:

Always use environment variables for configuration.

Where:

process.env → globally accessible
Used in CI/CD pipelines, Docker, Kubernetes secrets, etc.

What is dependency injection and why is it useful in Node.js architecture?

Dependency Injection (DI) is a design pattern where dependencies are injected into a module instead of being hardcoded inside it.

Example:

// Without DI:
const userRepo = require('./userRepo');
exports.getUser = () => userRepo.findAll();

// With DI:
module.exports = (userRepo) => ({
  getUser: () => userRepo.findAll(),
});

Why:

Makes testing easier (can inject mocks)
Improves flexibility and maintainability

When:

Used heavily in frameworks like NestJS or in test-driven architectures.

Where:

Service layers, repositories, utilities, or external integrations.

How do you handle circular dependencies in Node.js modules?

A circular dependency occurs when two modules depend on each other directly or indirectly.

Example:

// a.js
const b = require('./b');
module.exports = { name: 'A' };

// b.js
const a = require('./a');
module.exports = { name: 'B' };

This can cause incomplete exports or undefined values.

Solution:

Refactor shared logic into a new module
Use dependency injection
Lazy-load the dependency inside a function

// a.js - Lazy loading solution
function getB() {
  const b = require('./b');
  return b.name;
}

Why:

To prevent runtime bugs due to incomplete module initialization.

When:

When modules reference each other’s exports.

Where:

Common in large codebases with intertwined controllers/services.

How do you organize routes in an Express application?

Split routes by feature or module to avoid one large routes file.

Example:

// routes/userRoutes.js
const express = require('express');
const router = express.Router();
const userController = require('../controllers/userController');

router.get('/', userController.getAllUsers);
router.post('/', userController.createUser);

module.exports = router;

// app.js
const express = require('express');
const app = express();
app.use('/users', require('./routes/userRoutes'));

Why:

Keeps routing organized and readable.

When:

As soon as routes exceed 4–5 endpoints.

Where:

Used in all Express/Fastify REST APIs.

What are 'config', 'utils', and 'helpers' folders used for?

Folder	Purpose	Example
config	Centralized configurations	DB, environment setup
utils	Reusable functions	formatters, loggers, date handlers
helpers	Request-specific helper logic	validation, response shaping

Example:

// utils/logger.js
module.exports = (msg) => console.log(`[LOG]: ${msg}`);

Why:

Encourages DRY (Don’t Repeat Yourself) coding.

When:

Used in any mid-size project to centralize repetitive logic.

Where:

Globally accessible via imports across layers.

How do you separate concerns in a Node.js microservice architecture?

In microservices:

Each service owns a single business domain
Communicates via APIs, queues, or message brokers (e.g., RabbitMQ, Kafka)
Uses its own database

Example Architecture:

/user-service
/order-service
/notification-service

Each runs independently and communicates via REST or async queues.

Why:

To achieve scalability, fault isolation, and independent deployment.

When:

When the app grows large and needs distributed scaling.

Where:

Used in large enterprise systems (e.g., Uber, Netflix architectures).

12. Node.js Testing and Debugging

Why is testing important in backend development, and what types of testing do you perform in Node.js projects?

Testing ensures your application works as expected, remains stable during code changes, and helps catch bugs early before deployment.

Types of testing in Node.js:

Unit Testing – Tests individual functions or modules
- Tools: Jest, Mocha, Chai
- Example: testing a utility function like calculateTax()
Integration Testing – Tests multiple components working together
- Example: testing API endpoints interacting with database and services
End-to-End (E2E) Testing – Simulates real user scenarios
- Tools: Supertest, Cypress
Regression Testing – Ensures new code doesn’t break existing functionality
Performance / Load Testing – Evaluates API performance under stress
- Tools: Artillery, K6

Why:

Improves code reliability and confidence in deployment.

When:

After each module development or before merging into main branch.

Where:

Applied across APIs, database queries, and business logic layers.

What is Unit Testing and how do you implement it in Node.js?

Unit testing focuses on testing individual functions or components in isolation.

Why:

To verify that each unit of your code performs as intended without depending on external systems.

When:

During development or before integration.

Example using Jest:

// tax.js
function calculateTax(amount) {
  if (amount <= 0) return 0;
  return amount * 0.1;
}
module.exports = calculateTax;

// tax.test.js
const calculateTax = require('./tax');

test('should calculate 10% tax', () => {
  expect(calculateTax(100)).toBe(10);
});

test('should return 0 for invalid amount', () => {
  expect(calculateTax(-50)).toBe(0);
});

Where:

Stored inside a __tests__ folder or with .test.js extension inside the same module directory.

How do you test API endpoints in a Node.js app?

Use Supertest (with Jest or Mocha) to test your Express APIs.

Why:

It performs real HTTP requests to your routes and verifies the response.

Example:

const request = require('supertest');
const app = require('../app');

describe('GET /users', () => {
  it('should return all users', async () => {
    const res = await request(app).get('/users');
    expect(res.statusCode).toEqual(200);
    expect(Array.isArray(res.body)).toBe(true);
  });
});

When:

Run after every build or deploy via CI/CD pipelines.

Where:

Tests are usually stored in /tests/api or /__integration__/.

How do you mock external dependencies or services during testing?

Use mocking to isolate your code from external APIs, databases, or modules.

Why:

To ensure tests run fast, deterministically, and don’t depend on network or environment.

When:

When your code calls APIs, databases, or third-party SDKs.

Example using Jest Mocks:

// userService.js
const axios = require('axios');
async function getUser(id) {
  const res = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
  return res.data;
}
module.exports = getUser;

// userService.test.js
jest.mock('axios');
const axios = require('axios');
const getUser = require('./userService');

test('should return mocked user', async () => {
  axios.get.mockResolvedValue({ data: { id: 1, name: 'John' } });
  const user = await getUser(1);
  expect(user.name).toBe('John');
});

Where:

In any module that uses third-party dependencies like AWS SDK, Stripe, or Axios.

How do you debug a Node.js application?

Debugging helps track down bugs, performance issues, and unexpected behaviors.

Common methods:

Console logging: Quick and easy but not ideal for large projects.
```
console.log('User:', user);
```
Node Inspector / Chrome DevTools: Run app with:
```
node --inspect app.js
```
Then open chrome://inspect → Attach debugger → Add breakpoints.

VS Code Debugger: Add a launch.json config:

{
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/app.js"
}

PM2 Logs: For production debugging:
```
pm2 logs
```

When:

During development or after reproducing a bug reported from QA.

Where:

You can debug application logic, event loops, or async operations.

How do you handle errors gracefully in Node.js applications?

Use structured error handling so the system remains stable even when exceptions occur.

Why:

Uncaught exceptions can crash the server.

Example (Async/Await):

app.get('/user/:id', async (req, res, next) => {
  try {
    const user = await User.findById(req.params.id);
    if (!user) throw new Error('User not found');
    res.json(user);
  } catch (err) {
    next(err);
  }
});

// global error handler
app.use((err, req, res, next) => {
  console.error(err.message);
  res.status(500).json({ error: err.message });
});

When:

Apply globally via middleware for every route.

Where:

At controller level or in a centralized error handler.

What are some common debugging tools or libraries used in Node.js?

Node.js Inspector – built-in debugger for step-through debugging
Chrome DevTools – UI-based debugging
VS Code Debugger – integrated IDE tool
PM2 – process manager for logs and metrics
Clinic.js – performance profiler
Winston / Pino – structured logging libraries

Why:

They help in isolating performance bottlenecks, memory leaks, and runtime errors.

Where:

Use locally (VS Code/Chrome) or in production (PM2, Winston).

How do you ensure test coverage and integrate testing into CI/CD?

Test coverage measures how much of your code is executed during tests.

Tool: Jest provides built-in coverage reports.

jest --coverage

This outputs:

Statements   : 92%
Branches     : 85%
Functions    : 90%
Lines        : 93%

CI/CD Integration (GitHub Actions example):

name: Node.js CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm install
      - run: npm test -- --coverage

Why:

Automatically ensures all commits pass tests before merging.

When:

Triggered on every pull request or push to main branch.

How do you debug a memory leak in Node.js?

Memory leaks occur when memory is allocated but never freed.

Detection Steps:

Monitor heap usage:

setInterval(() => console.log(process.memoryUsage()), 5000);

Use Chrome DevTools:
- Run node --inspect
- Open Heap Snapshots → Compare over time
Use Clinic.js or Memwatch-next

Common causes:

Global variables
Unclosed timers
Unreleased event listeners

Fix:

Use WeakMap for temporary references
Remove listeners:
```
emitter.removeAllListeners();
```
Close database connections

13. Database Design

How do you decide between SQL and NoSQL for a project?

It depends on data structure, relationships, and query patterns.

SQL (Relational)	NoSQL (Document/Key-Value)
Structured schema (tables, columns)	Flexible schema (JSON, documents)
Strong relationships (JOINs)	Denormalized, nested data
ACID transactions	Eventual consistency
Example: PostgreSQL, MySQL	Example: MongoDB, DynamoDB

Example Use Cases:

SQL: Financial systems, HR platforms (strong relationships)
NoSQL: E-commerce product catalogs, social feeds (flexible schema)

Why:

SQL enforces strict integrity, NoSQL provides scalability.

When:

Choose SQL when data relations are strong; NoSQL for fast-growing, schema-less data.

Where:

SQL → transactional layer; NoSQL → analytics or caching layer.

Explain normalization and denormalization. When would you use each?

Normalization: Process of organizing data to reduce redundancy and improve consistency
Denormalization: Combining related data into a single structure to improve read performance

Example:

Normalized (two tables):

Users: (id, name)
Orders: (id, user_id, product)

Denormalized (single collection in MongoDB):

{
  "userId": 1,
  "name": "Ali",
  "orders": [
    { "product": "Laptop" },
    { "product": "Mouse" }
  ]
}

Why:

Normalization improves consistency; denormalization improves read speed.

When:

Normalize for frequent writes, denormalize for heavy reads.

Where:

E.g., OLTP → normalized; OLAP/NoSQL → denormalized.

What is an index? How does it improve performance, and when can it hurt?

An index is a data structure (like a B-tree or hash) that allows fast lookups on columns or fields.

Example (MongoDB & SQL):

// MongoDB
db.users.createIndex({ email: 1 });

// SQL
CREATE INDEX idx_email ON users(email);

Why:

It avoids full collection/table scans.

When:

Use on frequently filtered or sorted fields (like email, createdAt).

Where:

Use on read-heavy collections/tables.

Indexes slow down writes (inserts/updates) and increase memory usage. Avoid over-indexing — only index what you query often.

Explain transactions in databases. How are they handled in Node.js?

A transaction ensures a group of operations succeeds or fails as one unit (ACID — Atomicity, Consistency, Isolation, Durability).

Example (PostgreSQL with Sequelize):

const t = await sequelize.transaction();

try {
  await User.create({ name: 'Ali' }, { transaction: t });
  await Order.create({ userId: 1, product: 'Phone' }, { transaction: t });
  await t.commit();
} catch (err) {
  await t.rollback();
}

Why:

Prevents partial updates when one step fails.

When:

Use for multi-table or dependent operations (e.g., payments, inventory).

Where:

Implement in service layer functions handling multi-step DB operations.

How do you optimize slow database queries?

Step-by-step approach:

Use EXPLAIN or explain() to inspect query execution plan
Add proper indexes
Avoid SELECT *; specify columns
Paginate large queries
Cache repetitive queries

Example (MongoDB):

db.orders.find({ status: 'completed' }).explain('executionStats');

Example (Redis caching):

const cached = await redis.get('orders');
if (cached) return JSON.parse(cached);

const data = await Order.find({ status: 'completed' });
await redis.setEx('orders', 3600, JSON.stringify(data));

Why:

Optimized queries save cost and improve API response times.

When:

Apply during scaling or under heavy load.

Where:

Inside data-access layer (repositories).

What are database relationships and how do you handle them in Node.js?

Common types:

One-to-One: User ↔ Profile
One-to-Many: User → Orders
Many-to-Many: Students ↔ Courses

Example (MongoDB - embedding vs referencing):

// Referencing (normalized)
const order = { userId: ObjectId("..."), product: "Laptop" };

// Embedding (denormalized)
const user = { name: "Ali", orders: [{ product: "Laptop" }] };

Why:

Embedding improves read speed; referencing saves space.

When:

Embed for frequent reads; reference for frequent writes.

Where:

Schema design phase, based on access patterns.

How do you handle pagination efficiently?

Offset-based (SQL):

SELECT * FROM orders LIMIT 10 OFFSET 20;

Cursor-based (MongoDB or large datasets):

db.orders.find({ _id: { $gt: lastId } }).limit(10);

Why:

Offset is simple but inefficient for large data; cursor-based is faster.

When:

Cursor-based for infinite scrolling or APIs.

Where:

Implement in API layer — GET /orders?cursor=<id>

What are database migrations and why are they important?

Migrations are version control for your database schema.

Example (with Sequelize):

npx sequelize migration:generate --name add_isActive_to_users

Example (migration file):

export async function up(queryInterface, Sequelize) {
  await queryInterface.addColumn('Users', 'isActive', Sequelize.BOOLEAN);
}

Why:

Ensures consistent schema across environments (dev, staging, prod).

When:

Whenever adding/removing/modifying columns or constraints.

Where:

Stored in /migrations folder, managed by ORM/CLI.

How do you scale databases in high-traffic applications?

Techniques:

Read replicas — offload read traffic
Sharding — partition data by key (e.g., userId)
Caching — Redis/Memcached for frequent reads
Connection pooling — reuse DB connections

Example:

const pool = new Pool({
  max: 10, // limit active connections
  idleTimeoutMillis: 30000,
});

Why:

Prevents bottlenecks under high load.

When:

Beyond 10k+ users or concurrent reads.

Where:

Database + ORM configuration level.

How do you ensure data consistency in distributed systems?

Consistency ensures all services see the same data.

Patterns:

Two-phase commit (2PC) for strict consistency
Eventual consistency for scalability
Sagas pattern for distributed transactions

Example (Sagas):

// Place order -> reduce stock -> charge payment
// If payment fails -> rollback stock -> cancel order

Why:

Keeps data correct even across microservices.

When:

In event-driven or microservice architectures.

Where:

Implement at service orchestration level.

What are ACID and BASE principles?

ACID (SQL)	BASE (NoSQL)
Atomicity	Basically Available
Consistency	Soft-state
Isolation	Eventual consistency
Durability

Why:

ACID ensures reliable transactions; BASE ensures availability at scale.

When:

Use ACID for critical systems (banking), BASE for high-volume systems (social media).

Where:

Choose based on business priority: consistency vs availability.

14. API Design & Best Practices

What are RESTful APIs and their main principles?

REST (Representational State Transfer) is an architectural style for building scalable web services that communicate over HTTP.

Core Principles:

Statelessness → Server doesn’t store client state between requests
Uniform Interface → Consistent structure for all endpoints (/users, /products)
Client-Server Separation → Independent evolution of frontend & backend
Cacheable → Responses can be cached for performance
Layered System → Requests pass through intermediaries like load balancers or proxies

Example:

// RESTful Routes
GET    /users          // Fetch users
POST   /users          // Create user
GET    /users/:id      // Get user by ID
PUT    /users/:id      // Update user
DELETE /users/:id      // Delete user

Why:

REST’s simplicity makes it ideal for large-scale distributed systems.

When:

Use for stateless communication (e.g., SaaS apps).

Where:

Commonly implemented with Express.js or NestJS.

How would you design an API for scalability and maintainability?

Follow best practices:

Use modular folder structure:

src/
  controllers/
  routes/
  services/
  models/
  middlewares/

Follow Controller-Service-Repository pattern
Use async/await and central error handling
Add pagination, filtering, sorting

Example:

// Controller
export const getUsers = async (req, res, next) => {
  const { page = 1, limit = 10 } = req.query;
  const users = await userService.getAll({ page, limit });
  res.json(users);
};

Why:

Separation of concerns ensures scalability and testability.

When:

For medium to large projects.

Where:

Apply across all route modules for consistency.

What's the difference between PUT and PATCH?

Method	Purpose	Example
PUT	Replace the entire resource	`{ "name": "Ali", "email": "[email protected]" }`
PATCH	Update part of a resource	`{ "email": "[email protected]" }`

Example:

app.patch('/users/:id', async (req, res) => {
  const user = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(user);
});

Why:

Use PATCH for partial updates to avoid overwriting data.

When:

Frontend sends only changed fields.

Where:

In APIs supporting user profile updates, etc.

How do you handle errors and validation in REST APIs?

Centralized error handling ensures cleaner code and consistent responses.

Example:

// Middleware
function errorHandler(err, req, res, next) {
  res.status(err.status || 500).json({ message: err.message });
}

// Controller
if (!email) throw { status: 400, message: 'Email is required' };

// Validation (Zod / Joi / Express Validator):
import { z } from 'zod';
const userSchema = z.object({ email: z.string().email(), password: z.string().min(6) });
userSchema.parse(req.body);

Why:

Prevents invalid or unsafe input.

When:

Before DB operations or external API calls.

Where:

Middleware or controller level.

How do you handle versioning in APIs?

API versioning ensures backward compatibility when updating endpoints.

Methods:

URL versioning (most common):
```
/api/v1/users
/api/v2/users
```
Header versioning:
```
Accept: application/vnd.myapp.v2+json
```

Example:

app.use('/api/v1', v1Routes);
app.use('/api/v2', v2Routes);

Why:

Prevents breaking changes for existing clients.

When:

On major updates or endpoint restructuring.

Where:

Route definition layer.

How would you secure an API?

Authentication & Authorization (JWT, OAuth2)
Input validation (prevent SQL/NoSQL injection)
Rate limiting (prevent brute-force)
CORS control
HTTPS for encryption

Example (rate limiting):

import rateLimit from 'express-rate-limit';
app.use(rateLimit({ windowMs: 15 * 60 * 1000, max: 100 }));

Why:

Prevents abuse, leaks, and attacks.

When:

Always — security should be baked in early.

Where:

Applied globally or per route.

What are idempotent methods in REST APIs?

An idempotent method gives the same result even if called multiple times.

Method	Idempotent?	Example
GET	✅ Yes	Fetching user
PUT	✅ Yes	Updating same data
DELETE	✅ Yes	Deleting same resource again
POST	❌ No	Creates a new record each time

Example:

DELETE /users/5
// Returns 204 No Content even if user was already deleted

Why:

Idempotency ensures reliability in retry scenarios.

When:

Especially in payment APIs or distributed systems.

Where:

Route and controller logic level.

How would you design pagination, filtering, and sorting?

Example:

GET /products?page=2&limit=10&sort=price:desc&category=shoes

Implementation:

const { page = 1, limit = 10, sort, category } = req.query;
const filter = category ? { category } : {};
const products = await Product.find(filter)
  .skip((page - 1) * limit)
  .limit(limit)
  .sort(sort.replace(':', ' '));

Why:

Enhances performance and user experience.

When:

For list-based data (users, products, posts).

Where:

In every list API endpoint.

How do you document APIs effectively?

Use OpenAPI/Swagger for auto-generated documentation.

Example:

npm install swagger-ui-express swagger-jsdoc

import swaggerUi from 'swagger-ui-express';
import swaggerJsDoc from 'swagger-jsdoc';

const specs = swaggerJsDoc({
  definition: { openapi: '3.0.0', info: { title: 'API Docs', version: '1.0.0' } },
  apis: ['./routes/*.js'],
});
app.use('/docs', swaggerUi.serve, swaggerUi.setup(specs));

Why:

Improves onboarding and collaboration with frontend teams.

When:

As soon as APIs are stable.

Where:

Separate /docs route.

How would you handle rate limiting and throttling?

Rate limiting: restricts number of requests per user/IP
Throttling: delays excessive requests

Example (Redis-based):

import rateLimit from 'express-rate-limit';
app.use('/api', rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100,
  message: 'Too many requests, try again later.',
}));

Why:

Prevents DDoS and API abuse.

When:

For login or public APIs.

Where:

At gateway or middleware layer.

What are some common API response codes and their meanings?

Code	Meaning	Use Case
200	OK	Successful GET
201	Created	Resource created (POST)
204	No Content	Successful DELETE
400	Bad Request	Validation error
401	Unauthorized	Missing/invalid token
403	Forbidden	Access denied
404	Not Found	Resource doesn’t exist
500	Internal Server Error	Unexpected error

Example:

res.status(201).json({ message: 'User created successfully' });

Why:

Clear status codes improve debugging and API usability.

When:

Always respond with meaningful HTTP codes.

Where:

Controller layer.

When would you choose GraphQL over REST?

REST	GraphQL
Multiple endpoints	Single endpoint `/graphql`
Fixed response shape	Client defines response
Over-fetching common	Fetch only needed fields
Simpler caching	Complex but flexible queries

Example:

// GraphQL query
query {
  user(id: "1") {
    name
    posts {
      title
    }
  }
}

Why:

GraphQL avoids under/over-fetching.

When:

For complex UIs needing custom data shapes (like dashboards).

Where:

Use Apollo Server or Yoga with Node.js.

15. Caching and Performance Optimization

What is caching and why is it important in Node.js applications?

Caching is the process of storing frequently accessed data in a fast-access storage layer (like memory) so that future requests for that data can be served faster.

Why:

Reduces response time
Minimizes database load
Improves scalability and user experience

When to use:

When you have repetitive, read-heavy operations such as:

Fetching static product details
Returning popular posts
Computing costly aggregations

Where:

Typically used:

Between the API and the database
At CDN level for static assets
In-memory (e.g., Redis, Node cache) for API data

Example:

const express = require('express');
const redis = require('redis');
const fetch = require('node-fetch');

const client = redis.createClient();
const app = express();

app.get('/posts', async (req, res) => {
  const cachedPosts = await client.get('posts');
  if (cachedPosts) return res.json(JSON.parse(cachedPosts));

  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();

  client.setEx('posts', 3600, JSON.stringify(data)); // cache for 1 hour
  res.json(data);
});

The first request fetches data from the API, but subsequent ones serve from Redis memory, reducing external API calls.

What are different types of caching in Node.js?

1. In-memory cache:

Stored in Node process memory using packages like node-cache or lru-cache
Fastest but not shared across multiple server instances
Best for: Single-instance apps, computed results

const NodeCache = require("node-cache");
const myCache = new NodeCache({ stdTTL: 600 });
myCache.set("key", "value");
console.log(myCache.get("key")); // 'value'

2. Distributed cache (Redis / Memcached):

External in-memory databases shared across multiple app instances
Best for: Scalable and load-balanced applications

3. Browser caching / CDN caching:

For static files like images, scripts, and CSS
Best for: Reducing load time for front-end users

4. Application-level caching:

Using HTTP headers like Cache-Control, ETag, or response-level caching middleware

How do you identify performance bottlenecks in a Node.js app?

By profiling and monitoring the app’s runtime performance using tools such as:

Node’s built-in profiler:

node --inspect app.js

Opens Chrome DevTools for debugging and profiling.

Performance monitoring tools:

PM2 monitoring dashboard
New Relic, Datadog, or AppDynamics for production-level insights

Steps to identify bottlenecks:

Measure response time and CPU usage
Analyze event loop lag (using clinic.js or node —inspect)
Check for slow database queries and missing indexes
Profile memory leaks via heap snapshots

When:

Always perform during load testing before production deployment.

How do you optimize a Node.js application for better performance?

1. Use asynchronous code properly:

Avoid blocking the event loop by using non-blocking async operations.

// BAD: Blocking
const fs = require('fs');
const data = fs.readFileSync('file.txt');

// GOOD: Non-blocking
fs.readFile('file.txt', (err, data) => { ... });

2. Enable GZIP compression:

Compress HTTP responses using middleware like compression.

const compression = require('compression');
app.use(compression());

3. Use Redis or in-memory cache:

Cache frequent DB queries to reduce load.

4. Cluster your Node process:

Utilize multiple CPU cores using cluster or PM2.

const cluster = require('cluster');
const os = require('os');

if (cluster.isPrimary) {
  os.cpus().forEach(() => cluster.fork());
} else {
  require('./server');
}

5. Optimize database queries:

Use proper indexes, projections, and pagination.

6. Use streaming for large data:

Instead of loading entire data into memory.

const fs = require('fs');
fs.createReadStream('largeFile.txt').pipe(res);

7. Use load balancing & reverse proxies (Nginx):

Helps distribute load across multiple Node instances.

What is Redis and how do you use it for caching in Node.js?

Redis is an in-memory data store that can be used for:

Caching responses
Session storage
Pub/Sub systems
Rate limiting

Why Redis:

Very fast (stores data in RAM)
Persistent (can save snapshots to disk)
Supports TTL (time-to-live) expiration

Example:

const redis = require('redis');
const client = redis.createClient();

client.connect();

async function getCachedUser(id) {
  const cachedUser = await client.get(`user:${id}`);
  if (cachedUser) return JSON.parse(cachedUser);

  const user = await getUserFromDatabase(id);
  await client.setEx(`user:${id}`, 600, JSON.stringify(user)); // cache 10min
  return user;
}

When:

When your system frequently requests the same data from a slow data source like MongoDB or an external API.

What is event loop blocking and how does it impact performance?

Node.js is single-threaded, so any CPU-intensive task can block the event loop and delay other requests.

Example of blocking:

// BAD
app.get('/heavy', (req, res) => {
  let sum = 0;
  for (let i = 0; i < 1e9; i++) sum += i; // blocks everything
  res.send('Done');
});

Fix:

Use worker threads or child processes for CPU-heavy operations.

const { Worker } = require('worker_threads');
app.get('/heavy', (req, res) => {
  const worker = new Worker('./heavyTask.js');
  worker.on('message', msg => res.send(msg));
});

How do you handle rate limiting and throttling for performance?

Rate limiting ensures a user doesn’t overwhelm the server with too many requests in a short period.

When to use:

For APIs prone to abuse — login, search, or payment endpoints.

Example using express-rate-limit:

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100,
});

app.use(limiter);

You can also store rate limit counters in Redis for distributed environments.

How do you measure memory usage and detect memory leaks in Node.js?

You can monitor heap usage using:

console.log(process.memoryUsage());

or by using Chrome DevTools:

Run app with node --inspect
Open chrome://inspect
Take Heap Snapshots and compare over time

When leaks occur:

Global variables not freed
Large cached data without TTL
Event listeners not removed

Where to fix:

Ensure proper cleanup using:

emitter.removeAllListeners();
cache.del('largeKey');

Conclusion & Interview Tips

This comprehensive guide covers essential MERN Stack interview questions across all four technologies. The MERN stack combines MongoDB, Express.js, React, and Node.js to create powerful full-stack web applications.

Key Interview Preparation Tips

Master fundamentals before advanced topics
Build full-stack projects for hands-on experience
Understand how technologies integrate
Focus on best practices and security
Practice explaining your thought process
Review recent updates and ecosystem changes
Prepare for coding challenges and system design
Study common architectural patterns

During the Interview

Ask clarifying questions before coding
Think aloud to show your problem-solving approach
Consider edge cases and error handling
Discuss trade-offs in your solutions
Be honest about what you don’t know
Show enthusiasm for learning

Technical Skills to Demonstrate

Database design and query optimization
RESTful API development
Component architecture and state management
Asynchronous programming patterns
Security best practices
Performance optimization techniques
Testing and debugging strategies
Deployment and DevOps basics

Remember that interviews assess not just technical knowledge but also problem-solving ability, communication skills, and cultural fit. Be confident, stay calm, and demonstrate your passion for web development.

Good luck with your MERN Stack interviews!

Interview Experiences

Interview Questions

​1. MongoDB Fundamentals

​2. MongoDB Advanced Concepts

​3. Express.js Basics and Middleware

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example Flow:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​4. Express.js Authentication & Authorization

​Example:

​Why:

​When:

​Where:

​Steps:

​Example:

​Why:

​When:

​Where:

​Example (session-based login):

​Why:

​When:

​Where:

​Example:

​Why:

​When:

​Where:

​Example (ABAC):

​Why:

​When:

​Where:

​Example using bcrypt:

​Why:

​When:

​Where:

​Example:

1. MongoDB Fundamentals

2. MongoDB Advanced Concepts

3. Express.js Basics and Middleware

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example Flow:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

Example:

Why:

When:

Where:

4. Express.js Authentication & Authorization

Example:

Why:

When:

Where:

Steps:

Example:

Why:

When:

Where:

Example (session-based login):

Why:

When:

Where:

Example:

Why:

When:

Where:

Example (ABAC):

Why:

When:

Where:

Example using bcrypt:

Why:

When:

Where:

Example:

Why:

When: