0% found this document useful (0 votes)
2 views35 pages

MERN Interview Prep Guide

The MERN Stack Interview Preparation Guide provides a comprehensive overview of the MERN stack, including MongoDB, Express.js, React, and Node.js, structured into beginner, intermediate, and advanced sections. Each section contains foundational concepts, detailed explanations, and real interview questions with answers and code samples. The guide aims to equip candidates with the necessary knowledge and skills for MERN stack interviews.

Uploaded by

maabdullah.rhs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views35 pages

MERN Interview Prep Guide

The MERN Stack Interview Preparation Guide provides a comprehensive overview of the MERN stack, including MongoDB, Express.js, React, and Node.js, structured into beginner, intermediate, and advanced sections. Each section contains foundational concepts, detailed explanations, and real interview questions with answers and code samples. The guide aims to equip candidates with the necessary knowledge and skills for MERN stack interviews.

Uploaded by

maabdullah.rhs
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

MERN Stack Interview Preparation Guide MongoDB • Express • React • Node.

js

MERN STACK
Interview Preparation Guide

MongoDB • [Link] • React • [Link]

Three-Level Deep-Dive: Beginner → Intermediate → Advanced

Real interview questions with detailed answers, code samples & references

■ BEGINNER ■ INTERMEDIATE ■ ADVANCED

MERN Stack Interview Guide Page 1 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Table of Contents

■ SECTION 1: BEGINNER
■ 1.1 What is MERN? — Overview & Architecture
■ 1.2 MongoDB Basics — Documents, Collections, CRUD
■ 1.3 [Link] Basics — Routing, Middleware, REST
■ 1.4 React Basics — Components, JSX, Props, State
■ 1.5 [Link] Basics — Event Loop, Modules, npm
■ 1.6 Beginner Interview Questions (15 Q&As;)

■ SECTION 2: INTERMEDIATE
■ 2.1 MongoDB — Aggregation Pipeline, Indexes, Schema Design
■ 2.2 [Link] — Authentication, Error Handling, Middleware Chains
■ 2.3 React — Hooks Deep Dive, Context API, Performance
■ 2.4 [Link] — Streams, Async/Await, Event Emitter
■ 2.5 REST API Design & HTTP Deep Dive
■ 2.6 Intermediate Interview Questions (15 Q&As;)

■ SECTION 3: ADVANCED
■ 3.1 MongoDB — Transactions, Replication, Sharding
■ 3.2 [Link] — Cluster, Worker Threads, Performance Tuning
■ 3.3 React — Advanced Patterns, Suspense, SSR, Testing
■ 3.4 System Design — Scalability, Caching, Microservices
■ 3.5 Security — JWT Deep Dive, OWASP Top 10 in MERN
■ 3.6 Advanced Interview Questions (15 Q&As;)

MERN Stack Interview Guide Page 2 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

SECTION 1: BEGINNER

Foundations of the MERN Stack

1.1 What is MERN? — Architecture Overview

MERN is a full-stack JavaScript framework using four technologies to build modern web
applications entirely in JavaScript — from the database to the browser.

Layer Technology Role Port (default)

Database MongoDB NoSQL document store; stores JSON-like BSON data 27017

Backend API [Link] Minimal web framework on top of [Link]; handles HTTP
5000
routes
/ 3001

Frontend React UI library; renders components in the browser (SPA) 3000

Runtime [Link] JavaScript runtime; runs server-side code outside the browser

■ Note: All four layers use JavaScript/JSON, making it easy to share code and data models
across the full stack.

Typical Request Flow


User action in React → HTTP request to Express API → Express queries MongoDB via Mongoose
→ MongoDB returns data → Express sends JSON response → React updates the UI.

1.2 MongoDB Basics

MongoDB is a document-oriented NoSQL database. Data is stored as BSON (Binary JSON)


documents inside collections, which are analogous to tables in SQL. No fixed schema is required.

SQL vs MongoDB Terminology

Database=Database | Table=Collection | Row=Document | Column=Field | Primary Key=_id

MERN Stack Interview Guide Page 3 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Document

A JSON-like object with key-value pairs. Maximum size 16MB. Nested documents and arrays
allowed.

Collection

A group of documents. Schema-less — documents in the same collection can have different fields.

_id field

Every document has a unique _id (ObjectId by default). Acts as primary key.

ObjectId

12-byte BSON type: 4B timestamp + 5B random + 3B counter. Globally unique, sortable by creation
time.

Basic CRUD with Mongoose


JS
// Define a Schema & Model
const mongoose = require('mongoose');
const userSchema = new [Link]({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
age: Number,
createdAt: { type: Date, default: [Link] }
});
const User = [Link]('User', userSchema);

// CREATE
const user = await [Link]({ name: 'Ali', email: 'ali@[Link]', age:
25 });

// READ
const users = await [Link]({ age: { $gte: 18 } });
const single = await [Link]('64abc123...');

// UPDATE
await [Link](id, { $set: { age: 26 } }, { new: true });

// DELETE
await [Link](id);

1.3 [Link] Basics

MERN Stack Interview Guide Page 4 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

[Link] is a minimal, unopinionated web framework for [Link]. It provides routing, middleware
support, and HTTP utility methods for building APIs and web apps.

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

// Built-in middleware — parse JSON bodies


[Link]([Link]());

// Route — GET /api/users


[Link]('/api/users', async (req, res) => {
try {
const users = await [Link]();
[Link](users);
} catch (err) {
[Link](500).json({ message: [Link] });
}
});

// Route — POST /api/users


[Link]('/api/users', async (req, res) => {
const user = new User([Link]);
await [Link]();
[Link](201).json(user);
});

[Link](5000, () => [Link]("Server on port 5000"));

■ Tip: Always use async/await with try/catch in route handlers, or pass errors to next(err) for
centralized error handling.

