0% found this document useful (0 votes)
2 views6 pages

Key JavaScript and React Interview Questions

The document outlines a comprehensive interview preparation guide for web development roles, covering essential topics in HTML, CSS, JavaScript, TypeScript, React, and system design. It is structured into six rounds, each focusing on different aspects such as technical skills, managerial experience, behavioral questions, and HR considerations. Additionally, it includes a summary table categorizing the focus areas of each round.

Uploaded by

Srivatsav Kada
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
2 views6 pages

Key JavaScript and React Interview Questions

The document outlines a comprehensive interview preparation guide for web development roles, covering essential topics in HTML, CSS, JavaScript, TypeScript, React, and system design. It is structured into six rounds, each focusing on different aspects such as technical skills, managerial experience, behavioral questions, and HR considerations. Additionally, it includes a summary table categorizing the focus areas of each round.

Uploaded by

Srivatsav Kada
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Shubham Kulkarni

[Link]

Round 1: HTML, CSS, JS, TS (30 Key Questions)

HTML & CSS (10)

1. What is the difference between HTML tags <div> and <span> ?

2. How do CSS specificity and inheritance work?

3. Explain the box model and how to use box-sizing: border-box .

4. What are Flexbox and CSS Grid? Common use cases?

5. How do you center an element vertically and horizontally?

6. Responsive design: media queries vs. fluid layouts?

7. Semantic HTML: why it matters for accessibility and SEO?


y

8. How do you optimize CSS performance (e.g., critical CSS, minification)?


e l

9. What are CSS variables (custom properties)?


ea siv

10. What's the difference between display: none and visibility: hidden ?
b y
lu

JavaScript (10)
d
c

1. Explain event delegation and its advantages.


te

ar m
Ex

2. Difference between var , let , and const .


a

3. Explain closures, hoisting, and the event loop.


h
cr

Ku b

ni

4. What are Promises and async/await ? How do you handle errors?


u

5. JS operators: == vs === , spread/rest operator, optional chaining.


Sh

6. Prototype vs. class-based inheritance in JS.


lk

7. What’s the difference between call, apply, and bind?

8. Explain debouncing vs throttling (e.g., scroll or resize handler).

9. New ES2025/ES2024 features (e.g., do expressions, pipeline operator?)** — verify latest features**

10. Memory leaks in JavaScript and how to avoid them?

Core Concepts & Fundamentals (15)

1. Difference between var , let , and const .

2. Explain closures and their real-world use cases.

3. What is hoisting? Which variables/functions get hoisted?

4. What is the event loop in JavaScript? Explain microtasks vs macrotasks.

5. Difference between == and === .

6. Explain the concept of prototype and prototypal inheritance.

7. What are pure functions and why are they important?


8. Explain this in JavaScript (different contexts: global, method, arrow functions).

9. Difference between call, apply, and bind.

10. What are higher-order functions? Examples.

11. Difference between shallow copy and deep copy in JS (and how to implement them).

12. What are Symbols in JavaScript?

13. What are iterators and generators?

14. Explain destructuring assignment and its benefits.

15. What is the difference between null and undefined ?

Asynchronous JavaScript (8)

1. What are Promises? How do they work internally?

2. Explain async/await and its error-handling pattern.

3. Difference between [Link], [Link], [Link], and [Link].

4. What is event delegation and why is it useful?


y

5. Explain debouncing vs throttling (with examples).


e l

6. What is the Fetch API? How is it different from XMLHttpRequest?


ea siv

7. What is the difference between synchronous and asynchronous code?


b y

8. How do you handle API retries and exponential backoff in JavaScript?


lu

d
c
te

Objects, Arrays, and Data Handling (6)


ar m
Ex

1. Difference between [Link] and [Link] .


h

2. How to clone an object in JavaScript? (Spread, [Link] , structuredClone, etc.)


cr

Ku b

ni

3. Array methods: difference between map , forEach , filter , reduce , and find .
u
Sh

