Technical Frontend Knowledge

Evaluate candidate's coding ability, technical knowledge, and understanding of frontend systems.

17 questions

−

Question 1: Explain the difference between server-side rendering (SSR) and client-side rendering (CSR) in modern web apps. When would you use each?

What to Look For

• Clear understanding of SSR vs CSR
• Knowledge of SEO impact
• Awareness of performance trade-offs
• Ability to reference frameworks like Next.js
• Real-world examples of use cases

Red Flags

• Confuses SSR with static generation
• No mention of SEO or performance impacts
• Overly generic or vague
• Lack of practical examples

Follow-up Questions

• How does hydration work in SSR apps?
• What challenges arise with data fetching in SSR?
• Can you combine SSR and CSR in the same app?

Scoring Guide

Excellent (9-10):Candidate clearly explains SSR vs CSR, mentions SEO, initial load performance, frameworks like Next.js, and real scenarios where each is appropriate.

Good (7-8):Understands core differences and mentions one trade-off or framework.

Average (5-6):Basic explanation with limited depth, misses performance/SEO considerations.

Poor (1-4):Incorrect or superficial answer with confusion on rendering strategies.

Question 2: How do you ensure web accessibility (a11y) in your frontend projects?

What to Look For

• Knowledge of WCAG 2.1 standards
• Use of semantic HTML
• Screen reader testing
• Keyboard navigation considerations
• Examples of accessible components

Red Flags

• No mention of accessibility standards
• Focuses only on color contrast
• No practical experience
• Dismisses accessibility as unimportant

Follow-up Questions

• How do you test for accessibility?
• What tools or libraries do you use for accessibility checks?
• How would you make a custom dropdown accessible?

Scoring Guide

Excellent (9-10):Demonstrates strong awareness of a11y standards, uses semantic HTML, knows testing tools (axe, Lighthouse), and gives practical component examples.

Good (7-8):Mentions a11y basics and a couple of practices but lacks deep examples.

Average (5-6):Knows accessibility matters but vague on implementation.

Poor (1-4):Shows little to no awareness of accessibility practices.

Question 3: What is the difference between React's useEffect and useLayoutEffect hooks? Provide examples.

What to Look For

• Clear explanation of execution timing
• Awareness of repaint/reflow implications
• Real use cases for each
• Knowledge of async behavior
• Ability to explain performance impact

Red Flags

• Thinks they are interchangeable
• No mention of DOM paint timing
• Confuses useEffect with useState
• Unable to give examples

Follow-up Questions

• When would you absolutely avoid useLayoutEffect?
• How do these hooks interact with rendering performance?
• What happens if you misuse them?

Scoring Guide

Excellent (9-10):Clearly distinguishes timing differences, explains DOM reflow risks, gives scenarios (measuring DOM size = useLayoutEffect, async data fetch = useEffect).

Good (7-8):Understands timing difference but limited examples.

Average (5-6):Basic knowledge but shaky on timing.

Poor (1-4):Confused or inaccurate understanding.

Question 4: How do you improve Core Web Vitals for a React/Next.js application?

What to Look For

• Awareness of metrics (LCP, FID, CLS)
• Knowledge of code splitting, lazy loading
• Optimizing images and fonts
• Server-side optimizations
• Practical examples from past work

Red Flags

• No understanding of Core Web Vitals
• Focuses only on one metric
• No mention of real-world tools
• Dismisses performance testing

Follow-up Questions

• What tools do you use to measure performance?
• How do you handle third-party scripts?
• What trade-offs come with preloading assets?

Scoring Guide

Excellent (9-10):Names key metrics, discusses strategies (image optimization, prefetch, lazy load, Lighthouse audits), shows practical examples.

Good (7-8):Mentions metrics and 1–2 strategies.

Average (5-6):Basic performance ideas but lacks depth.

Poor (1-4):Does not understand Core Web Vitals at all.

Question 5: Explain the difference between state management libraries such as Redux, Zustand, and Recoil. When would you choose one over the other?

What to Look For

• Knowledge of Redux patterns
• Awareness of lightweight alternatives
• Consideration of app complexity
• Experience with at least two libraries
• Trade-offs between boilerplate and flexibility

