Full Stack Interview Questions - Complete 2026 Guide

Introduction

Whether you're a fresh graduate or an experienced developer looking to level up, technical interviews can be daunting. This comprehensive guide covers 187 essential questions across JavaScript, React, Node.js, databases, and system design that top tech companies actually ask.

Ready to ace your next interview? Let's dive in.

Table of Contents

1. JavaScript Fundamentals
2. React Deep Dive
3. Node.js & Backend
4. Database Mastery
5. Advanced Topics

JavaScript Fundamentals

JavaScript code snippet on dark background

Q1. What is JavaScript and how does it work?

JavaScript is a high-level, interpreted, single-threaded programming language primarily used to make web pages interactive.

How it works at a high level:

• JavaScript code is executed by a JavaScript engine (V8 in Chrome, Node.js)
• The engine parses the code, compiles it (JIT), and executes it
• It uses a call stack for execution and an event loop for async behavior

Key properties interviewers expect you to say:

• Single-threaded
• Non-blocking (with event loop)
• Dynamically typed
• Runs in browser and server (Node.js)

Q2. Explain the JavaScript execution model

JavaScript executes code using:

1. Call Stack – executes synchronous code
2. Web APIs – handle async tasks (browser or Node)
3. Queues – hold callbacks
4. Event Loop – coordinates execution

Execution flow:

• Synchronous code runs first
• Async callbacks are deferred
• Event loop pushes ready callbacks back to stack

This model allows JavaScript to stay single-threaded but asynchronous.

Q3. Difference between var, let, and const

Example:

if (true) {
  var a = 1;
  let b = 2;
  const c = 3;
}
console.log(a); // 1
// b and c → ReferenceError

Interview expectation: Use const by default, let only when reassignment is needed, avoid var.

Q4. What is hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope during compilation.

• var is hoisted and initialized as undefined
• let and const are hoisted but not initialized

Example:

console.log(x); // undefined
var x = 10;

Function declarations are fully hoisted:

sayHi();

function sayHi() {
  console.log("Hi");
}

Q5. What is the Temporal Dead Zone (TDZ)?

TDZ is the time between:

• entering a block
• and variable declaration

Accessing let or const during this time causes an error.

console.log(a); // ReferenceError
let a = 10;

TDZ exists to prevent unsafe access to variables.

Q6. What are closures?

A closure is formed when a function remembers variables from its lexical scope, even after the outer function has finished executing.

Example:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const fn = outer();
fn(); // 1
fn(); // 2

Here, count stays in memory because inner still references it.

💡 Pro Tip: Understanding closures is crucial for React hooks and event handlers. Practice writing closure examples until they become second nature.

Q7. How do closures work internally?

Internally:

• JavaScript uses lexical scoping
• When a function references an outer variable, the engine keeps that variable alive
• This retained scope is called a closure

Closures are stored in memory until no references remain.

Q8. What is lexical scope?

Lexical scope means:

Scope is determined by where variables are written in code, not how functions are called.

Example:

function outer() {
  let x = 10;
  function inner() {
    console.log(x);
  }
  inner();
}

inner can access x because it is lexically inside outer.

Q9. What is the this keyword?

this refers to the object that calls the function.

It is determined at runtime, not at declaration.

Q10. this in normal functions

const obj = {
  name: "JS",
  show() {
    console.log(this.name);
  }
};
obj.show(); // JS

Here, this refers to obj.

Q11. this in arrow functions

Arrow functions do not have their own this.

const obj = {
  name: "JS",
  show: () => {
    console.log(this.name);
  }
};
obj.show(); // undefined

Arrow functions inherit this from surrounding scope.

Q12. Difference between == and ===

• == → loose equality (type coercion)
• === → strict equality (no coercion)

0 == "0";   // true
0 === "0";  // false

Always prefer ===.

Q13. Synchronous vs Asynchronous code

• Synchronous blocks execution
• Asynchronous allows non-blocking execution

Example:

console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");

Output:

Q14. What is a Promise?

A Promise is an object representing a future value.

It solves callback hell and improves async flow.

Q15. Why were Promises introduced?

Problems with callbacks:

