Frontend Interview Questions (Part 1)

These are common questions that appear in frontend interviews. They are not just for interview prep but represent core knowledge every frontend developer should understand.

Question 1. What is the relationship between SSR and Hydration?

SSR (Server-Side Rendering)

• The server (e.g., Next.js) executes React components and sends fully rendered HTML to the client.
• This HTML is static: it contains no event handlers or state logic.

Hydration (Client-Side Work)

• The browser downloads and executes the JavaScript bundle.
• During hydration, React attaches event handlers and state management logic to the pre-rendered HTML.
• Example: A <button> is generated during SSR, but its onClick is only connected during hydration.

Why is Hydration needed?

• SSR provides a visible page but only as a static shell.
• React apps need Virtual DOM synchronization with the real DOM and proper event binding.
• This synchronization process is called hydration.

Question 2. What is Tree Shaking, and what are its requirements?

Definition

• Tree Shaking = eliminating unused (dead) code from the final bundle.
• Optimizes file size and improves performance.

How it Works

• Bundlers (Webpack, Rollup, Vite, etc.) perform static analysis of ES Modules (import/export).
• Exports not used in the code are excluded from the final bundle.

Requirements

1. Must use ESM (import/export), not CommonJS (require).
2. Code must be side-effect free.
3. Set "sideEffects": false in package.json.
4. Use explicit imports (import { add } from './math.js') instead of import *.

Example

ESM (Tree Shaking works)

// math.js
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}

// main.js
import { add } from "./math.js";
console.log(add(1, 2)); // `sub` is removed from the bundle

CommonJS (Tree Shaking fails)

const math = require("./math.js");
const op = process.env.OP;
console.log(math[op](1, 2)); // runtime decision → bundler cannot remove code

👉 Summary: Tree Shaking requires ESM + proper side-effect management.

Question 3. What is a Closure, and when is it useful?

Definition

• A closure is a function that “remembers” its lexical scope even after the outer function has finished executing.

How it Works

• JavaScript follows lexical scoping rules → scope is determined by where the function is defined.
• An inner function can access variables from its outer function.
• If the outer function finishes, those variables are not garbage collected if still referenced by the inner function.

Use Cases

1. Data encapsulation

   function counter() {
     let count = 0;
     return () => ++count;
   }
   const inc = counter();
   inc(); // 1
   inc(); // 2
   

   • Protects state without exposing global variables.

2. State preservation → local variables persist across calls.

3. Callbacks / Event Handlers → safely capture variables in asynchronous code.

👉 Summary: Closures allow data hiding and state persistence, making them essential in JS.

Question 4. What do <script defer> and <script async> do? What’s the difference?

Default Behavior

• When the browser encounters a <script> tag, it pauses HTML parsing to execute it.
• This is because JS can modify the DOM or CSSOM.

defer

• Download: in parallel with HTML parsing.
• Execution: after parsing is finished, right before DOMContentLoaded.
• Scripts execute in order and after DOM is ready.

async

• Download: in parallel with HTML parsing.
• Execution: immediately after download finishes, which can pause parsing.
• Execution order is not guaranteed, and DOM may not be ready.

👉 defer = predictable execution (after DOM is built). 👉 async = fastest possible execution (no order/DOM guarantee).

Question 5. What’s the difference between DOMContentLoaded and load?

DOMContentLoaded

• Fires once the HTML has been parsed and the DOM is fully built.
• Waits for CSS parsing but does not wait for images, videos, or other assets.
• Best time to run JS initialization code.

load

• Fires only after all resources (images, CSS, JS, iframes, etc.) are completely loaded.
• Always occurs much later than DOMContentLoaded.

Order of Events

HTML Parsing → DOM Creation → CSSOM Creation → DOMContentLoaded → load