1.4 React Basics

React is a JavaScript library (not a framework) for building user interfaces through a
component-based model. React uses a Virtual DOM to efficiently update only the parts of the real
DOM that changed.

Concept Description

Component Reusable UI piece — either a function or class. Returns JSX.

JSX JavaScript XML — HTML-like syntax compiled to [Link]() calls by Babel.

Props Read-only data passed from parent to child. Components receive props as function arguments.

MERN Stack Interview Guide Page 5 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Concept Description

State Mutable data managed inside a component. useState() hook triggers re-render on change.

Virtual DOM In-memory representation of the DOM. React diffs it against the real DOM (reconciliation) to min

One-way data flow Data flows down from parent to child via props. Events bubble up via callback props.

JSX
// Functional Component with State
import { useState, useEffect } from "react";

function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
fetch('/api/users')
.then(res => [Link]())
.then(data => { setUsers(data); setLoading(false); });
}, []); // [] = run only on mount

if (loading) return <p>Loading...</p>;

return (
<ul>
{[Link](u => <li key={u._id}>{[Link]}</li>)}
</ul>
);
}

1.5 [Link] Basics

[Link] is a JavaScript runtime built on Chrome's V8 engine. It uses a single-threaded,


non-blocking I/O model with an event loop, making it ideal for I/O-intensive applications like APIs.

■ Note: [Link] is single-threaded but handles concurrency through the Event Loop + libuv's
thread pool for I/O operations.

Concept Description

Event Loop Executes callbacks from the event queue when the call stack is empty. Phases: timers, pending

CommonJS Modules require() / [Link]. Built-in module system for [Link] (pre-ESM).

ES Modules (ESM) import / export. Modern JS modules; supported in [Link] 12+ with .mjs or "type":"module" in pa

MERN Stack Interview Guide Page 6 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Concept Description

npm / [Link] Node Package Manager. [Link] stores dependencies, scripts, and metadata.

process object Global object providing env vars ([Link]), arguments, exit codes, and stdin/stdout streams

1.6 Beginner Interview Questions

Q What is the difference between SQL and NoSQL databases? Why does MERN
1 use MongoDB?

■ Answer:
SQL databases (MySQL, PostgreSQL) use structured tables with a fixed schema and relations
enforced by foreign keys. They are ACID-compliant and excellent for structured, relational data.
NoSQL databases (MongoDB) store data as flexible JSON-like documents — no fixed schema.
Ideal for hierarchical, rapidly-changing data structures and horizontal scaling.
MERN uses MongoDB because its JSON documents match JavaScript objects natively,
eliminating object-relational mapping overhead and keeping the entire stack in one language
ecosystem.
■ Ref: MongoDB Docs — SQL to MongoDB Mapping; CAP Theorem (Brewer 2000)

Q What is middleware in [Link]? Give an example.


2

■ Answer:
Middleware is a function that has access to req, res, and next. It sits in the request-response
pipeline and can execute code, modify req/res objects, end the cycle, or call next() to pass control
to the next middleware. Examples: [Link]() (body parsing), cors(), authentication guards,
logging (Morgan).

JS
// Custom logging middleware
function logger(req, res, next) {
[Link](`${[Link]} ${[Link]} - ${[Link]()}`);
next(); // MUST call next() or the request hangs
}
[Link](logger); // applies to all routes

■ Ref: [Link] Docs — Writing Middleware; [Link]/guide/using-middleware

MERN Stack Interview Guide Page 7 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Q What is the Virtual DOM in React and why is it faster than the real DOM?
3

■ Answer:
The Virtual DOM (VDOM) is a lightweight JavaScript object representation of the real DOM tree.
When state/props change, React creates a new VDOM, diffs it against the previous VDOM
(reconciliation using the Fiber algorithm), and calculates the minimum set of real DOM changes
needed.
The real DOM is slow to update because changes trigger reflow/repaint in the browser. By
batching and minimizing real DOM operations, React achieves better performance — especially in
apps with frequent UI updates.
■ Ref: React Docs — Reconciliation; Lin Clark — A Cartoon Intro to Fiber (React Conf 2017)

Q What is the difference between props and state in React?


4

■ Answer:
Props (properties) are read-only data passed from a parent component to a child. A child cannot
modify its props. They enable component reusability and one-directional data flow.
State is mutable data owned and managed by the component itself. When state changes (via
setState or the useState setter), React schedules a re-render of that component and its children.
Rule of thumb: if data comes from outside — it's a prop. If the component manages it — it's state.

JS
// Props: passed from parent
function Greeting({ name }) { // name is a prop
return <h1>Hello, {name}</h1>;
}

// State: managed inside component


function Counter() {
const [count, setCount] = useState(0); // state
return <button onClick={() => setCount(c => c+1)}>{count}</button>;
}

■ Ref: React Docs — Components and Props; Thinking in React

Q What is the event loop in [Link] and how does it handle async operations?
5

MERN Stack Interview Guide Page 8 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
[Link] runs JavaScript in a single thread. The event loop is the mechanism that allows it to
handle thousands of concurrent operations without creating new threads for each.
When an async operation (file I/O, network request, timer) is initiated, [Link] offloads it to libuv's
thread pool or the OS. When it completes, a callback is queued in the event queue. The event loop
picks up callbacks when the call stack is empty and executes them.
Phases in order: timers (setTimeout/setInterval) → pending I/O callbacks → idle → poll (wait for
I/O) → check (setImmediate) → close callbacks.

JS
[Link]("1 - sync");
setTimeout(() => [Link]('3 - timer (macrotask)'), 0);
[Link]().then(() => [Link]('2 - microtask'));
[Link]("4 - sync end");
// Output: 1, 4, 2, 3
// Microtasks (Promises) run BEFORE macrotasks (setTimeout)