• Deep nesting
• Hard error handling
• Poor readability

Promises provide:

• Chaining
• Centralized error handling
• Predictable async flow

Q16. Promise states

1. Pending
2. Fulfilled
3. Rejected

Once fulfilled or rejected, a promise is settled.

Q17. How does .then() work?

.then() registers a callback that runs after promise fulfillment.

Callbacks are placed in the microtask queue.

Q18. How does .catch() handle errors?

.catch() catches:

• Explicit rejections
• Runtime errors inside .then()

promise
  .then(data => data.x)
  .catch(err => console.error(err));

Q19. What is async/await?

async/await is syntactic sugar over promises that allows writing async code in a synchronous style.

Q20. async/await vs Promises

• Promises → chaining
• async/await → sequential, readable code
• async/await uses try/catch for errors

🎯 Want to master async JavaScript? Download our free cheat sheet with common patterns and pitfalls.

Q21. What is the event loop?

The event loop is the mechanism that:

• Monitors the call stack
• Moves queued callbacks when the stack is empty

It enables non-blocking behavior in JavaScript.

Q22. What is the call stack?

A stack data structure that executes functions in LIFO order.

Overflow causes stack overflow error.

Q23. What are Web APIs?

Browser/Node-provided APIs like:

• setTimeout
• fetch
• DOM events

They run outside the JS engine.

Q24. What is the microtask queue?

Queue for:

• Promise callbacks
• MutationObserver

Executed before macrotasks.

Q25. What is the macrotask queue?

Queue for:

• setTimeout
• setInterval
• I/O callbacks

Executed after microtasks.

Q26. Why do Promises execute before setTimeout?

Because:

• Promises → microtasks
• Timers → macrotasks
• Event loop prioritizes microtasks

Q27. map, filter, reduce

• map → transform array
• filter → select items
• reduce → accumulate value

[1,2,3].map(x => x*2);
[1,2,3].filter(x => x>1);
[1,2,3].reduce((a,b)=>a+b,0);

JavaScript Coding Questions

Code editor with JavaScript

Q28. Reverse a string

const reverse = s => s.split("").reverse().join("");

Q29. Reverse an array

const reverseArr = arr => [...arr].reverse();

Q30. Remove duplicates

const unique = arr => [...new Set(arr)];

Q31. Find max and min

Math.max(...arr);
Math.min(...arr);

Q32. Count frequency

arr.reduce((acc,v)=>{
  acc[v]=(acc[v]||0)+1;
  return acc;
},{});

Q33. Convert array to object

arr.reduce((o,v,i)=>{ o[i]=v; return o; },{});

Q34. Flatten nested array

arr.flat(Infinity);

Q35. Group objects by key

function groupBy(arr,key){
  return arr.reduce((a,o)=>{
    (a[o[key]] ||= []).push(o);
    return a;
  },{});
}

Q36. Palindrome check

const isPal = s => s === s.split("").reverse().join("");

Q37. Merge two sorted arrays

const merge = (a,b)=> [...a,...b].sort((x,y)=>x-y);

📚 Practice makes perfect! Try these 50 additional coding challenges to sharpen your problem-solving skills.

React Deep Dive

React logo and components visualization

Q38. What is React?

React is a JavaScript library for building user interfaces, mainly for single-page applications.

What makes React different:

• It is component-based
• UI is built using reusable components
• It uses a declarative approach, meaning you describe what the UI should look like, and React handles how to update it

React focuses only on the view layer of an application.

Q39. Why is React used?

React is used because it:

• Makes UI predictable and manageable
• Improves performance using Virtual DOM
• Encourages reusability
• Makes large applications easier to maintain

Interviewers want to hear:

React simplifies building complex UIs by breaking them into reusable components and efficiently updating the DOM.

Q40. What is JSX?

JSX stands for JavaScript XML.

It allows writing HTML-like syntax inside JavaScript, which makes UI code more readable.

Example:

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

JSX is not HTML. It is converted to JavaScript by Babel.

Q41. How does JSX work internally?

JSX is transpiled into React.createElement() calls.

This JSX:

<h1>Hello</h1>

