Front-End Interview Q&A Prep Kit
Let’s make this interview Q&A prep kit for your Front-End Developer role (React + JavaScript + AWS).
I’ll cover technical questions, coding, project explanation, and HR-style questions so you’re confident for
tomorrow.
JavaScript & ES6+
Q1. What’s the difference between var, let, and const?
var: function scoped, hoisted, can be redeclared.
let: block scoped, not hoisted, can
be reassigned.
const: block scoped, cannot be reassigned.
Q2. Explain the event loop in JavaScript.
JS is single-threaded.
Event loop manages execution stack and callback
queue.
setTimeout, Promises, async tasks are handled via microtask & macrotask queues.
Q3. Explain spread vs rest operator.
Spread (...) expands an array/object.
Rest (...) collects remaining arguments into an
array.
Q4. What are closures?
A closure is when a function remembers variables from its outer scope, even after that
scope has finished executing.
React.js
Q5. Difference between functional and class components?
Functional: lightweight, hooks, easier to test.
Class: lifecycle methods, this, more
verbose.
Q6. Explain React Hooks you use most.
useState: manage local state
useEffect: side effects (API calls,
subscriptions)
useContext: global state without prop drilling
useRef: access DOM or store mutable
values
useMemo/useCallback: performance optimization
Q7. What are Higher Order Components (HOC)?
A function that takes a component and returns a new component with extra props/logic.
Example: withAuth.
Q8. What are controlled vs uncontrolled components?
Controlled: React state controls input value.
Uncontrolled: value managed by DOM
(using ref).
Q9. How to optimize performance in React?
React.memo, useMemo, useCallback
Code splitting (lazy + suspense)
Avoid
unnecessary re-renders
Virtualization (for long lists)
State Management
Q10. Difference between Redux and Context API?
Redux: predictable, strict structure (actions, reducers, middleware). Good for large
apps.
Context API: simpler, less boilerplate, but can cause re-renders if not optimized.
Q11. Can you explain the Redux flow?
UI → dispatch(action) → reducer → store → UI re-renders
APIs & Authentication
Q12. How to call a REST API in React?
Using fetch or axios inside useEffect.
Handle loading & error states.
Q13. What is JWT (JSON Web Token)?
A compact, URL-safe way to transfer user claims securely.
Flow: User logs in → server
returns JWT → client stores (localStorage/cookies) → sends token in headers → server verifies.
Build Tools
Q14. What’s the role of Babel?
Transpiles modern JS (ES6+) to older versions for browser compatibility.
Q15. What’s Webpack?
A module bundler. Bundles JS, CSS, images, etc.
Uses loaders & plugins to process
code.
Testing & Debugging
Q16. Have you used Jest or Mocha?
Jest: unit testing framework for React (with React Testing Library).
Mocha: flexible
test framework (more setup needed).
Q17. How do you debug a React app?
Chrome DevTools (breakpoints, network tab).
React Developer Tools (inspect
props/state).
Console logging / Error boundaries.
AWS Basics (Frontend Perspective)
Q18. How do you deploy a React app on AWS?
Build React app → upload to S3 bucket → enable static website hosting → use CloudFront
for CDN.
Q19. What is AWS Amplify?
A service for hosting full-stack apps. Provides auth, APIs, hosting, and storage with
minimal setup.
Project-Based Questions
Q20. Can you explain a project you worked on using React?
Start with problem → your role → tech stack → challenges →
solution.
Example: “I worked on an e-commerce dashboard built with React, Redux, and
Tailwind. I integrated REST APIs for product data and authentication using JWT. For state management, I
used Redux Toolkit. One challenge was performance in large product lists, which I solved with React
Virtualized.”
Q21. How did you manage CSS in your projects?
Tailwind CSS, Sass, or CSS modules for modular styles.
Followed BEM methodology for
maintainability.
HR / Soft Skills
Q22. Why do you want to join us?
“I admire your work in IT services & consulting. With my 4.5 years of frontend
experience in React and UI/UX, I can contribute to building scalable apps and ensure top-quality user
experiences.”
Q23. How do you keep yourself updated?
Blogs (SmashingMag, Dev.to), MDN, React docs, coding challenges, AI tools (Copilot,
ChatGPT).
Q24. What’s your biggest strength?
Clean code, UI/UX focus, debugging, teamwork.
Q25. What’s your weakness?
Perfectionism / spending too much time on pixel details — but improving with timeboxing.
Bonus: They may give a small coding test.
Be ready for:
- Reverse a string
- Find duplicates in array
- Fetch API data & render in React
- Implement a counter with useState