🔍 13 Frontend Interview Questions for Full-Stack Developers

1. How Does the Browser Render a Webpage?

The Critical Rendering Path:

1. HTML is parsed into a DOM

2. CSS is parsed into a CSSOM

3. Render Tree = DOM + CSSOM

4. Layout: computes geometry

5. Paint: pixels drawn

6. Compositing: layers combined

Optimize this path by deferring non-critical resources and minimizing blocking scripts.

---

2. What Is Event Delegation?

Instead of attaching listeners to many child elements, we attach one listener to a common parent and use event.target to determine the source.

Why it's powerful:

• Works for dynamic content

• Fewer listeners = better performance

---

3. How Does React’s Reconciliation Work?

React builds a new virtual DOM tree on every state/prop update, then diffs it with the previous one.

• Only the minimal required DOM mutations are applied

• key props are crucial for efficient list diffs

---

4. Controlled vs Uncontrolled Components in React

• Controlled: React state owns the input (value, onChange)

• Uncontrolled: DOM manages the state (ref access)

Controlled components offer better control and testability — ideal for validations and conditionals.

---

5. How Do You Handle Async Data in React?

Typical pattern:

• Use useEffect to trigger fetch

• Maintain states: loading, error, data

• Avoid memory leaks via abort signals or isMounted checks

• Consider React Query for caching, retries, and background updates

---

6. == vs === in JavaScript

• == performs type coercion (e.g., "5" == 5 → true)

• === is strict (no coercion)

Use === by default to avoid bugs.

---

7. What Is a Closure?

A closure is a function that remembers variables from its lexical scope, even after that scope has exited.

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

Used in debouncing, memoization, and encapsulating private state.

---

8. What Causes React Re-renders?

• State or props change

• Context update

Avoid unnecessary renders with:

• React.memo

• useMemo, useCallback

• Guarding against setting identical state

---

9. How Do You Optimize Frontend Performance?

• Lazy-load images & components

• Code-split using React.lazy or import()

• Use CDN for static assets

• Minify + compress JS/CSS

• Memoize expensive computations

---

10. What Are Common Frontend Security Concerns?

• XSS: escape HTML, use dangerouslySetInnerHTML sparingly

• CSRF: use SameSite cookies, CSRF tokens

• Avoid exposing secrets in client code

• Always validate inputs both client and server-side

---

11. Best Practices for API Integration in React

• Use fetch or Axios with async/await

• Model loading, error, data explicitly

• Use HTTP status codes meaningfully

• Handle pagination, retries, token expiry

---

12. How Does useEffect Work with Dependencies?

• Triggers when any dependency changes

• Common mistakes:

  • Omitting deps → stale values

  • Including unstable functions → infinite loops

Use useCallback or useRef to stabilize dependencies when needed.

---

13. Can You Write a Debounce Function?

Yes. Used to throttle rapid events like keystrokes or window resize:

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

---

Final Thoughts

In under 35 minutes, these questions let you gauge:

• JavaScript depth

• React fluency

• Async thinking

• Performance awareness

• Real-world readiness

Even backend-heavy candidates should be able to reason through most of these. If they can’t — they're not ready to ship modern web UIs. If they can — you’ve got a true full-stack asset.