■ Ref: [Link] Docs — Event Loop; Philip Roberts — What the heck is the event loop (JSConf EU 2014)

Q What is CORS and how do you enable it in an [Link] app?


6

■ Answer:
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that blocks HTTP
requests made from a different origin (different protocol, domain, or port) than the server. Since
React (localhost:3000) and Express (localhost:5000) run on different ports in development, CORS
must be explicitly enabled on the server.
The cors npm package adds the necessary Access-Control-Allow-Origin headers to Express
responses.

JS
const cors = require('cors');

// Allow all origins (development only)


[Link](cors());

// Restrict to specific origin (production)


[Link](cors({ origin: '[Link] }));

// Fine-grained per route


[Link]('/public', cors(), handler);

■ Ref: MDN — CORS; npm cors package docs; RFC 6454 (Web Origin Concept)

MERN Stack Interview Guide Page 9 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Q What is the difference between == and === in JavaScript?


7

■ Answer:
== (loose equality) performs type coercion before comparison — it converts values to a common
type. === (strict equality) compares both value AND type with no coercion. Always use === in
JavaScript to avoid unexpected bugs from implicit type conversions.

JS
0 == false // true (coercion: false → 0)
0 === false // false (different types)
'1' == 1 // true (coercion: string → number)
'1' === 1 // false
null == undefined // true (special case)
null === undefined // false

■ Ref: MDN — Equality Comparisons; ECMA-262 §7.2.14

Q What is async/await and how does it relate to Promises?


8

MERN Stack Interview Guide Page 10 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
A Promise is an object representing the eventual completion (or failure) of an async operation.
async/await is syntactic sugar over Promises that makes asynchronous code look synchronous
and easier to read.
An async function always returns a Promise. await pauses execution inside the async function
until the Promise resolves (or throws if rejected). Error handling uses try/catch instead of .catch().

JS
// Promise chain
fetch('/api/users')
.then(res => [Link]())
.then(data => [Link](data))
.catch(err => [Link](err));

// Equivalent with async/await


async function getUsers() {
try {
const res = await fetch('/api/users');
const data = await [Link]();
[Link](data);
} catch (err) {
[Link](err);
}
}

■ Ref: MDN — async function; MDN — Promise; ECMA-262 §25.6

Q What is the purpose of useEffect in React?


9

MERN Stack Interview Guide Page 11 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
useEffect is a React Hook that performs side effects in function components. Side effects include:
fetching data from APIs, setting up subscriptions, manually manipulating the DOM, starting timers.
The dependency array controls when the effect runs: empty [] = once on mount only; [value] =
re-runs when value changes; no array = runs after every render.

JS
useEffect(() => {
// Setup: fetch data when userId changes
fetch(`/api/users/${userId}`)
.then(r => [Link]()).then(setUser);

// Cleanup: runs before effect re-runs or unmount


return () => [Link]("cleanup");
}, [userId]); // dependency array

■ Ref: React Docs — useEffect; Dan Abramov — A Complete Guide to useEffect

Q
1 What are the HTTP methods used in a REST API and what do they represent?
0

■ Answer:
REST APIs use standard HTTP methods to represent CRUD operations on resources:
GET — Read (retrieve a resource, no body, idempotent)
POST — Create (submit data, non-idempotent, body required)
PUT — Replace (full update of resource, idempotent)
PATCH — Partial update (only changed fields, idempotent)
DELETE — Remove a resource (idempotent)
Idempotent means calling the same request multiple times produces the same result.

JS
GET /api/users → get all users
GET /api/users/:id → get one user
POST /api/users → create user
PUT /api/users/:id → replace user fully
PATCH /api/users/:id → partial update
DELETE /api/users/:id → delete user

■ Ref: RFC 7231 — HTTP/1.1 Semantics; Roy Fielding — REST Dissertation (2000)

MERN Stack Interview Guide Page 12 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

SECTION 2: INTERMEDIATE

Core Concepts, Patterns & Best Practices

2.1 MongoDB — Aggregation Pipeline & Indexes

The aggregation pipeline transforms documents through a sequence of stages. Each stage
outputs documents that become input to the next stage. Far more powerful and efficient than
multiple find() calls.

Stage Description SQL Equivalent

$match Filter documents (use early to reduce data) WHERE

$group Group by key, compute aggregates GROUP BY + SUM/COUNT/AVG

$project Reshape documents — include, exclude, add fields


SELECT

$sort Sort documents ORDER BY

$limit / $skip Pagination LIMIT / OFFSET

$lookup Left outer join with another collection LEFT JOIN

$unwind Deconstruct an array into separate documents UNNEST / LATERAL JOIN

$addFields Add new computed fields SELECT col + alias

$facet Multiple aggregation pipelines in one pass Multiple CTEs

JS
// Aggregation: total revenue per category, only categories with > $1000
[Link]([
{ $match: { status: 'completed' } },
{ $unwind: "$items" },
{ $group: {
_id: "$[Link]",
totalRevenue: { $sum: "$[Link]" },
orderCount: { $count: {} }
}},

MERN Stack Interview Guide Page 13 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

{ $match: { totalRevenue: { $gt: 1000 } } },


{ $sort: { totalRevenue: -1 } },
{ $project: {
category: "$_id", totalRevenue: 1, orderCount: 1, _id: 0
}}
]);

MongoDB Indexes
Index Type Use Case Example

Single Field Queries on one field [Link]({ email: 1 })

Compound Multi-field queries; order matters (ESR{ rule)


dept: 1, salary: -1 }

Text Index Full-text search { description: "text" }

Geospatial (2dsphere) Location-based queries { location: "2dsphere" }

Partial Index subset of documents { filter: { status: "active" } }

TTL Index Auto-expire documents (sessions, logs)


{ expireAfterSeconds: 3600 }

Sparse Only index documents that have the field


{ sparse: true }

■ Tip: ESR Rule for compound indexes: Equality fields first, Sort fields second, Range fields last.

2.2 [Link] — Authentication & Error Handling

JS
// JWT Auth Middleware
const jwt = require('jsonwebtoken');

function authenticate(req, res, next) {


const token = [Link]?.split(' ')[1];
if (!token) return [Link](401).json({ message: 'No token' });
try {
[Link] = [Link](token, [Link].JWT_SECRET);
next();
} catch {
[Link](403).json({ message: 'Invalid token' });
}
}

// Global Error Handler (4 params — must be last middleware)

MERN Stack Interview Guide Page 14 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

[Link]((err, req, res, next) => {


const status = [Link] || 500;
[Link](status).json({
error: [Link] || "Internal Server Error",
...([Link].NODE_ENV !== "production" && { stack: [Link] })
});
});

2.3 React — Hooks Deep Dive

Hook Purpose Key Rules

useState Local component state Returns [state, setter]; setter is async (batched)

useEffect Side effects; runs after render Cleanup via return fn; deps array controls frequency

useContext Consume a React Context value Avoids prop drilling; re-renders on context change

useRef Mutable ref that persists without re-render


DOM refs, timers, prev values; .current property

useMemo Memoize expensive computed valueOnly recomputes when deps change; avoids re-computation

useCallback Memoize a function reference Prevents child re-renders when passing callbacks as props

useReducer Complex state logic (Redux-like) dispatch(action) → reducer(state, action) → new state

Custom Hook Reusable stateful logic (useXxx) Prefixed with "use"; can use other hooks inside

JSX
// Custom Hook: useLocalStorage
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = [Link](key);
return item ? [Link](item) : initialValue;
} catch { return initialValue; }
});