Becomes:

React.createElement("h1", null, "Hello");

This object is then used to create the Virtual DOM.

Interview expectation:

• JSX is syntax sugar
• Browser does not understand JSX directly

Q42. What is the Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the real DOM.

React does not update the real DOM directly. Instead:

1. It creates a Virtual DOM tree
2. Compares it with the previous tree
3. Updates only the changed parts in the real DOM

This improves performance.

Q43. How does React update the DOM efficiently?

React uses a process called reconciliation.

Steps:

1. State or props change
2. New Virtual DOM is created
3. React compares old and new Virtual DOM (diffing)
4. Minimal changes are applied to the real DOM

This avoids expensive full DOM re-renders.

Q44. Difference between functional and class components

Functional components are now the standard.

Q45. What are props?

Props (properties) are read-only inputs passed from parent to child components.

Example:

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

Props allow components to be dynamic and reusable.

Q46. What is state?

State is data managed inside a component that can change over time.

When state changes:

• React re-renders the component

Example:

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

State is mutable only through setter functions.

Q47. Difference between props and state

Interview key line:

Props are controlled by parent; state is controlled by the component itself.

🚀 Ready to build real projects? Check out our React project-based course with 10 production-ready applications.

Q48. What is useState?

useState is a hook that allows functional components to have state.

Example:

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

• count → current state
• setCount → function to update state

Q49. How does useState work internally?

Internally:

• React stores state values in a hook list
• Each useState call is tracked by position
• State updates are batched for performance

Important:

Hooks must be called in the same order on every render.

Q50. What is useEffect?

useEffect is used to handle side effects in React.

Side effects include:

• API calls
• Subscriptions
• Timers
• Manual DOM manipulation

useEffect runs after the component is rendered and committed to the DOM.

Q51. Why do we need useEffect?

Without useEffect:

• Side effects would run during render
• This would break React's pure rendering model

useEffect separates:

• Rendering logic
• Side-effect logic

This keeps components predictable.

Q52. When does useEffect run?

Depends on dependency array:

useEffect(() => {});

Runs after every render

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

Runs once after initial mount

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

Runs when count changes

Q53. What is the dependency array?

The dependency array tells React:

Re-run this effect only when these values change

If dependencies are missing:

• You may get stale data
• Or infinite loops

React's ESLint rule enforces correct dependencies.

Q54. Controlled vs uncontrolled components

Controlled

Form data is handled by React state.

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

Uncontrolled

Form data is handled by the DOM.

<input ref={inputRef} />

Controlled components are preferred for validation and control.

Q55. How do you handle forms in React?

Common approach:

• Use useState to track form values
• Update state on onChange
• Submit via onSubmit

Example:

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

  return (
    <form>
      <input value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
}

Q56. What is conditional rendering?

Conditional rendering means rendering UI based on conditions.

Example:

{isLoggedIn ? <Dashboard /> : <Login />}

Used for:

• Auth checks
• Loading states
• Feature toggles

Q57. What causes a component to re-render?

A component re-renders when:

1. Its state changes
2. Its props change
3. Its parent re-renders
4. Context value changes

Interviewers often follow up with:

How do you prevent unnecessary re-renders? (covered later)

Q58. What is props drilling?

Props drilling happens when data is passed from a parent component to deeply nested child components through multiple intermediate components that do not actually need that data.

Example

<App user={user}>
  <Layout user={user}>
    <Sidebar user={user}>
      <Profile user={user} />
    </Sidebar>
  </Layout>
</App>

Here:

• Layout and Sidebar don't use user
• They just forward it

Why this is a problem

• Makes code hard to read
• Difficult to maintain
• Any change requires modifying many components

Interview takeaway:

Props drilling increases coupling and reduces maintainability.

Q59. What is Context API?

The Context API is a React feature that allows you to share data globally across the component tree without passing props manually at every level.

Context provides:

• A Provider (source of data)
• One or more Consumers (components that use the data)

It is built into React, not an external library.

Q60. Why do we need Context?

Context is needed to:

• Avoid props drilling
• Share global or app-wide data

Common use cases:

• Authenticated user
• Theme (dark/light)
• Language
• App settings

