←

# frontend architecture

// [29] real interview questions. Answers and sources live in the practice app.

practice this topic
  1. Describe the difference between server-side rendering (SSR) and client-side rendering (CSR), including static rendering. What are the trade-offs?(senior)
  2. What is rehydration? Your SSR React app logs 'hydration mismatch' warnings — what causes them and how do you fix them?(senior)
  3. Explain what a single-page application is and how to make one SEO-friendly.(mid)
  4. Name three ways to decrease page load time — perceived or actual — and explain when each matters.(mid)
  5. What is Flash of Unstyled Content (FOUC) and how do you avoid it?(mid)
  6. What are the pros and cons of CSS animations versus JavaScript animations? Which do you reach for first?(mid)
  7. Explain debouncing and throttling. For a search-as-you-type input and for a scroll-position indicator, which one fits each and why?(mid)
  8. Explain lazy loading and how it improves performance. What are the main techniques on the web?(mid)
  9. What are the benefits of using a module bundler, and what is tree shaking?(mid)
  10. What are the advantages and disadvantages of using TypeScript (or other compile-to-JS languages)?(senior)
  11. What are common performance bottlenecks in JavaScript-heavy applications, and how do you systematically find them?(senior)
  12. How can you optimize network requests for better frontend performance?(mid)
  13. Explain the difference between unit testing, integration testing, and end-to-end testing for a frontend app. How do you balance them?(junior)
  14. What are JavaScript polyfills, and how do they differ from transpilation?(mid)
  15. How do iframes on a page communicate with each other and with the parent page? What are the security rules?(senior)
  16. What is the purpose of the `key` prop in React, and what actually goes wrong when you use array indices as keys?(mid)
  17. What does the dependency array of `useEffect` control? Explain how a stale closure bug happens with an empty array.(senior)
  18. Why does `console.log(state)` right after calling a state setter in React show the old value? Explain batching and functional updates.(mid)
  19. When do `useMemo` and `useCallback` actually help in React, and when are they pointless overhead?(senior)
  20. What is the difference between controlled and uncontrolled components for form inputs in React?(junior)
  21. How do you decide between local state, React context, and an external state manager? And where does server data fit in that picture?(senior)
  22. How do React's virtual DOM and reconciliation work? What are the real benefits — and the limits?(mid)
  23. What are error boundaries in React? What do they catch — and, importantly, what do they not catch?(mid)
  24. A search box fetches results in `useEffect` on every keystroke. What are the pitfalls, and what does a correct implementation look like?(senior)
  25. What is code splitting, and how do you implement it in a React application?(mid)
  26. You enabled tree shaking but the bundle barely shrank. What prevents dead-code elimination in practice, and how do you debug it?(senior)
  27. Why must React hooks be called at the top level of the component, and only from React functions? What breaks if you call one inside an `if`?(mid)
  28. You scroll a feed and more posts keep appearing at the bottom without you clicking anything, and it only loads them as you approach the end rather than all at once. How is that 'load more as you reach the bottom' implemented efficiently in a browser?(mid)
  29. You paste a plain link into WhatsApp or Slack and a moment later it blossoms into a card with a title, description, and thumbnail. Where does that preview come from, and why does it sometimes fail to appear?(mid)