const setValue = (value) => {


setStoredValue(value);
[Link](key, [Link](value));
};

return [storedValue, setValue];


}

// Usage

MERN Stack Interview Guide Page 15 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

const [theme, setTheme] = useLocalStorage('theme', 'dark');

2.4 [Link] — Async Patterns & Streams

JS
// [Link] — parallel requests
async function getDashboard(userId) {
const [user, orders, notifications] = await [Link]([
[Link](userId),
[Link]({ userId }),
[Link]({ userId, read: false })
]);
return { user, orders, notifications };
}

// Streams — process large files without loading all into memory


const fs = require('fs');
const readStream = [Link]('[Link]');
const writeStream = [Link]('[Link]');
[Link](writeStream);

[Link]('data', chunk => [Link]('.'));


[Link]('end', () => [Link]('Done'));

■ Note: [Link] rejects immediately if any promise rejects. Use [Link]() to get
results of all, including failures.

2.5 REST API Design Principles

Principle Description

Stateless Each request contains all information needed. Server stores no client session state.

Resource-based URLs Nouns, not verbs: /api/users/:id not /api/getUser

HTTP Status Codes 200 OK, 201 Created, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500

Versioning /api/v1/users — allows breaking changes without affecting existing clients

Pagination Limit results: GET /api/users?page=2&limit=20 or cursor-based pagination

HATEOAS Hypermedia links in responses guide client navigation (optional but RESTful)

MERN Stack Interview Guide Page 16 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

2.6 Intermediate Interview Questions

Q Explain the MongoDB aggregation pipeline. How is it different from a simple


1 find() query?

■ Answer:
The aggregation pipeline is a sequence of stages that process and transform documents. find()
retrieves documents with simple matching and projection but cannot compute aggregates, join
collections, reshape output, or perform multi-stage transformations.
The pipeline is processed server-side, reducing data sent to the application. Stages like $match
should appear early to reduce the working set. $group computes accumulators. $lookup joins
collections. This enables analytics impossible with find() alone.

JS
// Average order value per customer
[Link]([
{ $match: { createdAt: { $gte: new Date('2024-01-01') } } },
{ $group: { _id: "$customerId",
avgValue: { $avg: "$total" },
count: { $sum: 1 } } },
{ $sort: { avgValue: -1 } },
{ $limit: 10 }
]);

■ Ref: MongoDB Docs — Aggregation Pipeline; M121 MongoDB University

Q What is JWT authentication? How do you implement it securely in a MERN app?


2

MERN Stack Interview Guide Page 17 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
JWT (JSON Web Token) is a compact, URL-safe token format. A JWT consists of three
Base64URL-encoded parts separated by dots: Header (algorithm) . Payload (claims/data) .
Signature.
Flow: user logs in → server verifies credentials → server signs a JWT with a secret → client stores
the JWT → client sends JWT in Authorization: Bearer header → server verifies signature on each
request.
Security best practices: short expiry (15min) with refresh tokens, store access token in memory
(not localStorage), use httpOnly cookies for refresh tokens, always use HTTPS, rotate secrets
regularly.

JS
const jwt = require('jsonwebtoken');

// Login: generate tokens


const accessToken = [Link](
{ userId: user._id, role: [Link] },
[Link].ACCESS_SECRET,
{ expiresIn: '15m' }
);
const refreshToken = [Link](
{ userId: user._id },
[Link].REFRESH_SECRET,
{ expiresIn: '7d' }
);
// Store refreshToken in httpOnly cookie
[Link]('refreshToken', refreshToken, { httpOnly: true, secure: true });
[Link]({ accessToken });

■ Ref: RFC 7519 — JSON Web Token; OWASP — JWT Security Cheat Sheet

Q What is the difference between useMemo and useCallback?


3

MERN Stack Interview Guide Page 18 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
Both are memoization hooks that prevent unnecessary recomputation between renders.
useMemo memoizes the RESULT of a function — it caches a computed value and only
recomputes it when its dependencies change. Use for expensive calculations (sorting large arrays,
complex filtering).
useCallback memoizes the FUNCTION REFERENCE itself. Use when passing callbacks to child
components that use [Link], to prevent unnecessary re-renders because a new function
reference is created on every parent render.