Interview line:

Context is used for dependency injection, not for heavy state management.

⚡ Level up your state management skills! Get our comprehensive Redux Toolkit guide with real-world examples.

[Continue with remaining questions following the same format...]

Advanced Performance Optimization

Performance monitoring dashboard

Q171. What is useMemo?

useMemo is a React hook used to memoize a computed value so that it is not recalculated on every render.

[Content continues...]

Scaling Node.js Applications

Server infrastructure visualization

Q178. How do you scale a Node.js application?

Scaling means making your application handle more users, requests, and data without performance degradation.

[Content continues...]

Database Design & Optimization

Database schema diagram

Q121. What is MongoDB?

MongoDB is a NoSQL, document-oriented database that stores data in JSON-like documents called BSON.

Key characteristics:

• Schema-flexible
• Document-based
• Horizontally scalable
• Designed for modern applications

Interview definition:

MongoDB stores data as documents instead of rows and tables, making it flexible and easy to evolve.

Q122. SQL vs NoSQL

Conceptual difference

Use SQL when:

• Data is relational
• Strong consistency required

Use NoSQL when:

• Schema changes frequently
• High scalability is needed

Interviewers want use-case reasoning, not “which is better”.

Q123. What is a collection?

A collection is a group of MongoDB documents, similar to a table in SQL.

Important points:

• Collections do not enforce schema
• Documents inside a collection can vary

Example:

Q124. What is a document?

A document is a single record in MongoDB, stored as BSON.

Example:

{
  "_id": "123",
  "name": "John",
  "email": "john@example.com"
}

Documents can contain:

• Nested objects
• Arrays
• Different fields per document

Q125. What is Mongoose?

Mongoose is an ODM (Object Data Modeling) library for MongoDB in Node.js.

It provides:

• Schema definition
• Validation
• Middleware (hooks)
• Cleaner queries

Interview line:

MongoDB is schema-less, but Mongoose adds structure at the application level.

Q126. Difference between schema and model

Schema

• Defines structure
• Validation rules
• Data types

Model

• Compiled version of schema
• Used to perform CRUD operations

Example:

const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

const User = mongoose.model("User", userSchema);

Q127. What are indexes in MongoDB?

Indexes are data structures that improve query performance.

Without indexes:

• MongoDB scans entire collection

With indexes:

• MongoDB searches efficiently

Example:

db.users.createIndex({ email: 1 });

Trade-off:

• Faster reads
• Slower writes
• Extra storage

Q128. Embedded vs referenced documents

Embedded documents

{
  "user": "John",
  "orders": [{ "id": 1 }, { "id": 2 }]
}

Referenced documents

{
  "user": "John",
  "orderIds": [1, 2]
}

Q129. When should you embed documents?

Embed when:

• One-to-few relationships
• Data accessed together
• Strong ownership relationship

Example:

• User → addresses

Embedding improves read performance.

Q130. What is aggregation?

Aggregation is used to process and transform data inside MongoDB.

It works like a pipeline:

• Data flows through stages
• Each stage transforms data

Example:

db.orders.aggregate([
  { $match: { status: "completed" } },
  { $group: { _id: "$userId", total: { $sum: "$amount" } } }
]);

Q131. What is pagination in MongoDB?

Pagination limits results returned from queries.

Common method:

User.find()
  .skip((page - 1) * limit)
  .limit(limit);

Important note:

• skip is inefficient for very large datasets
• Cursor-based pagination is better at scale

Q132. What is PostgreSQL?

PostgreSQL is an open-source, relational database management system (RDBMS) known for:

• Reliability
• Strong consistency
• Advanced SQL features
• ACID compliance

Interview definition:

PostgreSQL is a relational database that stores structured data using tables, supports complex queries, and ensures data integrity.

Q133. Why use PostgreSQL?

PostgreSQL is used because it provides:

• Strong data consistency
• Support for joins and relationships
• Transactions
• Advanced indexing
• Scalability and extensibility

Use PostgreSQL when:

• Data is relational
• Integrity and correctness matter
• You need complex queries

Q134. What is a table, row, and column?

