Frontend Developer interview questions

Frontend interviews usually mix JavaScript fundamentals, a framework (most often React), browser performance and a few questions about how you work with designers and backend teams. Use real examples from your own projects wherever you can.

  1. 1Explain the difference between let, const and var.

    What a good answer shows: Scope (block vs function), hoisting and the temporal dead zone, and when you would use each. Mention that const stops reassignment, not mutation.

  2. 2What is a closure, and where have you used one?

    What a good answer shows: A clear definition plus a practical use: private state, event handlers, memoisation or a debounce function you wrote.

  3. 3How does the JavaScript event loop work?

    What a good answer shows: Call stack, task queue and microtask queue, and why a resolved promise runs before a setTimeout of 0.

  4. 4What happens between typing a URL and seeing the page?

    What a good answer shows: DNS, TCP/TLS, the request, HTML parsing, CSS and JS loading, render tree, layout and paint. Depth matters more than speed.

  5. 5How would you make a slow page load faster?

    What a good answer shows: Measure first (Lighthouse, Core Web Vitals), then code splitting, lazy loading, image sizes and caching. Best answers quote a result: "cut load time from 4s to 1.6s".

  6. 6Explain the React component lifecycle with hooks.

    What a good answer shows: Render, commit, effects and cleanup; how useEffect dependencies work and the bugs that come from getting them wrong.

  7. 7When would you use useMemo or useCallback, and when not?

    What a good answer shows: They avoid expensive recalculation or re-renders of memoised children, but add cost. Show you measure before optimising.

  8. 8How do you manage state in a larger React app?

    What a good answer shows: Local state first, lifting state up, context for shared values, and a store or server-state library (Redux, Zustand, React Query) when it pays off.

  9. 9What makes a website accessible?

    What a good answer shows: Semantic HTML, keyboard access, focus states, labels, alt text, colour contrast and testing with a screen reader. Mention WCAG.

  10. 10How do CSS specificity and the cascade work?

    What a good answer shows: Inline, id, class and element weights, source order, and how you keep specificity low in a real codebase.

  11. 11Flexbox or grid: how do you choose?

    What a good answer shows: Flexbox for one direction, grid for two-dimensional layouts, with a real layout you built.

  12. 12How would you build a design system or component library?

    What a good answer shows: Tokens, accessible base components, documentation, versioning, and how you got other teams to adopt it.

  13. 13How do you test frontend code?

    What a good answer shows: Unit tests for logic, component tests with Testing Library, a few end-to-end tests for key flows, and what you would not test.

  14. 14What is the difference between server-side rendering and client-side rendering?

    What a good answer shows: Trade-offs in first load, SEO, hydration cost and complexity, and when a static or hybrid approach is better.

  15. 15How do you handle errors and loading states in the UI?

    What a good answer shows: Skeletons or spinners, error boundaries, retries, and messages that tell users what to do next.

  16. 16How would you secure a frontend against XSS?

    What a good answer shows: Escaping output, avoiding dangerouslySetInnerHTML, Content Security Policy, and keeping tokens out of localStorage where possible.

  17. 17Tell me about a bug that took you a long time to fix.

    What a good answer shows: Show your debugging process: reproduce, narrow down, test a hypothesis, and what you changed so it would not happen again.

  18. 18How do you work with designers when a design is hard to build?

    What a good answer shows: Talk early, offer options with trade-offs, prototype quickly, and agree on what matters most to users.

  19. 19Describe a feature you shipped end to end.

    What a good answer shows: Use STAR: the problem, your part, the decisions you made and a measurable result.

  20. 20What would you improve in our product's frontend?

    What a good answer shows: Do your homework: one or two specific, kind observations (speed, accessibility, a confusing flow) and how you would test the fix.