This is a collection of real interview questions for a Middle / Junior-Middle Frontend Developer role. The questions reflect current employer expectations and help candidates and learners assess their knowledge and identify areas for improvement.
Ready to test yourself? Try the interactive frontend interview quiz →

1. How to optimize performance in a React application with large tables or data sets? What is the main challenge?
   Optimization includes eliminating unnecessary re-renders, memoizing components, and using list virtualization. The main challenge is identifying performance bottlenecks. Tools include React.memo, useCallback, useMemo, and react-window. Preventing memory leaks is also crucial. (How to Speed Up React Apps with Large Tables and Datasets)
2. How important is TypeScript in modern frontend projects?
   TypeScript provides static typing, better autocompletion, early error detection, and helps with scalable team development. It reduces runtime bugs significantly.
3. How to assess your TypeScript knowledge level?
   Based on experience with core and advanced concepts: generics, utility types, conditional types (What Are Conditional Types in TypeScript?). A 7–8/10 indicates confident production usage.
4. What TypeScript topics should be learned beyond the basics?
   Topics include infer, template literal types, mapped types, custom utility types, keyof, and type constraints with extends.
5. How does the Omit utility type work, and why use it?
   Omit<T, K> creates a new type by excluding properties K from type T. Useful for editing forms without certain fields like id.
6. What are conditional types and how to use infer?
   Conditional types let you choose types based on logic. infer extracts types from other structures, enabling flexible type definitions.
7. What are the benefits of using TypeScript in development?
   Increased reliability, fewer runtime errors, better IDE support, easier refactoring, and safer collaboration in large codebases.
8. What are common TypeScript anti-patterns?
   Overusing any, @ts-ignore, or unsafe type assertions (as) can weaken type safety and introduce hidden bugs.
9. How to use any, unknown, and never properly?
   any disables type checking – use sparingly. unknown is safer but requires type guards. never is used for unreachable code or exhaustive checks.
10. Why can as be dangerous in TypeScript?
    Type assertions can silence real errors. Use with caution, ideally only when you’re absolutely sure of the value’s type.
11. When should Server-Side Rendering (SSR) be used?
    For SEO, fast initial page load, prefetching data, and caching HTML. Improves performance and visibility in search engines.
12. When is SSR not appropriate?
    For SPAs, dashboards, apps behind auth, or highly interactive interfaces. In such cases, SSR adds unnecessary complexity.
13. What are effective frontend optimization techniques?
    WebP images, lazy loading, code splitting, tree shaking, CDN usage, memoization, and virtual scrolling for large lists.
14. Why use virtualization (react-window / react-virtualized) for lists?
    To render only visible list items, reducing DOM size and improving performance with large datasets.
15. What is lazy loading of components and how does it work?
    With React.lazy and Suspense, components load only when needed. This reduces initial bundle size and improves load time.
16. How to handle unnecessary re-renders in React apps?
    Use React.memo, useMemo for objects/arrays, and useCallback for functions. Ensure stable references for props.
17. What’s the difference between React.memo and useCallback?
    React.memo memoizes the component. useCallback memoizes functions, preventing new function instances on each render.
18. How to prevent child components from re-rendering if props haven’t changed?
    Wrap in React.memo and use useMemo/useCallback to pass stable prop references.
19. What is the purpose of Code Review?
    To catch bugs, ensure code quality, enforce standards, share knowledge, and improve team communication.
20. What actions help with SEO optimization?
    Semantic HTML, proper meta tags (title, description, og:), lazy loading, clean URLs, heading structure.
21. What are Open Graph tags and why use them?
    Tags like og:title, og:description, and og:image control how links appear on social platforms. Improve link previews and sharing.
22. What role do tests play in frontend development?
    They catch regressions, enable safe refactoring, serve as documentation, and increase confidence in changes.
23. What are End-to-End (E2E) tests and what do they check?
    E2E tests simulate real user interactions, covering full flows including UI, API, validation, and user feedback.
24. Why don’t unit tests replace E2E and vice versa?
    Unit tests are fast and isolated. E2E tests check the full system. They serve different purposes and complement each other.
25. When is it not advisable to write tests?
    In prototypes, MVPs, or fast-paced projects with changing requirements. In such cases, test only critical paths like login and payments.
26. How to test React components?
    Use React Testing Library and Jest. Test rendering, user interactions, prop changes, and side effects.
27. What is useEffect and when is it used?
    For side effects like API calls, subscriptions, DOM manipulations, and initializing libraries. It runs after render.
28. How to safely use event listeners in useEffect?
    Add listeners inside useEffect and clean them up in the return function to avoid memory leaks.
29. How to persist the state of a modal window across sessions?
    Store a flag in localStorage, or better — on the backend. Server storage syncs state across devices and sessions.
30. How to handle an array of Promises and return the first resolved value or all errors?
    Iterate over Promises. If one resolves — return its value. If all reject — collect errors and throw. Use Promise.allSettled or custom logic with try/catch.
31. How to group numbers by their digit composition, regardless of order?
    Convert number to string, sort its digits, use as a key in an object or Map to group numbers sharing the same sorted signature.
32. What is the time complexity of digit-grouping logic?
    O(n × m log m), where n is the number of items, and m is the digit length. Sorting dominates the complexity.

Take the real test: Try the interactive frontend interview quiz now → This will help you assess your readiness and get instant feedback.