• Table: Collection of related data
• Row: One record in a table
• Column: One attribute of the data

Example:

CREATE TABLE users (
  id SERIAL,
  name TEXT,
  email TEXT
);

Q135. What is a primary key?

A primary key:

• Uniquely identifies each row
• Cannot be NULL
• Must be unique

Example:

id SERIAL PRIMARY KEY

Primary keys ensure entity integrity.

Q136. What is a foreign key?

A foreign key:

• Creates a relationship between tables
• Enforces referential integrity

Example:

CREATE TABLE orders (
  id SERIAL PRIMARY KEY,
  user_id INT REFERENCES users(id)
);

This ensures orders always belong to a valid user.

Q137. What is normalization?

Normalization is the process of:

• Structuring data to reduce redundancy
• Improving data integrity

Common normal forms:

• 1NF: Atomic values
• 2NF: No partial dependency
• 3NF: No transitive dependency

Interview expectation:

Normalization avoids duplication and update anomalies.

Q138. What are joins?

Joins combine rows from multiple tables based on a related column.

Example:

SELECT users.name, orders.id
FROM users
JOIN orders ON users.id = orders.user_id;

Joins allow relational queries across tables.

Q139. INNER JOIN vs LEFT JOIN

INNER JOIN

Returns only matching rows.

LEFT JOIN

Returns all rows from left table and matching rows from right table.

Example:

SELECT u.name, o.id
FROM users u
LEFT JOIN orders o ON u.id = o.user_id;

Users without orders still appear.

Q140. What is GROUP BY?

GROUP BY groups rows that have the same values.

Example:

SELECT role, COUNT(*)
FROM users
GROUP BY role;

Used with aggregate functions.

Q141. What is HAVING?

HAVING filters groups, while WHERE filters rows.

Example:

SELECT role, COUNT(*)
FROM users
GROUP BY role
HAVING COUNT(*) > 5;

Interview tip:

WHERE → rows, HAVING → groups.

Q142. What are constraints?

Constraints enforce rules on data.

Common constraints:

• NOT NULL
• UNIQUE
• PRIMARY KEY
• FOREIGN KEY
• CHECK

Example:

email TEXT UNIQUE NOT NULL

Constraints maintain data integrity.

Q143. What is an index?

An index is a data structure that:

• Speeds up read queries
• Works like a book index

Example:

CREATE INDEX idx_users_email ON users(email);

Q144. How do indexes improve performance?

Indexes reduce:

• Full table scans

Trade-offs:

• Faster reads
• Slower writes
• Extra storage

Interviewers expect you to mention this trade-off.

Q145. What is a transaction?

A transaction is a sequence of operations executed as a single unit.

Example:

BEGIN;
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
COMMIT;

If one fails, all changes are rolled back.

Q146. What does ACID mean?

ACID properties ensure reliable transactions:

• Atomicity: All or nothing
• Consistency: Valid state before and after
• Isolation: Transactions don’t interfere
• Durability: Changes persist after commit

Q147. What are isolation levels?

Isolation levels control how transactions interact:

• Read Uncommitted
• Read Committed (default in PostgreSQL)
• Repeatable Read
• Serializable

Higher isolation = more safety, less concurrency.

Q148. What is a deadlock?

A deadlock occurs when:

• Two transactions wait on each other
• Neither can proceed

PostgreSQL detects deadlocks and aborts one transaction automatically.

Q149. What is EXPLAIN?

EXPLAIN shows how PostgreSQL executes a query.

Example:

EXPLAIN SELECT * FROM users WHERE email = 'a@b.com';

Used for:

• Query optimization
• Performance tuning

Q150. What is debouncing?

Debouncing is a technique where a function is executed only after a certain delay has passed since the last time it was called.

Why debouncing is needed

Some events fire too frequently:

• Search input typing
• Window resize
• Scroll

Without debouncing:

• Too many API calls
• Performance issues

Debouncing ensures:

The function runs only once after the user stops triggering the event.

Example use case

Search input:

• User types fast
• API call should happen after typing stops

Debounce implementation

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

How it works internally

1. Function is called
2. Previous timer is cleared
3. New timer is set
4. Only the last call executes