Red Flags

• Thinks all libraries are the same
• No mention of app scale or complexity
• Dismisses alternatives to Redux
• Vague or theoretical with no experience

Follow-up Questions

• How do you handle global state in small apps?
• What are the performance considerations?
• Which do you prefer and why?

Scoring Guide

Excellent (9-10):Explains Redux as robust but verbose, Zustand/Recoil as simpler alternatives, gives real scenarios of choosing one.

Good (7-8):Knows main differences but lacks deep experience.

Average (5-6):Basic mention of Redux only.

Poor (1-4):Confused or unaware of alternatives.

Question 6: How does the Virtual DOM work in React? What are its advantages and disadvantages?

What to Look For

• Understanding of reconciliation process
• Knowledge of diffing algorithm
• Performance implications
• Comparison with direct DOM manipulation
• Awareness of React Fiber

Red Flags

• Thinks Virtual DOM is always faster
• No understanding of reconciliation
• Cannot explain the diffing process
• Unaware of any disadvantages

Follow-up Questions

• What is React Fiber and how does it improve rendering?
• When might direct DOM manipulation be better?
• How do keys help in the reconciliation process?

Scoring Guide

Excellent (9-10):Explains Virtual DOM as abstraction layer, discusses reconciliation, diffing, batching, and trade-offs with memory overhead.

Good (7-8):Understands basic concept and mentions performance benefits.

Average (5-6):Basic understanding but lacks technical depth.

Poor (1-4):Cannot explain Virtual DOM concept clearly.

Question 7: Compare CSS-in-JS solutions (styled-components, emotion) with utility-first CSS (Tailwind). What are the trade-offs?

What to Look For

• Understanding of different styling paradigms
• Bundle size considerations
• Developer experience comparison
• Performance implications
• Team scalability factors

Red Flags

• Dismisses one approach entirely
• No mention of bundle size or performance
• Cannot articulate trade-offs
• No practical experience with either

Follow-up Questions

• How do you handle dynamic styles in each approach?
• What about CSS modules as an alternative?
• How do you ensure consistent design system?

Scoring Guide

Excellent (9-10):Discusses runtime overhead of CSS-in-JS, Tailwind's utility bloat vs tree-shaking, DX differences, and gives context-appropriate recommendations.

Good (7-8):Understands main differences and mentions some trade-offs.

Average (5-6):Basic comparison but lacks depth on implications.

Poor (1-4):Cannot articulate meaningful differences.

Question 8: How would you implement infinite scrolling in a React application? What performance considerations are important?

What to Look For

• Understanding of Intersection Observer API
• Virtual scrolling/windowing concepts
• Memory management considerations
• Loading states and error handling
• Accessibility concerns

Red Flags

• Only knows scroll event approach
• No mention of performance issues
• Ignores accessibility
• No consideration of memory leaks

Follow-up Questions

• How would you handle scroll position restoration?
• What about bi-directional infinite scroll?
• How do you test infinite scroll implementations?

Scoring Guide

Excellent (9-10):Mentions Intersection Observer, virtual scrolling libraries (react-window), cleanup of DOM nodes, accessibility announcements, and performance monitoring.

Good (7-8):Knows Intersection Observer and mentions performance considerations.

Average (5-6):Basic implementation idea but misses optimization strategies.

Poor (1-4):Only knows naive scroll event approach.

Question 9: Describe your approach to testing frontend applications. What types of tests do you write and what tools do you use?

What to Look For

• Understanding of testing pyramid
• Experience with different test types
• Knowledge of testing tools
• Test coverage strategies
• Mocking and stubbing approaches

Red Flags

• No testing experience
• Only manual testing
• Overreliance on E2E tests
• No understanding of test trade-offs

Follow-up Questions

• How do you test async operations?
• What's your approach to testing hooks?
• How do you balance test coverage vs maintenance?

Scoring Guide

Excellent (9-10):Discusses unit tests (Jest/Vitest), integration (RTL), E2E (Playwright/Cypress), mentions testing pyramid, mocking strategies, and CI/CD integration.

