🔥 Web Development Interview Questions with Sample Answers — Part 6 (Testing Optimization)

🧪 51) How do you test your React components?
👉 Answer: “I use Jest for unit tests and React Testing Library for components. Example: render(<Button />); fireEvent.click(screen.getByText('Click')); expect(mockFn).toHaveBeenCalled();. Tests user interactions, not implementation.”

🔍 52) What is React DevTools and how do you use it?
👉 Answer: “Browser extension to inspect components, props, state, and performance. I use it to debug re-renders, check hooks, and profile slow components with the Profiler tab.”

⚙️ 53) Explain virtual DOM and reconciliation.
👉 Answer: “Virtual DOM is a lightweight JS copy of real DOM. React compares new VDOM with previous (reconciliation/diffing), updates only changed real DOM nodes. Makes updates fast.”

🚀 54) What is Next.js and its advantages?
👉 Answer: “Next.js is React framework with SSR, SSG, API routes. Advantages: better SEO (SSR), faster loads (SSG), file-based routing, built-in optimization. I use getServerSideProps for dynamic data.”

📊 55) How do you measure app performance?
👉 Answer: “Lighthouse for audits (scores on speed/SEO), Chrome DevTools Network tab for API times, React Profiler for re-renders, Core Web Vitals (LCP, FID, CLS) for user experience.”

🔐 56) What is OWASP Top 10 and how do you secure apps?
👉 Answer: “Top web risks like XSS, CSRF, injection. I secure with: helmet.js (headers), input sanitization, rate limiting, HTTPS, bcrypt for passwords, validate/sanitize all inputs.”

🧑‍💻 57) Difference between npm and yarn?
👉 Answer: “Both package managers. Yarn faster installs, deterministic (yarn.lock), parallel downloads. npm improved with v7+ (package-lock.json). I use yarn for speed in teams.”

🌐 58) What are WebSockets vs REST?
👉 Answer: “REST: request-response (polling). WebSockets: persistent connection for real-time (chat, notifications). Use Socket.io on Node.js: io.on('connection', socket => { socket.on('message', ...)});.”

📱 59) How do you make apps responsive?
👉 Answer: “CSS media queries (@media (max-width: 768px)), flexbox/grid, mobile-first design, TailwindCSS utilities (sm:, md:), test on devices with Chrome DevTools responsive mode.”

⚖️ 60) Explain optimistic updates in UI.
👉 Answer: “Update UI immediately assuming API success (e.g., like a post), then rollback on error. Improves perceived speed: setPosts([...posts, newPost]); await api.post(newPost).catch(() => revert());.”

🎯 Bonus Tip
For live coding: Talk through your thought process aloud. “First, I'll set up state... now handle the edge case...” shows problem-solving.

Double Tap ❤️ For More