JS
// useMemo: memoize expensive computed value
const sortedList = useMemo(() =>
[...items].sort((a, b) => [Link] - [Link]),
[items] // only re-sort when items changes
);

// useCallback: stable function reference for child


const handleDelete = useCallback((id) => {
setItems(prev => [Link](i => [Link] !== id));
}, []); // never recreated

// Child only re-renders when handleDelete reference changes


const Child = [Link](({ onDelete }) => <button
onClick={onDelete}>Delete</button>);

■ Ref: React Docs — useMemo; useCallback; When to useMemo and useCallback — Kent C. Dodds

Q How does [Link] handle concurrency if it is single-threaded?


4

■ Answer:
[Link] is single-threaded for JavaScript execution but uses libuv's I/O engine (which has a thread
pool) for file system, DNS, crypto, and other async I/O operations.
When async I/O is initiated, [Link] registers a callback and continues executing other code.
When the I/O completes, libuv signals the event loop which queues the callback.
This non-blocking model allows one [Link] process to handle thousands of concurrent
connections because it never waits for I/O — it processes other requests while I/O is in progress.
CPU-intensive tasks (image processing, heavy computation) block the event loop and require
worker threads or child processes.
■ Ref: [Link] Docs — About Node; libuv Documentation; Bert Belder — Everything you need to know about
[Link]

MERN Stack Interview Guide Page 19 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Q What is the Context API in React and when would you use it over Redux?
5

■ Answer:
React Context provides a way to share values between components without passing props
through every level of the tree (prop drilling). A Context consists of a Provider (supplies the value)
and Consumer or useContext hook (reads the value).
Use Context for: theme, locale, authenticated user, simple shared state.
Use Redux/Zustand when: state is complex with many actions and reducers, you need
middleware (logging, async actions), time-travel debugging (Redux DevTools), or the app is large
and many unrelated components need the same state.

JS
// Create and provide context
const AuthContext = createContext(null);

function AuthProvider({ children }) {


const [user, setUser] = useState(null);
return (
<[Link] value={{ user, setUser }}>
{children}
</[Link]>
);
}

// Consume in any child


function Navbar() {
const { user } = useContext(AuthContext);
return <div>Hello, {user?.name}</div>;
}

■ Ref: React Docs — Context; When to use Redux — Dan Abramov

Q What are MongoDB schema design patterns? Embed vs Reference — how do


6 you choose?

MERN Stack Interview Guide Page 20 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
Embed (denormalize): Store related data as a nested document or array within the parent
document.
Best when: data is frequently accessed together, the nested data is "owned by" the parent, data
won't grow unboundedly.
Reference (normalize): Store a reference (_id) to another document in a separate collection.
Best when: the referenced data is large or shared across many documents, many-to-many
relationships, the referenced data changes frequently, or the document would exceed the 16MB
limit.
Rule of thumb: embed for "has-a" one-to-few; reference for one-to-many and many-to-many.

JS
// EMBED: blog post with its comments (few comments)
{ _id: ObjectId, title: "Post", comments: [
{ author: "Ali", text: "Great post!" },
{ author: "Sara", text: "Thanks!" }
]}

// REFERENCE: order referencing a product (shared across many orders)


{ _id: ObjectId, orderId: "ORD-001",
items: [{ productId: ObjectId("..."), qty: 2 }] }

■ Ref: MongoDB Docs — Data Modeling Introduction; MongoDB Schema Design Patterns (6 Patterns)

Q Explain the difference between [Link](), setImmediate(), and


7 setTimeout(fn, 0) in [Link].

MERN Stack Interview Guide Page 21 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
All three schedule callbacks asynchronously, but in different phases of the event loop:
[Link]() runs after the current operation completes but BEFORE the event loop
continues — even before I/O callbacks and timers. It runs in the "microtask queue" alongside
Promises.
[Link]() also runs as a microtask — after nextTick.
setImmediate() runs in the check phase of the event loop — after I/O callbacks.
setTimeout(fn, 0) runs in the timers phase — after I/O, may run before or after setImmediate
depending on the context.

JS
setTimeout(() => [Link]('4 - setTimeout'), 0);
setImmediate(() => [Link]('3 - setImmediate'));
[Link]().then(() => [Link]('2 - Promise'));
[Link](() => [Link]('1 - nextTick'));
// Output order: nextTick → Promise → setImmediate → setTimeout
// (setTimeout vs setImmediate order can vary outside I/O context)

■ Ref: [Link] Docs — [Link](); Event Loop Timers and [Link]()

Q What are React keys and why are they important in lists?
8

■ Answer:
Keys are special props that help React's reconciliation algorithm identify which list items have
changed, been added, or removed. Without keys, React re-renders the entire list on any change.
Keys must be unique among siblings and stable (not based on array index if items can be
reordered/filtered). Using array index as key causes bugs: when items are reordered, React
associates state with the wrong component because the key (index) is the same but the item
changed.

JS
// BAD: using index as key
[Link]((item, i) => <Item key={i} {...item} />)

// GOOD: using stable unique id


[Link](item => <Item key={item._id} {...item} />)

// BAD: no key (React warning + re-renders entire list)


[Link](item => <li>{[Link]}</li>)

■ Ref: React Docs — Lists and Keys; Reconciliation — React Docs

MERN Stack Interview Guide Page 22 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

SECTION 3: ADVANCED

Architecture, Performance, Security & System Design

3.1 MongoDB — Transactions, Replication & Sharding

For production MERN apps, understanding MongoDB's high-availability and scalability features is
essential for senior and lead-level interviews.