Good (7-8):Knows multiple test types and tools with some practical examples.

Average (5-6):Basic testing knowledge but limited practical experience.

Poor (1-4):Little to no automated testing experience.

Question 10: How do you handle authentication and authorization in a frontend application?

What to Look For

• Understanding of JWT vs sessions
• Security best practices
• Token storage strategies
• Route protection patterns
• Role-based access control

Red Flags

• Stores sensitive data in localStorage
• No understanding of XSS/CSRF
• Confuses authentication with authorization
• No security awareness

Follow-up Questions

• How do you handle token refresh?
• What about social authentication?
• How do you secure API keys in frontend?

Scoring Guide

Excellent (9-10):Discusses secure token storage (httpOnly cookies), refresh token patterns, RBAC implementation, security vulnerabilities, and proper API key handling.

Good (7-8):Understands basics of auth flow and mentions security concerns.

Average (5-6):Basic auth implementation but misses security best practices.

Poor (1-4):No clear understanding of secure authentication.

Question 11: Explain how you would optimize a React application that has performance issues. Walk me through your debugging process.

What to Look For

• Systematic debugging approach
• Knowledge of React DevTools Profiler
• Understanding of common bottlenecks
• Optimization techniques
• Performance monitoring strategies

Red Flags

• No systematic approach
• Guesses without profiling
• Only knows memo/useMemo
• No real-world experience

Follow-up Questions

• How do you identify unnecessary re-renders?
• When should you NOT optimize?
• What about bundle size optimization?

Scoring Guide

Excellent (9-10):Describes profiling process, identifies common issues (re-renders, large lists, bundle size), discusses React.memo, useMemo, useCallback, code splitting, and monitoring.

Good (7-8):Knows profiling tools and several optimization techniques.

Average (5-6):Basic optimization knowledge but lacks systematic approach.

Poor (1-4):No clear performance optimization strategy.

Question 12: How does the Virtual DOM work in React, and why is it faster than direct DOM manipulation?

What to Look For

• Clear explanation of diffing algorithm
• Understanding of reconciliation
• Awareness of performance benefits
• Ability to contrast with direct DOM APIs
• Examples from real-world projects

Red Flags

• Thinks Virtual DOM is a copy of the real DOM
• No mention of diffing or reconciliation
• Superficial explanation without detail
• Cannot connect to practical benefits

Follow-up Questions

• How does React Fiber improve rendering?
• What are the downsides of the Virtual DOM?
• When would manual DOM manipulation be faster?

Scoring Guide

Excellent (9-10):Explains diffing, reconciliation, and batch updates with clear examples. Mentions React Fiber.

Good (7-8):Basic understanding of diffing and performance benefits.

Average (5-6):Knows it is "faster" but vague on why.

Poor (1-4):Incorrect or superficial explanation.

Question 13: Compare CSS-in-JS libraries (styled-components, Emotion) with utility-first frameworks like Tailwind CSS. What are the trade-offs?

What to Look For

• Knowledge of CSS-in-JS pros/cons
• Awareness of Tailwind advantages
• Considerations of scalability and maintainability
• Performance implications
• Examples from past experience

Red Flags

• No real-world experience with either
• Dismisses one approach without reasoning
• Confuses CSS-in-JS with inline styles
• Doesn't mention performance trade-offs

Follow-up Questions

• Which approach works better for design systems?
• How does CSS-in-JS impact bundle size?
• When would you avoid Tailwind?

Scoring Guide

Excellent (9-10):Balanced explanation of CSS-in-JS flexibility vs Tailwind speed, includes team/scale considerations.

Good (7-8):Explains pros/cons but lacks depth.

Average (5-6):Mentions only one side without trade-offs.

Poor (1-4):Inaccurate or uninformed explanation.

Question 14: How would you test React components? What tools and methodologies do you use?

What to Look For

• Knowledge of Jest, React Testing Library, Cypress
• Unit vs integration testing
• Mocking APIs
• Awareness of code coverage
• Practical examples from past work

Red Flags