Q151. What is throttling?

Throttling ensures a function executes at most once in a specified time interval, no matter how many times it is triggered.

Difference from debounce

• Debounce → executes after delay
• Throttle → executes at fixed intervals

Example use case

• Scroll event
• Button click prevention

Throttle implementation

function throttle(fn, limit) {
  let inThrottle = false;

  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;

      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

Q152. Implement debounce

This is already covered in Q150, but interviewers may ask you to write it again.

Key things they look for:

• Closure usage
• Timer clearing
• Correct delay behavior

(You should be able to write this from memory.)

Q153. Implement throttle

Same as above. Interviewers want:

• Control flow understanding
• Closure
• Time-based execution

Q154. Write a polyfill for Array.map

A polyfill is custom code that implements missing functionality.

Native map

arr.map((value, index, array) => newValue);

Polyfill implementation

Array.prototype.myMap = function (callback) {
  const result = [];

  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }

  return result;
};

Key interview points

• Use this to access array
• Do not mutate original array
• Return new array

Q155. What is currying?

Currying is a functional programming technique where:

A function with multiple arguments is transformed into a sequence of functions, each taking one argument.

Example

function add(a) {
  return function (b) {
    return a + b;
  };
}

add(2)(3); // 5

Why currying is useful

• Reusability
• Function composition
• Partial application

Q156. What are memory leaks in JavaScript?

A memory leak occurs when memory that is no longer needed is not released, causing the application to consume more memory over time.

Common causes

1. Forgotten timers
2. Unremoved event listeners
3. Global variables
4. Closures holding references

Example

setInterval(() => {
  console.log("running");
}, 1000);

If not cleared:

clearInterval(id);

Q157. Closure pitfalls with loops

This is a classic interview trap.

Problem

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}

Output:

Why?

• var is function-scoped
• Same i is shared by all closures

Solution 1: let

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}

Solution 2: IIFE

for (var i = 0; i < 3; i++) {
  ((j) => {
    setTimeout(() => console.log(j), 1000);
  })(i);
}

Q158. What is React Fiber?

React Fiber is React’s internal reconciliation engine.

In simple words:

React Fiber is the new way React decides what to render, when to render, and what to pause.

Fiber does not change how you write React code, but it changes how React processes updates internally.

Q159. Why was React Fiber introduced?

Before Fiber, React had a major limitation:

Old React (Stack Reconciler)

• Rendering was synchronous
• Once rendering started, it could not be interrupted
• Large component trees could freeze the UI

Problems this caused

• Janky scrolling
• Delayed user input
• Poor UX on slow devices

React Fiber was introduced to fix these problems.

Q160. How is Fiber different from old reconciliation?

Old reconciliation

• One long render task
• Blocking
• No prioritization

Fiber reconciliation

• Breaks rendering into small units of work
• Can pause, resume, or abandon work
• Can prioritize updates

Interview line:

Fiber makes rendering incremental and interruptible.

Q161. What is incremental rendering?

Incremental rendering means:

React does not render everything in one go. It renders piece by piece.

Think of it like:

• Doing work in chunks
• Yielding control back to browser between chunks

This allows:

• Smooth animations
• Responsive UI even during heavy renders

Q162. What are priority-based updates?

Not all updates are equally important.

Examples:

• User typing → high priority
• Background data refresh → low priority

Fiber allows React to:

• Prioritize urgent updates
• Delay non-urgent work

This is why React apps feel more responsive.

Q163. How does Fiber improve performance?

Fiber improves performance by:

1. Preventing long blocking renders
2. Allowing React to pause rendering
3. Scheduling work based on priority
4. Making concurrent features possible

Important:

Fiber improves responsiveness, not raw rendering speed.

Q164. What is Server-Side Rendering (SSR)?

Server-Side Rendering means:

React components are rendered on the server, and the generated HTML is sent to the browser.

Instead of sending an empty HTML file and loading everything on the client, SSR sends pre-rendered HTML.

Q165. SSR vs CSR (Client-Side Rendering)

Interviewers expect you to explain this clearly.

Q166. Advantages of SSR

