Frontend Interview Questions (Part 8)

Question 1. What is TCP Slow Start?

• TCP doesn’t send data at full speed immediately.
• At first, congestion window (maximum amount of data that can be sent at once without waiting for a response) is very small (~14KB).
• With each ACK received, congestion window increases exponentially until it reaches a threshold, then grows linearly.
• Purpose: probe the network capacity safely, avoid overwhelming routers.
• Implication: keep first HTML response <14KB (compressed) for best initial load speed.

Question 2. What are TypeScript Generics?

• Generics = types as variables.
• Accepting types as parameters like variables
• Allow functions, classes, and interfaces to be type-agnostic while preserving type safety.

function identity<T>(value: T): T {
  return value;
}
identity<number>(10); // Explicit
identity("hi"); // Type inferred

• Benefits:

  • Reusability
  • Type safety
  • Works with complex data structures (arrays, promises, etc.)

Question 3. Difference between null and undefined

• undefined: variable declared but not assigned a value.
• null: explicitly assigned “no value”.

let a; // undefined
let b = null; // null

Question 4. How to show a modal on hover?

• Purely visual: CSS :hover + visibility/opacity/transform.
• With logic (async fetch, analytics, etc.): JavaScript (React useState + onMouseEnter).

Question 5. How was state managed before React?

• Manual DOM manipulation via vanilla JS or jQuery.
• UI = imperative: directly updated DOM nodes.
• Problem: state scattered across code → unmaintainable in large apps.
• React introduced declarative state → UI model.
• UI is a function of state: f(state) = UI

Question 6. Common causes of memory leaks in JS

• Global variables not released.
• Event listeners not removed.
• Timers (setInterval, setTimeout) left running.
• References to detached DOM nodes.
• Objects strongly held in Map/Set even after references are cleared.

Prevention:

• Always removeEventListener when elements are removed.
• Clear timers (clearInterval, clearTimeout) when no longer needed.
• Minimize global state.
• Prefer WeakMap / WeakSet for temporary associations:
  • They hold weak references → if an object has no other references, it is automatically garbage collected, even if still inside the WeakMap / WeakSet.
  • Useful for caching, storing metadata, or mapping DOM nodes without risking memory leaks.
  • Note: Only objects can be keys/values, and iteration or size-checking is not supported.

Example:

let obj = { name: "hank" };

// Using Map (strong reference, prevents GC)
let map = new Map();
map.set(obj, "developer");
obj = null;
console.log(map.size); // 1 → object not GC’d

// Using WeakMap (weak reference, allows GC)
let weakMap = new WeakMap();
let obj2 = { name: "hank" };
weakMap.set(obj2, "developer");
obj2 = null;
// object is now eligible for GC, weakMap cleans up automatically
---

## Question 7. What is a Higher-Order Function (HOF)?

- Function that takes a function as input or returns one.
- Examples: `map`, `filter`, `reduce`.

```js
const multiplier = (factor) => (n) => n * factor;
const double = multiplier(2);
double(5); // 10

• React hooks like useCallback, useMemo also follow HOF pattern.

Question 8. Key ES6 Features

1. Destructuring

   const { name, age } = { name: "Hank", age: 25 };
   

   → improves readability.

2. Optional Chaining (?.)

   user?.profile?.email;
   

3. Nullish Coalescing (??)

   let a = 0;
   a ?? 10; // 0
   a || 10; // 10
   

4. Spread Operator (…)

   const arr2 = [...arr1];
   const obj = { ...obj1, ...obj2 };
   

Question 9. What are React Class Components?

• Before React Hooks, React components were ES6 classes with render() method.

class MyComponent extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

• Today → functional components + hooks preferred (simpler, easier to test).

Question 10. What are React Concurrent Features?

• Introduced in React 18 for interruptible rendering.
• startTransition → mark low-priority updates (background work).
• useDeferredValue → delay expensive computation until after urgent UI.
• Makes UIs feel more responsive.

Question 11. What is React Fiber?

• React’s new reconciliation engine (since v16).
• Splits rendering work into chunks (units of work).
• Can pause, resume, or discard work → enables concurrent rendering.
• Improves scheduling and prioritization.

Easy Explanation

Before React 16 (v15 and earlier)

• React would recalculate the entire component tree in one go.
• It couldn’t stop in the middle, so if rendering took too long, the browser would freeze.
• Result: UI felt “laggy” — button clicks and interactions were delayed.

With React Fiber (v16 and later)

• React breaks rendering work into small units of work.
• If the browser is busy, React can pause, wait, and then resume later.
• If the work is no longer needed, it can even discard it.

This means:

• Even with heavy rendering, user input (like button clicks) can be processed immediately.
• Leads to smoother, more responsive UI.

Question 12. What is React Strict Mode?

• Development-only wrapper to detect potential issues.
• Runs some functions twice (like component initialization, effects) to detect side effects.
• Detects unsafe lifecycles, legacy APIs, and deprecated patterns.
• No effect in production.

Question 13. What is useLayoutEffect?

• Runs synchronously after DOM mutations, before paint.
• Useful when you need to measure DOM layout and apply synchronous updates.
• Warning: blocks painting → use sparingly.

Question 14. Next.js Key Features

1. Server vs Client Components (App Router).
2. Hydration → client JS attaches to server-rendered HTML.
3. SEO & Metadata APIs.
4. Image Optimization with <Image>.
5. Code Splitting & Lazy Loading.
6. Serverless API Routes (/api/*).

Question 15. What testing tools do you use?

• Jest → unit tests, mocking.
• React Testing Library (RTL) → test from user perspective.
• Cypress / Playwright → end-to-end browser tests.

Question 16. How do you test async data fetching?

• Use findBy... or waitFor to wait for UI update.
• Mock network requests with jest.mock.
• Verify: loading → success → error states.

Question 17. How do you test forms & UI interactions?

• Use userEvent.type, userEvent.click.
• Assert validation messages, enabled/disabled states, submission handling.

Question 18. When to use E2E tests?

• For critical user flows (login, checkout, dashboard).
• Unit/integration cover most logic, E2E reserved for high-value scenarios.

Question 19. Live Coding Examples

// Remove duplicates
const arr = [1,2,3,5,2,3,5,6,7,5];
console.log([...new Set(arr)]);

// Debounce
function debounce(fn, delay) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), delay);
  };
}

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

// CSS Grid
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

// Hover transition
.box {
  transition: background 0.3s ease;
}
.box:hover { background: red; }