4. What is array destructuring and rest/spread syntax?


lk

5. Difference between in operator and hasOwnProperty .

6. How do you merge two arrays or objects in JS?

Advanced JavaScript (7)

1. What is currying in JavaScript? How is it implemented?

2. Explain memoization and its implementation in JS.

3. Difference between ES modules ( import/export ) and CommonJS ( require/[Link] ).

4. What are WeakMap and WeakSet? How are they different from Map and Set?

5. What is optional chaining ( ?. ) and nullish coalescing ( ?? )?

6. How do you detect memory leaks in JavaScript applications?

7. What is tail call optimization in JavaScript?

Modern Features & ESNext (4)


1. Latest ES features in ES2023/ES2024/ES2025 (e.g., Temporal API, [Link] ).

2. What are private class fields in JavaScript?

3. How do logical assignment operators ( ||= , &&= , ??= ) work?

4. What are top-level await and its use cases?

;### TypeScript (10)

1. Benefits of TypeScript over JavaScript?

2. Explain generics and how you've used them.

3. Difference between interface and type ?

4. What’s the unknown type vs any ?

5. How do you handle optional properties?

6. Enums vs union types?

7. Utility types: Partial , Pick , Omit , Record ?

8. Type assertions vs type guards?

9. TS with React: typed props, state, and hooks?


l y

10. Declarations (.[Link] files) and integrating JS libraries?


e
ea siv

Round 2: React Fundamentals, Frameworks, State Management,


b
lu

Machine Coding (30 Key Questions)


d
c
te

ar m
Ex

React Fundamentals (10)


h a

1. Explain the Virtual DOM and React reconciliation.


cr

Ku b

ni

2. Functional components vs class components—differences?


u

3. What are hooks? Examples: useState , useEffect , useMemo , useRef , useCallback .


Sh

4. Effect cleanup and dependency arrays in useEffect .


lk

5. Prop drilling vs composition vs context.

6. Handling forms in React (controlled vs uncontrolled)?

7. React’s synthetic events vs native events?

8. Lazy loading and [Link] + Suspense .

9. Error boundaries in React.

10. Common performance optimisations (e.g., memoization, [Link] , code-splitting)?

Frameworks & Ecosystem (e.g., [Link], Remix) (5)

1. SSR vs SSG vs CSR? When to use each?

2. [Link] routing and API routes.

3. Data fetching in [Link] (e.g., getStaticProps , getServerSideProps ).

4. Incremental Static Regeneration (ISR).

5. Framework-specific image optimization, i18n, middleware?


State Management (5)

1. Context API vs Redux vs MobX vs Zustand?

2. Redux toolkit: slices, thunks, RTK Query?

3. Best practices: state normalization, selectors, middleware?

4. Local state vs global state—deciding factors?

5. Caching and invalidation strategies (e.g., React Query/Apollo)?

Machine Coding/Live Coding (10)

1. Build a debounced search input with API call handling.

2. Implement a custom hook (e.g., useFetch , usePagination ).

3. Create a dynamic form component (add/remove inputs).

4. Render optimized lists (virtualization, e.g., react-window ).

5. Write a memoized component with proper hook usage.

6. Build a paginated or infinite-scroll list.


y

7. Implement a light/dark mode toggle using context & localStorage.


l

8. Build a responsive navbar with mobile menu.


e
ea siv

9. Live-coding: Fetch and render data in React (error/loading states).


b y

10. Write a tiny version of a state management hook (like a counter with reducer).
lu

d
c
te

ar m

Round 3: System Design (Design Scalable React Apps, 15–20 Questions)


Ex

1. How do you structure a large-scale React app? (Folder architecture)


h

2. Component modularity and reusability?


cr

Ku b

ni

3. Designing a scalable routing system?


u
Sh

4. Server-side rendering vs client-side rendering trade-offs?


lk

5. Caching strategies, stale-while-revalidate?

6. Data-fetching patterns and error handling at scale?