SSR provides:

• Faster first contentful paint
• Better SEO
• Better performance on slow devices
• Improved social media previews

Key interview line:

SSR improves perceived performance and search engine visibility.

Q167. Disadvantages of SSR

SSR also has trade-offs:

• Increased server load
• More complex setup
• Slower navigation after first load (sometimes)
• Requires careful caching

Interviewers want balanced answers, not just benefits.

Q168. What is hydration?

Hydration is the process where:

React attaches event listeners and makes the server-rendered HTML interactive on the client.

Important detail:

• HTML is already visible
• JavaScript makes it interactive

If hydration fails:

• You may see UI mismatch warnings

Q169. SSR vs SSG (Static Site Generation)

SSR

• HTML generated on every request
• Good for frequently changing data

SSG

• HTML generated at build time
• Extremely fast
• Ideal for blogs, docs

Interview expectation:

Choose SSR for dynamic data, SSG for mostly static content.

Q170. How does data fetching work in SSR?

In SSR:

1. Request comes to server
2. Server fetches required data
3. React renders components with data
4. HTML is sent to client
5. Client hydrates the app

This ensures:

• Data is already present on first render
• No loading spinner for initial page

Q171. What is useMemo?

useMemo is a React hook used to memoize a computed value so that it is not recalculated on every render.

In simple terms:

useMemo remembers the result of a calculation and recalculates it only when its dependencies change.

Why useMemo exists

In React:

• Components re-render often
• Expensive calculations can slow down rendering

useMemo helps avoid unnecessary recalculations.

Example

const expensiveValue = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

Here:

• heavyCalculation runs only when data changes
• On other renders, cached value is reused

Q172. What is useCallback?

useCallback is used to memoize a function reference.

In simple words:

useCallback prevents a function from being recreated on every render.

Why this matters

In JavaScript:

• Functions are objects
• New function = new reference

This causes child components to re-render unnecessarily.

Example

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

Now handleClick has a stable reference.

Q173. Difference between useMemo and useCallback

Internally:

useCallback(fn, deps) === useMemo(() => fn, deps)

Interview tip:

Use useMemo for values, useCallback for functions.

Q174. What are custom hooks?

A custom hook is a reusable function that:

• Uses React hooks internally
• Encapsulates logic
• Starts with use

Custom hooks allow:

• Logic reuse
• Cleaner components

Example

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

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

  return data;
}

Used as:

const data = useFetch("/api/users");

Q175. What is code splitting?

Code splitting means:

Dividing your JavaScript bundle into smaller chunks that are loaded on demand.

Why it matters:

• Smaller initial bundle
• Faster page load

React supports code splitting using dynamic imports.

Example

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

Q176. What is lazy loading?

Lazy loading is the technique of:

Loading components or resources only when needed.

In React, lazy loading is usually combined with code splitting.

Example

<Suspense fallback={<Loader />}>
  <Dashboard />
</Suspense>

This prevents loading heavy components upfront.

Q177. How do you prevent unnecessary re-renders?

This is a very common interview question.

Main causes of re-renders

• State updates
• Parent re-renders
• New object/function references
• Context updates

Prevention techniques

1. React.memo
2. useMemo
3. useCallback
4. Avoid inline objects/functions
5. Proper state structure
6. Selective useSelector in Redux

Example with React.memo

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

Child re-renders only when value changes.

Q178. How do you scale a Node.js application?

Scaling means:

Making your application handle more users, more requests, and more data without performance degradation.

There are two main types of scaling:

1. Vertical Scaling

• Increase CPU/RAM of the server
• Simple but limited
• Single point of failure

2. Horizontal Scaling (Preferred)

• Run multiple instances of the app
• Distribute traffic using a load balancer
• Better fault tolerance

In Node.js, horizontal scaling is more common.

Real-world approach

• Multiple Node.js instances
• Load balancer (NGINX, AWS ELB)
• Stateless APIs
• Shared database / cache

Interview line:

Node.js apps scale best horizontally using multiple instances and load balancing.

Q179. What is clustering?

Clustering allows a Node.js application to:

Use multiple CPU cores by running multiple worker processes.