JS
// Multi-document ACID Transaction (requires Replica Set or Sharded Cluster)
const session = await [Link]();
[Link]();
try {
await [Link](
senderId, { $inc: { balance: -amount } }, { session }
);
await [Link](
receiverId, { $inc: { balance: +amount } }, { session }
);
await [Link]([{ senderId, receiverId, amount }], { session });
await [Link]();
} catch (err) {
await [Link]();
throw err;
} finally {
[Link]();
}

Feature Description

Replica Set 3+ nodes (primary + secondaries). Automatic failover if primary goes down. Read preference can rou

Write Concern w:1 = primary confirms; w:"majority" = majority of nodes confirm (durability guarantee). j:true = wait fo

Read Concern local (default), majority (only committed data), linearizable (most recent committed data).

Sharding Horizontal partitioning across multiple servers via a shard key. Enables petabyte-scale storage and th

MERN Stack Interview Guide Page 23 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Feature Description

Change Streams Real-time notifications of data changes using MongoDB's oplog. Used for event-driven architectures.

Atlas Search Full-text search powered by Apache Lucene, integrated into MongoDB Atlas.

3.2 [Link] — Cluster, Worker Threads & Performance

JS
// Cluster module: utilize all CPU cores
const cluster = require('cluster');
const os = require('os');

if ([Link]) {
const numCPUs = [Link]().length;
for (let i = 0; i < numCPUs; i++) [Link]();
[Link]('exit', (worker) => {
[Link](`Worker ${[Link]} died — restarting`);
[Link]();
});
} else {
// Each worker runs the Express app
require('./app');
}

// Worker Threads: CPU-intensive tasks (image processing, crypto)


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

if (isMainThread) {
const worker = new Worker('./[Link]');
[Link]('message', result => [Link]('Result:', result));
[Link]({ data: [1, 2, 3, 4, 5] });
} else {
[Link]('message', ({ data }) => {
const result = [Link]((a, b) => a + b, 0); // heavy CPU work
[Link](result);
});
}

3.3 React — Advanced Patterns & Rendering Strategies

MERN Stack Interview Guide Page 24 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Pattern / Feature Description Use Case

[Link] HOC that prevents re-render if props are shallowly


Pure
equal
presentation components receiving complex o

Suspense Declarative loading states while waiting for async


Lazy
resources
loading, data fetching with use() hook (React

Error Boundaries Class components catching render errors in subtrees


Graceful degradation, prevent full-app crash

Portals Render children outside the parent DOM node hierarchy


Modals, tooltips, dropdowns that need to escape o

Concurrent Mode Interruptible rendering — React can pause, resume,


startTransition,
abandon renders
useDeferredValue for responsive U

Server Components (RSC) Components that render only on the server; [Link]
client JS
13+bundle
App Router
impactdefault components

Compound Components Components share implicit state via Context Tabs, Accordions, Select menus with flexible comp

Render Props Share code via a prop that is a function returningLegacy


JSX pattern; replaced by hooks in modern Reac

JSX
// Compound Component Pattern — Tabs
const TabsContext = createContext(null);

function Tabs({ children, defaultTab }) {


const [active, setActive] = useState(defaultTab);
return <[Link] value={{ active, setActive
}}>{children}</[Link]>;
}

[Link] = function Tab({ id, children }) {


const { active, setActive } = useContext(TabsContext);
return (
<button
onClick={() => setActive(id)}
style={{ fontWeight: active === id ? 'bold' : 'normal' }}
>{children}</button>
);
};

// Usage — fully composed, no internal wiring visible to consumer


<Tabs defaultTab="home">
<[Link] id="home">Home</[Link]>
<[Link] id="about">About</[Link]>
</Tabs>

3.4 System Design — Scalability & Microservices

MERN Stack Interview Guide Page 25 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Concern Solution Tools/Patterns

Horizontal Scaling Run multiple [Link] instances behindPM2


a load
Cluster,
balancer
Nginx, AWS ELB, k8s HPA

Caching Cache frequently read data to reduce Redis


DB load
(in-memory), CDN (static assets), HTTP cache heade

Session Management Store sessions outside [Link] process


Redis
for cluster
sessioncompatibility
store (connect-redis)

Message Queue Decouple services; async task processing


RabbitMQ, Bull (Redis-backed), AWS SQS, Kafka

Rate Limiting Prevent abuse and DDoS on API endpoints


express-rate-limit + Redis store for distributed limiting

Database Connection PoolingReuse connections instead of creatingMongoose


new ones connection
per requestpool (poolSize), pg Pool

Microservices Split monolith into independent, deployable


Docker,
services
Kubernetes, API Gateway, Service Mesh (Istio)

Observability Logging, metrics, distributed tracing inWinston,


production
Prometheus + Grafana, Jaeger, OpenTelemetry

3.5 Security — OWASP Top 10 in MERN Context

Threat MERN Mitigation

Injection (NoSQL injection) Never interpolate user input into queries. Use Mongoose which parameterizes. Sanitize with

Broken Authentication Short-lived JWTs, httpOnly refresh tokens, bcrypt for password hashing (saltRounds 12+), a

Sensitive Data Exposure HTTPS everywhere, encrypt sensitive fields at rest, never log passwords/tokens, use enviro

XSS (Cross-Site Scripting) React escapes JSX by default. Avoid dangerouslySetInnerHTML. Set Content-Security-Polic

CSRF Use SameSite=Strict cookies. CSRF tokens for form submissions. Verify Origin header on s

Broken Access Control Check authorization on every route (not just auth). Field-level permissions. Resource owners

Security Misconfiguration [Link] for security headers, disable X-Powered-By, use .env files, rotate secrets, review C

Mass Assignment Whitelist allowed fields in Mongoose: never [Link]([Link]) directly. Use pick() to extr

JS
// Security middleware stack (install: npm i helmet morgan
express-rate-limit)
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');

[Link](helmet()); // 15+ security headers