7. State persistence across sessions?

8. Micro-frontends: when and how?

9. Design a search interface with filtering, pagination?

10. Role-based access control (RBAC) in React?

11. Designing localization/internationalization (i18n)?

12. Designing analytics tracking or A/B testing?

13. Testing strategy: unit, integration, E2E (React Testing Library, Jest, Cypress)?

14. CDNs, asset optimization, caching, bundler optimisations?

15. Performance: largest bundle size, time-to-interactive, code splitting?

16. Progressive Web App (PWA) features in React?

17. Handling offline access, service workers, and caching strategies?

18. How would you design a real-time feature (e.g., chat) in React?
19. Dependency management and versioning?

20. Security: XSS, sanitizing HTML, CSP, cookies, auth tokens?

Round 4: Managerial / Project Round (20 or so Questions)


1. Walk me through your most recent React project.

2. Challenges faced and how you solved them?

3. Feature prioritization—trade-offs you made?

4. How did you estimate timelines and deliverables?

5. Managing multiple stakeholders / feedback?

6. Code review process—how do you approach it?

7. Handling technical debt?

8. Mentoring juniors or peers?

9. Leadership in a cross-functional team?

10. Design decisions—why certain libraries/frameworks were chosen?


y

11. When did you say “no” to scope creep?


e l

12. Post-mortems after deployment—what went wrong/right?


ea siv

13. Upgrading major dependencies (React, TS, etc.)?


b

14. Handling performance regressions in production?


lu

15. Dealing with disagreements—team conflict resolution?


c
te

ar m
Ex

16. Onboarding new members?


a

17. Scaling team processes (ticketing, CI/CD)?


h

18. How did you ensure quality—testing, linting, code style?


cr

Ku b

ni

19. Handling failure or project setbacks?


u

20. Impact of your contributions on business metrics?


Sh

lk

Round 5: Behavioral & Product Mindset (15–20 Questions)


1. Tell me about a time when you disagreed with a teammate.

2. How do you handle tight deadlines?

3. Difficult feedback you have received or given?

4. Tell me about a time when you made a mistake—what was the outcome?

5. How do you propose new features—what’s your process?

6. How do you ensure user-centric decisions?

7. Define success for a React project.

8. How do you prioritize bugs vs new features?

9. Addressing vs ignoring user feedback?

10. When did you innovate or improve a process?

11. What’s a product you love, and how would you improve its UI?
12. Design trade-offs: speed vs maintainability vs performance?

13. How do you gather data to validate decisions?

14. Cross-functional communication—engineering, design, PM?

15. What drives you—passion, metrics, users?

16. How do you handle change—new requirements mid-sprint?

17. How do you approach forming a hypothesis and testing it?

18. When did you advocate for the user experience?

19. Tell me about a time you took ownership of something outside your domain?

20. How do you stay updated on product trends and incorporate them?

Round 6: HR Round (10–15 Questions)


1. Tell me about yourself.

2. What motivates you to work here?

3. Your strengths and weaknesses?


y

4. Why are you switching roles (or look for a change)?


e l

5. Where do you see yourself in 2–3 years?


ea siv

6. Preferred working style: remote, hybrid, onsite?


b

7. Salary expectations?
lu

8. Work authorization or notice period?


c
te

ar m
Ex

9. Cultural fit: work-life balance, teamwork style?


a

10. Any gaps in your resume—what happened then?


h

11. How do you handle stress?


cr

Ku b

ni

12. Do you have any questions for us?


u

13. Your hobbies or side projects?


Sh

14. What makes you stand out from other candidates?


lk

15. Preferred onboarding experience?

Summary Table (by Focus):

Technical Core (Rounds 1–3): Deep dive on fundamentals and problem-solving.

Leadership & Strategy (Round 4–5): Real-life handling, decision-making, product mindset.

Fit & Readiness (Round 6): Career alignment, expectations, communication.

[Link] • [Link]

You might also like