Frontend Interview Questions (Part 4)

---

Question 1. What are the types of testing, and why are they used?

Unit Test

• Tests the smallest unit of code (function, component).
• Fast, easy to debug.
• Example: Verify that a React component renders correctly with given props.

Integration Test

• Ensures multiple modules work correctly together.
• Example: “Login form → API call → state update → UI reflects change.”

E2E Test (End-to-End)

• Simulates real user flows across the entire app.
• Uses tools like Cypress, Playwright, Selenium.
• Example: User can register → login → create a post successfully.

👉 Reason: Tests provide confidence, catch regressions, and improve reliability.

---

Question 2. What is React Testing Library (RTL)?

• A testing library focused on testing apps the way users interact with them.
• Avoids testing implementation details.

How it Works

1. render() renders the component in a virtual DOM.
2. Query elements with getByText, getByRole, getByLabelText, etc.
3. Trigger interactions with fireEvent or userEvent.
4. Assert outcomes with Jest matchers like expect(...).toBeInTheDocument().

👉 Example: Instead of selecting an element by className, you query by text visible to the user.

---

Question 3. What is Mocking in testing?

• Creating fake versions of external dependencies (API, DB, network calls).
• Purpose: Make tests fast, reliable, and deterministic.

Why Needed

• Remove external dependencies (API down → tests unaffected).
• Ensure consistent results for network, random values, or dates.

---

Question 4. What is Context API, why use it, and how is it different from Redux?

Context API

• Built-in React tool for global state sharing.
• Solves prop drilling problem.
• Weak granularity: when value changes, all consumers re-render.

When to Use

• Infrequently changing state: theme, language, authentication.

Redux Difference

• Redux allows fine-grained subscription: useSelector re-renders only if the subscribed slice changes.
• Uses reference equality (===) checks for optimization.
• Context API triggers broader re-renders.

👉 Conclusion: Context is simple but less efficient for frequently changing global state.

---

Question 5. How can you optimize CSS performance?

1. Remove unused CSS.
2. Avoid deeply nested selectors (div div ul li).
3. Minimize reflows (layout changes).
4. Batch DOM writes/reads.
5. Use GPU-friendly properties for animations: transform, opacity.

👉 Key: Reduce reflows and leverage GPU.

---

Question 6. Explain Event Bubbling, Capturing, and Delegation.

Capturing Phase

• Event flows from root → target.
• Use { capture: true } to listen here.

Bubbling Phase

• Event flows from target → root (default).

Event Delegation

• Leverages bubbling by attaching one listener to a parent element instead of multiple children.
• Improves performance and reduces memory usage.

---

Question 7. What is Webpack’s bundling process?

1. Define entry point (index.js).
2. Build dependency graph.
3. Apply loaders (e.g., Babel for JS, CSS-loader for CSS).
4. Apply plugins (e.g., minification, env variables).
5. Output a single optimized bundle (bundle.js).

👉 Webpack = turns modules into an optimized single bundle.

---

Question 8. What is immutability, and how is it applied in React?

• Immutability = do not mutate existing objects/arrays; always return new copies.
• React detects state changes by reference equality.

Example

• ❌ state.list.push(item)
• ✅ setList([...list, item])

👉 Immutability ensures predictable re-renders and easier debugging.

---

Question 9. Explain this binding rules in JavaScript.

1. Default Binding → global object (window in browsers, undefined in strict mode).
2. Implicit Binding → obj.method() → this = obj.
3. Explicit Binding → call, apply, bind.
4. new Binding → new creates a new object, this bound to it.
5. Arrow Functions → no own this, inherit from surrounding lexical scope.

---

Question 10. What are semantic HTML tags, and why are they important?

• Tags that convey meaning: <header>, <main>, <article>, <footer>.

• Benefits:

  • Accessibility (assistive technologies interpret them better).
  • SEO (search engines understand content structure).
  • Maintainability (self-describing markup).

---

Question 11. How to improve accessibility in HTML?

• Use semantic elements.
• Proper heading hierarchy (h1 > h2 > h3).
• aria-* attributes when necessary.
• Descriptive alt text for images.
• Landmark roles (<nav>, <main>).
• Associate <label> with form inputs.

---

Question 12. What’s the role of meta tags in SEO?

• Provide metadata about the page.

Examples

• <meta name="description" content="..."> → search snippets.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> → responsive design.
• Open Graph tags for social sharing previews.

---

Question 13. Difference between GET and POST in HTML forms?

• GET

  • Appends data to URL.
  • Visible and cacheable.
  • Used for non-sensitive or bookmarkable data.

• POST

  • Sends data in request body.
  • Not visible in URL.
  • Suitable for sensitive or large payloads.

---

Question 14. What is CSS specificity and how is it calculated?

• Determines which CSS rule overrides another.

Specificity order

1. Inline styles → highest.
2. IDs → higher than classes.
3. Classes, attributes, pseudo-classes.
4. Element selectors, pseudo-elements.
5. If equal → later rule wins.
6. !important overrides all.

---

Question 15. Difference between Flexbox and Grid?

• Flexbox: One-dimensional (row or column).

  • Best for aligning items within a line.

• Grid: Two-dimensional (rows and columns).

  • Best for page layouts or complex grids.

---