[Link]([Link]()); // CSP

// Rate limit: max 100 requests per 15 minutes per IP


const limiter = rateLimit({
windowMs: 15 * 60 * 1000,

MERN Stack Interview Guide Page 26 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

max: 100,
message: { error: 'Too many requests, please try again later.' }
});
[Link]('/api/', limiter);

// Sanitize MongoDB query operators from request body


const mongoSanitize = require('express-mongo-sanitize');
[Link](mongoSanitize());

3.6 Advanced Interview Questions

Q How would you design a scalable real-time notification system in a MERN app?
1

■ Answer:
For real-time delivery, use either WebSockets ([Link]) or Server-Sent Events (SSE).
Architecture: Client connects to [Link] via [Link] → events published to Redis Pub/Sub → all
[Link] instances subscribed to Redis receive the event → emit to the specific connected client.
This works across a cluster because even if the client is connected to Node instance #3, any
instance can publish to Redis and instance #3 will receive it and forward to the client.
Store notification records in MongoDB (for persistence/history). Mark as read via REST API.

JS
// [Link] + Redis adapter for cluster support
const { createAdapter } = require('@[Link]/redis-adapter');
const { createClient } = require('redis');

const pubClient = createClient({ url: [Link].REDIS_URL });


const subClient = [Link]();
[Link](createAdapter(pubClient, subClient));

// Emit to specific user (any server in cluster)


[Link](`user:${userId}`).emit('notification', payload);

■ Ref: [Link] Docs — Redis Adapter; Redis Pub/Sub; Designing Real-Time Systems — LeadDev

Q What is React Server Components (RSC) and how does it differ from SSR?
2

MERN Stack Interview Guide Page 27 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
Server-Side Rendering (SSR) renders components on the server to HTML for the initial page load,
then hydrates the full component tree on the client (client JS bundle includes all components).
React Server Components (RSC) render exclusively on the server and are never hydrated — their
JavaScript is never shipped to the client, reducing bundle size. RSC can directly access
databases and file systems.
Client Components (with "use client" directive) are still hydrated normally.
In [Link] App Router, all components are Server Components by default. This enables data
fetching inside components without API routes, with zero client-side JavaScript cost for server-only
components.

JS
// Server Component — runs on server only, no "use client"
// Can await directly, access DB, no useState/useEffect
async function UserProfile({ userId }) {
const user = await [Link](userId); // direct DB call
return <div>{[Link]}</div>;
}

// Client Component — interactive, runs on client


"use client";
function LikeButton({ postId }) {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(!liked)}>{liked ? "❤■" : "■"}</button>;
}

■ Ref: React Docs — Server Components; [Link] App Router Docs; Dan Abramov — RSC From Scratch

Q Explain the memory leak scenarios in [Link] and how you would debug them.
3

MERN Stack Interview Guide Page 28 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
Common [Link] memory leak sources:
1. Global variables accumulating data over time (never garbage collected)
2. Event listeners not removed after use (EventEmitter with no removeListener)
3. Closures holding references to large objects
4. Timers (setInterval) not cleared
5. Mongoose connections not pooled properly
6. Caches growing unboundedly (no TTL or LRU eviction)
Debugging: [Link] --inspect + Chrome DevTools heap snapshots, [Link]()
monitoring, [Link] (clinic doctor / clinic heapprofiler), node --heap-prof.

JS
// BAD: event listener leak — added repeatedly
function onRequest(req, res) {
[Link]('data', handler); // added on every request!
}

// GOOD: use once() or remove listener


[Link]('data', handler);
// or
[Link]('data', handler);
[Link]('finish', () => [Link]('data', handler));

// Monitor memory
setInterval(() => {
const { heapUsed } = [Link]();
[Link](`Heap: ${[Link](heapUsed/1024/1024)}MB`);
}, 30000);

■ Ref: [Link] Docs — Diagnostics; [Link] by NearForm; [Link] Memory Leak Patterns — Nodesource

Q How would you implement optimistic UI updates in React?


4

MERN Stack Interview Guide Page 29 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
Optimistic updates immediately apply the expected change to the UI before the server confirms,
making the app feel instant. If the server request fails, roll back to the previous state.
Pattern: (1) Save the current state as a backup. (2) Optimistically update state. (3) Await the API
call. (4) On success — done. (5) On failure — restore the backup state and show an error.
React Query and SWR have built-in optimistic update support with automatic rollback.

JS
// Optimistic update for a "like" button
async function handleLike(postId) {
const prevPosts = posts; // backup
// Optimistically update UI immediately
setPosts(prev => [Link](p =>
p._id === postId ? { ...p, likes: [Link] + 1 } : p
));
try {
await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
} catch (err) {
setPosts(prevPosts); // rollback on failure
[Link]('Failed to like post');
}
}

■ Ref: TanStack Query Docs — Optimistic Updates; SWR Docs — Mutation; React 19 useOptimistic hook

Q What is the N+1 problem in MongoDB with Mongoose? How do you solve it?
5

