Interview questions for a mid-level frontend engineer.

The questions.

1. 01

   technical baseline · react

   When does useEffect run, and when do you pass a dependency array?

   Strong answer

   After render, after every render by default, deps limit when. Knows [] = mount-only, no deps = every render. Cleanup function explained.

   Weak answer

   Confuses useEffect with useState. Or 'always pass empty array.'
2. 02

   technical baseline · css

   When would you use CSS Grid vs Flexbox?

   Strong answer

   Grid for 2D layouts, Flexbox for 1D. Knows they compose. Not dogmatic.

   Weak answer

   'I just use whichever I'm used to.' No sense of when each is right.
3. 03

   technical medium · forms

   Design a form validation UX. What do you get wrong if you validate on blur vs on submit vs as-you-type?

   Strong answer

   Knows the UX research: as-you-type is annoying before user finishes, submit is late. Hybrid: validate on blur AFTER first submit attempt. Accessibility: announce errors properly.

   Weak answer

   'We'll validate on submit.' Or validates every keystroke without understanding why that's bad.
4. 04

   experience baseline · resume-probe

   You shipped a redesign of X. What was measurably better after — and how did you measure it?

   Strong answer

   Specific metric (conversion, bounce, time-on-page). Honest about what got worse. Follow-up iterations based on data.

   Weak answer

   'Users liked it more.' No metric. No follow-up.
5. 05

   technical medium · performance

   Your page's Largest Contentful Paint is 4.2s. Users are complaining. Where do you start?

   Strong answer

   Measures before guessing — Lighthouse, RUM data. Investigates render-blocking resources, image sizes, critical CSS, TTFB. Considers SSR/prerender if relevant.

   Weak answer

   Adds lazy-loading everywhere without measuring. Or 'we'll upgrade the CDN.'
6. 06

   technical baseline · css

   What's the box model?

   Strong answer

   content / padding / border / margin. Understands box-sizing: border-box and why most people use it.

   Weak answer

   Can't explain why 'width: 100%' sometimes overflows.
7. 07

   technical medium · build-tools

   What actually happens when you run `npm run build` on a React app?

   Strong answer

   Bundler walks the dep graph from entry. Tree-shakes. Minifies. Code-splits. Outputs hashed assets. Generates manifest. Knows webpack/vite/esbuild by more than name.

   Weak answer

   'It makes the code smaller.' Doesn't understand the pipeline.
8. 08

   situational baseline · handoff

   Designer hands you a Figma file with inconsistent spacing. What do you do?

   Strong answer

   Asks the designer before reinterpreting. Proposes a consistent spacing scale. Not silent acquiescence, not rejection.

   Weak answer

   Implements whatever pixel values are there without questioning.
9. 09

   communication medium · explaining

   Explain hydration mismatches to a backend engineer who writes mostly Python.

   Strong answer

   Concrete example. No React-specific jargon that doesn't translate. Uses an analogy the listener gets.

   Weak answer

   Talks about virtual DOM reconciliation and loses the listener.
10. 10

    technical hard · accessibility

    Audit this button: `<div class='btn' onclick='submit()'>Save</div>`. What's wrong, in priority order?

    Strong answer

    Not keyboard-reachable. Not semantic (screen readers skip it). No focus ring. onclick-only breaks JS-disabled edge cases. Mentions ARIA only as last resort, not first.

    Weak answer

    Only mentions ARIA. Doesn't notice keyboard/focus issues.