Loading...
Loading...
Interview questions for frontend engineering roles covering React, performance, accessibility, and web fundamentals.
7 questions with expert tips
Practice with AI →Explain the React rendering lifecycle. What triggers re-renders and how do you prevent unnecessary ones?
Expert Tip
State/prop changes trigger re-render. Use React.memo, useMemo, useCallback, key prop correctly. Avoid object literals in JSX.
Your React app has a Largest Contentful Paint (LCP) of 4.2s. What are the steps to diagnose and fix it?
Expert Tip
Lighthouse audit, lazy load images, preload critical resources, code splitting, SSR/SSG for initial paint, reduce bundle size.
Explain the difference between `interface` and `type` in TypeScript. When would you use each?
Expert Tip
Interface: extendable, merging. Type: unions, intersections, mapped types. Prefer interface for objects, type for complex compositions.
How do you make a custom dropdown component accessible to screen reader users?
Expert Tip
role="combobox", aria-expanded, aria-controls, aria-activedescendant, keyboard navigation (arrow keys, Escape, Enter).
Explain the difference between CSS Grid and Flexbox. Build a 3-column card layout that collapses to 1 column on mobile.
Expert Tip
Grid: 2D layout. Flexbox: 1D. Use grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) for responsive cards.
When would you choose Zustand vs React Context vs TanStack Query for state management?
Expert Tip
Context: UI state (theme, locale). Zustand: global client state. TanStack Query: server state with caching and sync.
Explain React's useEffect dependency array. What are common bugs caused by incorrect dependencies?
Expert Tip
Missing deps: stale closures. Extra deps: infinite loops. Use eslint-plugin-react-hooks. Cleanup function for subscriptions.
Answer these questions in a simulated interview and get real-time AI feedback on your responses, pacing, and depth.
Start Practice Interview