• No mention of testing libraries
• Thinks only manual testing is enough
• Confuses unit and integration testing
• No mention of mocking or coverage

Follow-up Questions

• When do you use Cypress over RTL?
• How do you test hooks?
• How do you ensure test reliability?

Scoring Guide

Excellent (9-10):Clear understanding of Jest/RTL for unit tests and Cypress for e2e, explains mocking and coverage.

Good (7-8):Knows 1–2 tools and basic strategies.

Average (5-6):Basic awareness but vague on methodology.

Poor (1-4):No testing knowledge.

Question 15: How would you integrate GraphQL into a frontend app? What are the benefits and drawbacks compared to REST?

What to Look For

• Knowledge of GraphQL clients (Apollo, Relay)
• Understanding of query flexibility
• Awareness of over-fetching/under-fetching issues
• Performance considerations
• Experience integrating APIs

Red Flags

• No knowledge of GraphQL clients
• Doesn't understand over-fetching concept
• Dismisses REST without reasoning
• Superficial explanation

Follow-up Questions

• How do you handle caching in Apollo?
• When would REST still be a better choice?
• What are GraphQL security concerns?

Scoring Guide

Excellent (9-10):Explains flexibility of GraphQL, client libraries, caching strategies, compares with REST pros/cons.

Good (7-8):Understands GraphQL basics and gives one advantage.

Average (5-6):Knows GraphQL is "newer" but little detail.

Poor (1-4):No real understanding of GraphQL.

Question 16: How do you handle forms and validation in React? What libraries or approaches do you prefer?

What to Look For

• Experience with libraries (Formik, React Hook Form)
• Awareness of controlled vs uncontrolled components
• Validation strategies
• Performance considerations
• Real project examples

Red Flags

• No mention of libraries or patterns
• Confuses controlled/uncontrolled
• No validation strategies
• Vague on experience

Follow-up Questions

• How would you handle async validation?
• What about large forms with performance issues?
• How do you ensure accessibility in forms?

Scoring Guide

Excellent (9-10):Explains controlled/uncontrolled, names libraries, mentions validation and performance considerations.

Good (7-8):Knows one library and basics.

Average (5-6):Knows controlled vs uncontrolled but little else.

Poor (1-4):No understanding of React forms.

Question 17: How do you secure frontend applications against common vulnerabilities like XSS and CSRF?

What to Look For

• Understanding of XSS prevention (escaping, sanitization)
• Knowledge of CSRF protection techniques (tokens, SameSite cookies)
• Awareness of content security policy (CSP)
• Experience with secure coding practices
• Real examples from past work

Red Flags

• No knowledge of web vulnerabilities
• Superficial answer like "just use HTTPS"
• Cannot explain CSRF/XSS clearly
• No experience applying security in practice

Follow-up Questions

• How does React help prevent XSS?
• What are risks with dangerouslySetInnerHTML?
• How do you handle authentication tokens securely in the browser?

Scoring Guide

Excellent (9-10):Explains XSS and CSRF clearly, mentions tokens, SameSite, sanitization, CSP, and has applied them in real projects.

Good (7-8):Understands vulnerabilities and mentions one or two mitigations.

Average (5-6):Basic awareness but vague on implementation.

Poor (1-4):No understanding of security vulnerabilities.

Behavioral Questions

Understand how candidates work within teams and handle challenges.

10 questions

Situational Questions

Assess candidate's ability to handle real-world frontend challenges.

11 questions

Culture & Collaboration

Evaluate alignment with company values, adaptability, and communication.

11 questions

Complete Frontend Engineer Interview Kit

Get all interview questions with scoring guides, red flags, and follow-up questions in a professionally formatted PDF.

PDF • 15 pages2.4 MBUpdated Dec 19, 2025

PDF Format

1,339 downloads

🎯 How to Use This Interview Kit

1.Review all questions before the interview to understand the evaluation criteria
2.Select 8-12 questions based on the role's specific requirements and interview time
3.Use the scoring guide to objectively evaluate each answer
4.Take detailed notes on specific examples and behaviors mentioned
5.Use follow-up questions to probe deeper when needed
6.Compare candidates using the standardized scoring system