MERN Stack Interview Guide Page 30 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
The N+1 problem: fetching N parent documents and then making 1 additional query per parent to
fetch related data — resulting in N+1 total queries.
In Mongoose: looping over posts and calling .find({ postId }) inside the loop is N+1.
Solutions:
1. Mongoose .populate() — joins the collection reference in one additional batched query
2. MongoDB $lookup aggregation — single pipeline, no round trips
3. Dataloader pattern — batch and cache database calls (Facebook's DataLoader library)

JS
// BAD: N+1 — 1 query for posts + N queries for authors
const posts = await [Link]();
for (const post of posts) {
[Link] = await [Link]([Link]); // N queries!
}

// GOOD: populate() — 2 total queries (1 for posts, 1 batched for authors)


const posts = await [Link]().populate("author", "name email avatar");

// BEST for complex: $lookup aggregation (1 query)


const posts = await [Link]([
{ $lookup: { from: "users", localField: "authorId",
foreignField: "_id", as: "author" } },
{ $unwind: "$author" }
]);

■ Ref: Mongoose Docs — Populate; MongoDB $lookup; DataLoader by Meta — [Link]/graphql/dataloader

Q How do you implement database connection pooling and why is it critical in


6 production?

MERN Stack Interview Guide Page 31 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
Creating a new database connection for every HTTP request is expensive (TCP handshake, auth,
memory allocation). Connection pooling maintains a pool of pre-established connections that are
reused across requests, dramatically reducing latency and resource usage.
Mongoose maintains a single connection per model by default (via [Link]()). The pool
size (default 5) is configurable. For high-traffic apps, tune maxPoolSize and monitor with
MongoDB Atlas metrics or Mongoose connection events.
Anti-pattern: calling [Link]() inside route handlers or creating new connections per
request.

JS
// Connect ONCE at app startup — Mongoose manages the pool
[Link]([Link].MONGO_URI, {
maxPoolSize: 20, // max concurrent connections
minPoolSize: 5, // keep minimum alive
serverSelectionTimeoutMS: 5000,
socketTimeoutMS: 45000,
});

// Handle connection events


[Link]('error', err => [Link]('DB Error:', err));
[Link]('disconnected', () => [Link]('DB Disconnected'));

// Graceful shutdown
[Link]('SIGTERM', async () => {
await [Link]();
[Link](0);
});

■ Ref: Mongoose Docs — Connections; MongoDB Connection Pooling Best Practices; 12-Factor App — Config

Q Describe how you would implement role-based access control (RBAC) in a


7 MERN app.

MERN Stack Interview Guide Page 32 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

■ Answer:
RBAC restricts system access based on assigned roles. Design:
1. Data model: User has a role field ("admin", "editor", "viewer")
2. JWT: Include the role in the token payload when signing
3. Middleware: After authentication, check if the user's role has permission for the requested
resource/action
4. For fine-grained control, use permission arrays instead of just roles
5. Never trust client-sent role claims — always read from the signed JWT or re-fetch from DB for
sensitive operations

JS
// Role-based middleware factory
function authorize(...allowedRoles) {
return (req, res, next) => {
if (![Link]([Link])) {
return [Link](403).json({ message: "Forbidden" });
}
next();
};
}

// Apply to routes
[Link]('/api/users/:id',
authenticate,
authorize('admin'), // only admins can delete
deleteUser
);

[Link]('/api/reports',
authenticate,
authorize('admin', 'editor'),
getReports
);

■ Ref: OWASP — Access Control Cheat Sheet; NIST RBAC Standard (FIPS 140)

MERN Stack Interview Guide Page 33 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

QUICK REFERENCE APPENDIX

MERN Stack: Essential npm Packages


Package Purpose Install

mongoose MongoDB ODM — schemas, models, validationnpm i mongoose

express Web framework — routing, middleware npm i express

dotenv Load .env variables into [Link] npm i dotenv

cors Enable Cross-Origin Resource Sharing npm i cors

helmet Set security HTTP headers npm i helmet

jsonwebtoken Create and verify JWTs npm i jsonwebtoken

bcryptjs Hash passwords with bcrypt npm i bcryptjs

express-validator Input validation and sanitization middleware npm i express-validator

morgan HTTP request logger middleware npm i morgan

express-rate-limit Rate limiting middleware npm i express-rate-limit

multer Multipart/form-data — file uploads npm i multer

[Link] Real-time bidirectional WebSocket communication


npm i [Link]

redis / ioredis Redis client — caching, sessions, pub/sub npm i ioredis

jest / supertest Unit testing + HTTP API integration testing npm i -D jest supertest

react-query / @tanstack/query
Server state management, caching, async data npm i @tanstack/react-query

axios HTTP client with interceptors, better than fetch npm i axios

react-router-dom Client-side routing for React SPAs npm i react-router-dom

zod / yup Schema-based input validation (frontend + backend)


npm i zod

HTTP Status Codes Cheat Sheet


Code Name Use in MERN API

200 OK Successful GET, PUT, PATCH, DELETE

201 Created Successful POST — resource created

204 No Content Successful DELETE with no response body

MERN Stack Interview Guide Page 34 © Interview Prep Series


MERN Stack Interview Preparation Guide MongoDB • Express • React • [Link]

Code Name Use in MERN API

400 Bad Request Validation error, malformed request body

401 Unauthorized Missing or invalid authentication token

403 Forbidden Authenticated but insufficient permissions (RBAC)

404 Not Found Resource does not exist ([Link] → null)

409 Conflict Duplicate email on signup, optimistic lock conflict

422 Unprocessable Entity Semantic validation error

429 Too Many Requests Rate limit exceeded

500 Internal Server Error Unhandled exception, DB error

503 Service Unavailable Overloaded or DB connection failure

React Hooks Reference


Hook Signature When to Use

useState const [v, setV] = useState(init) Any local mutable state

useEffect useEffect(fn, deps) Side effects, subscriptions, data fetching

useContext const val = useContext(Ctx) Consume context without Consumer wrapper

useRef const ref = useRef(init) DOM refs, mutable values without re-render

useMemo const v = useMemo(fn, deps) Expensive computed values

useCallback const fn = useCallback(fn, deps) Stable callback references for children

useReducer const [s, d] = useReducer(reducer, init) Complex state with multiple sub-values

useId const id = useId() Generate stable unique IDs for accessibility

useTransition const [p, startT] = useTransition() Mark updates as non-urgent (Concurrent)

useDeferredValue const v = useDeferredValue(val) Defer a value to keep UI responsive

MERN Stack Interview Guide Page 35 © Interview Prep Series

You might also like