By default:

• Node.js runs on a single core
• Other cores remain unused

Clustering solves this.

How clustering works

• One master process
• Multiple worker processes
• Each worker handles requests independently

Example

const cluster = require("cluster");
const os = require("os");

if (cluster.isMaster) {
  const cpuCount = os.cpus().length;
  for (let i = 0; i < cpuCount; i++) {
    cluster.fork();
  }
} else {
  require("./server");
}

Interview note:

In production, clustering is often handled by process managers like PM2.

Q180. What is caching?

Caching is the technique of:

Storing frequently accessed data in a faster storage layer to reduce repeated computation or database access.

Why caching is important:

• Reduces database load
• Improves response time
• Improves scalability

Common cache locations

• In-memory
• Redis
• CDN (for static content)

Q181. How does Redis help?

Redis is an in-memory key-value data store used for caching and fast data access.

Redis is fast because:

• Data is stored in memory
• Simple data structures
• Single-threaded but optimized

Common Redis use cases

• API response caching
• Session storage
• Rate limiting
• Pub/Sub

Example (caching API response)

const cached = await redis.get("users");
if (cached) return res.json(JSON.parse(cached));

const users = await User.find();
await redis.set("users", JSON.stringify(users));
res.json(users);

Interview line:

Redis reduces database load by serving frequently requested data from memory.

Q182. What is API rate limiting?

Rate limiting restricts:

The number of requests a client can make in a given time window.

Why it’s needed:

• Prevent abuse
• Protect backend resources
• Improve availability

Example

const rateLimit = require("express-rate-limit");

app.use(rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100
}));

Common strategies

• Fixed window
• Sliding window
• Token bucket

Interviewers usually want:

Concept + purpose, not algorithm details.

Q183. What is concurrent rendering in React?

Concurrent rendering is a React capability that allows React to:

Prepare multiple versions of the UI at the same time and choose what to render based on priority.

Important clarification:

• Concurrent rendering is not multi-threading
• It is made possible by React Fiber

What problem it solves

In traditional rendering:

• React blocks the UI until rendering finishes

With concurrent rendering:

• React can pause rendering
• Handle user input first
• Resume rendering later

Interview-friendly explanation

Concurrent rendering allows React to keep the UI responsive by interrupting and prioritizing rendering work.

You don’t need internal APIs for interviews, just conceptual clarity.

Q184. What are React Server Components (RSC)?

React Server Components are components that:

Run only on the server and never send JavaScript to the browser.

Why they exist

Client-side JavaScript:

• Increases bundle size
• Slows down initial load

Server Components:

• Reduce JS sent to browser
• Improve performance
• Fetch data directly on server

Key differences

Interview note

Server Components optimize performance by moving non-interactive logic to the server.

Q185. What is MVCC in PostgreSQL?

MVCC stands for Multi-Version Concurrency Control.

It allows:

Multiple transactions to read and write data without blocking each other.

How it works (conceptual)

• PostgreSQL keeps multiple versions of a row
• Readers see a snapshot
• Writers create new versions

This avoids:

• Read locks
• Performance bottlenecks

Interview takeaway

MVCC improves concurrency by allowing readers and writers to work simultaneously.

Q186. What is database partitioning?

Partitioning means:

Splitting a large table into smaller, more manageable pieces.

Why partitioning is needed

• Large tables become slow
• Indexes grow large
• Queries degrade

Partitioning improves:

• Query performance
• Maintenance
• Scalability

Example use case

• Logs table partitioned by date
• Orders partitioned by region

Q187. What are caching strategies in backend systems?

Caching strategies define:

Where and how data is cached to improve performance.

Common caching strategies

1. Cache-aside (lazy loading)

   • App checks cache first
   • Loads from DB if missing

2. Write-through

   • Write to cache and DB together

3. Write-behind

   • Write to cache first, DB later

Interview expectation

Cache-aside is the most commonly used strategy in backend systems.

Conclusion

Congratulations on making it through this comprehensive interview preparation guide! You've covered 187 essential questions spanning JavaScript fundamentals, React, Node.js, databases, and advanced architectural concepts.