JavaScript and ReactJS Interview Questions

Prepared by Chelladurai

The following questions are meticulously crafted to enhance your understanding of

JavaScript and ReactJS concepts. Each question is designed to test your practical knowl-
edge and theoretical foundation.

Interview Questions by Category

ReactJS Interview Questions
1. Explain what a React Portal is and how it is used in an application. Provide a practical
use case.

2. What is React Fiber, and how does it improve React’s performance?

3. Describe synthetic events in ReactJS. How do they differ from native browser events?

4. Explain the render-prop pattern in React. Provide an example where this pattern
would be beneficial.

5. Why is the key attribute important in React? Explain how it helps React optimize
rendering.

6. What prompted React to adopt functional programming concepts? How does it benefit
developers?

7. Compare and contrast higher-order components (HOCs) and pure components in Re-
act.

8. What is useLayoutEffect? How does it differ from useEffect, and when would you
use it?

9. List various ways to minimize the build size of a React application. Include techniques
for tree-shaking and code splitting.

10. What is hydration in React? Explain its role in server-side rendering (SSR).

11. Explain how JSX is transpiled into JavaScript. Provide a code example demonstrat-
ing this process.

12. Why does JSX use className instead of class? Provide a technical explanation.

13. How does React manage state in function components? Explain the use of useState
and useReducer hooks.

1
14. What is the difference between controlled and uncontrolled components in React?
Provide examples for each.

15. What are React Context and the useContext hook? When should you use them
instead of Redux or other state management libraries?

16. Explain React’s memo function. How does it help in optimizing performance?

17. What is React’s useCallback hook, and why is it used? Provide an example.

18. Describe the role of React.StrictMode. What kind of issues does it help to identify?

19. How does React handle form validation? Compare libraries like Formik and React
Hook Form.

20. What are the differences between React Native and ReactJS? Highlight their unique
use cases.

21. Explain the concept of reconciliation in React. How does the virtual DOM facilitate
this process?

22. What is useRef, and how is it different from state? Provide an example use case.

23. How can you handle error boundaries in React? Provide an example of an error
boundary component.

24. What is lazy loading in React? How does React’s lazy and Suspense work together?

25. Explain the useImperativeHandle hook and its use cases. Provide an example.

26. How does React handle asynchronous rendering? Discuss the concept of Concurrent
Mode.

27. What is ReactDOM.createRoot, and how is it different from ReactDOM.render?

28. Describe the lifecycle methods in class components and their equivalents in function
components using hooks.

29. How does React handle accessibility? List the best practices for building accessible
React applications.

30. Scenario: Managing Complex State - How would you manage the state of a
dynamic, multi-step form in a React application? Explain your approach and any libraries
you might use.

31. Scenario: Performance Optimization - Your React application is experiencing

slow rendering times. What steps would you take to diagnose and resolve the issue?

32. Scenario: Large-Scale Application - How would you structure a large React ap-
plication for maintainability and scalability? Include folder structure, component design,
and state management.

33. Scenario: Error Handling - A React component crashes due to an error in a child
component. How would you prevent the entire application from crashing and gracefully
handle the error?

2
34. Scenario: Reusability - You need to create a reusable table component that sup-
ports sorting, filtering, and pagination. How would you design and implement it?

35. Scenario: Third-Party Integrations - How would you integrate a third-party

library (e.g., a charting library) into a React application? What challenges might arise,
and how would you address them?

36. Scenario: Code Splitting - How would you implement code splitting in a React
application to optimize loading times? Provide an example.

37. Scenario: Server-Side Rendering (SSR) - How would you implement SSR in a
React application? What are the benefits and challenges?

38. Scenario: State Synchronization - How would you synchronize state between
multiple components without using Redux or Context API?

39. Scenario: Real-Time Updates - How would you implement real-time data updates
(e.g., using WebSockets) in a React application?

40. Scenario: Authentication Flow - How would you design an authentication flow
in a React application, including login, logout, and session management?

41. Scenario: Internationalization (i18n) - How would you implement support for
multiple languages in a React application?

42. Scenario: Accessibility - How would you ensure that a React application is acces-
sible to users with disabilities? Provide specific practices and tools.

43. Scenario: Debugging - A component in your React application is not updating as

expected. How would you debug and resolve the issue?

44. Scenario: Testing - How would you write unit tests and integration tests for a
React component? Provide an example.

45. Scenario: Migration - You are tasked with migrating a class-based React applica-
tion to functional components. How would you approach this task?

46. Scenario: Dependency Management - How would you handle dependency up-
dates in a React application to avoid breaking changes?

47. Scenario: Styling - How would you implement a consistent theming system in a
React application that supports light and dark modes?

48. Scenario: SEO Optimization - How would you improve the SEO of a React
application, especially one that is single-page?

49. Scenario: API Integration - How would you manage API calls in a React appli-
cation, ensuring error handling and performance optimization?

50. Scenario: Versioning and Deployment - How would you manage versioning and
deployment of a React application in a CI/CD pipeline?

3
React Hooks - Interview Questions
1. Explain the difference between useCallback and useMemo. Provide examples of when
to use each.

2. How would you write custom code to achieve the same behavior as useState? Imple-
ment a basic example.

3. When a dependency in useEffect changes, will the cleanup function run before the
next effect executes? Explain why or why not with a code example.

4. What is useRef? Can you describe its exact use case? Provide a practical example
where useRef is better than useState.

5. Write a custom hook for fetching API data. Ensure it handles loading, error states,
and data updates.

6. Implement a custom hook for a countdown timer with start, stop, and pause function-
ality. Include an example of how it can be used in a component.

7. How do you optimize a React component that re-renders unnecessarily due to prop
changes? Use useMemo, useCallback, and React.memo in your solution.

8. Write a custom hook that listens for changes in the browser window size and returns
the current width and height.

9. Scenario: You want to execute a callback function only once after the component
mounts. Which hook will you use, and why? Provide the implementation.

10. What happens if you update a state variable inside useEffect that has the same
state variable as a dependency? Will it cause an infinite loop? How can you prevent it?

11. Write a custom hook for managing forms, including validation logic. The hook should
return the form state, validation errors, and a handler function.

12. Scenario: You have a button that fetches data from an API when clicked. How would
you use useEffect to avoid fetching data when the component initially renders but only
when the button is clicked?

13. Can you explain why React warns about missing dependencies in useEffect? How
do you fix it? Provide an example.

14. Write a hook to debounce a value, ensuring it updates only after the user stops typing
(e.g., in a search input).

15. Scenario: You have a global loading spinner that needs to show while a certain
network request is being made. How would you use useContext to handle this globally
across your app?

16. Why is it important to preserve the order of hooks in React? What happens if you
use hooks conditionally? Demonstrate this with an example.

17. Implement a custom hook that throttles a value, ensuring it updates only at a spec-
ified interval.

4
18. You need to implement infinite scrolling in a React component. How would you use
useEffect and useRef to detect when the user has scrolled to the bottom of the page?

19. Scenario: A component fetches user data on mount. After fetching, it uses setState
to update the user details. What happens if the component unmounts before the API
call resolves? How can you prevent potential memory leaks in this case?

20. Write a custom hook for managing a toggle state (e.g., true/false) with functions to
toggle, enable, and disable it.

JavaScript Core Concepts

1. What is the Shadow DOM? Explain its purpose and provide a use case where it is
useful.

2. How does the this keyword work in JavaScript? Explain with examples for different
contexts (e.g., in global scope, functions, objects, and classes).

3. Demonstrate how to create and use a class in JavaScript. What are the key differences
between ES6 classes and traditional function constructors?

4. What is a prototype in JavaScript? How does prototypal inheritance work? Illustrate

with an example.

5. Write a polyfill for Promise.allSettled. Explain how it differs from Promise.all.

6. Write a polyfill for the Array.prototype.forEach method.

7. What is a closure? Explain with a practical example, such as creating a counter

function.

8. What is hoisting in JavaScript? Which parts of the code are hoisted, and how does it
affect variable declarations and functions? Provide examples.

9. What is a pure function? Why is it important in functional programming? Provide

an example of a pure function and an impure function.

10. What is the super keyword used for in JavaScript? Provide an example demonstrat-
ing its use in a class.

11. Why use a constructor in JavaScript? What is its purpose in the context of object
creation? Illustrate with an example.

12. Compare for...of and for...in loops. Explain their differences and provide ex-
amples of when to use each.

13. What are the different ways to create objects in JavaScript? Provide examples for
each method (e.g., object literals, constructors, Object.create, classes).

14. What is callback hell? Provide an example, and explain how Promises or async/await
can solve this problem.

15. How would you create a deep copy of an object in JavaScript? Compare this with a
shallow copy and provide examples of both.

5
16. What is the difference between == and === in JavaScript? Why should you prefer
one over the other?
17. Write a function to debounce an input field, ensuring the callback is triggered only
after the user stops typing for a specific time.
18. Explain the difference between var, let, and const. Provide examples of scenarios
where each is most appropriate.
19. Write a function to flatten a nested array in JavaScript without using built-in methods
like flat.
20. Scenario: You are given an array of numbers, and you need to find duplicates. Write
an efficient solution for this problem.
21. What is the event loop in JavaScript? How does it handle asynchronous tasks?
Explain with an example involving setTimeout, Promise, and synchronous code.
22. Write a function to check if a given string is a valid palindrome. Optimize for both
performance and readability.
23. What is Object.seal and Object.freeze? What is the difference between the two,
and when would you use them?
24. Scenario: You have an object, and you need to make it immutable. How would you
achieve this in JavaScript?
25. What are IIFEs (Immediately Invoked Function Expressions)? Explain their purpose
with an example.
26. Explain the difference between call, apply, and bind in JavaScript. Provide examples
for each method.
27. What is the purpose of the Symbol data type in JavaScript? Provide an example of
how it is used.
28. Write a function to implement a custom event emitter in JavaScript. It should
support event subscription and event broadcasting.
29. How would you optimize the performance of a JavaScript application that is slowing
down due to frequent DOM updates?

JavaScript Advanced Topics

1. Implement a dynamic currying function that can handle any number of arguments
and execute only when all arguments are provided. Explain its use cases.
2. Explain the JavaScript event loop in-depth. How does it handle setTimeout, Promises,
and other asynchronous operations? Provide a step-by-step example to illustrate its work-
flow.
3. Write a debouncing function to optimize an input search field by ensuring the callback
is executed only after the user stops typing for a specified interval. Provide a real-world
use case.

6
4. Write a throttling function to limit the rate at which a callback function is executed.
Use an example, such as throttling scroll event listeners.

5. Compare WeakMap and WeakSet. Explain their key differences and use cases where
they outperform Map and Set.

6. Compare Promise.all, Promise.allSettled, Promise.race, and Promise.any. Pro-

vide examples for real-world scenarios where each would be the most appropriate choice.

7. What are decorators in JavaScript? How can you use them to modify the behavior of
a class or its methods? Provide an example implementation.

8. Explain JavaScript design patterns, such as Singleton, Factory, and Observer. Provide
a practical example for any one design pattern.

9. What is the meaning of a singleton in JavaScript? Explain its purpose and provide an
example of implementing a singleton pattern in an application.

10. JavaScript does not natively support generics like TypeScript does. How would you
implement type-safety in JavaScript functions? Provide an example of how generics can
be simulated in JavaScript.

11. Explain CSS specificity and how it affects element styling. Provide examples of
different levels of specificity and how conflicts are resolved.

12. Write a function that demonstrates how to create a polyfill for the Promise.race
method. Explain its significance in asynchronous programming.

13. Scenario: You have a webpage where you want to display live search results as the
user types. How would you optimize the search API calls using both throttling and
debouncing techniques?

14. How does the EventEmitter class work in JavaScript? Implement a custom EventEmitter
with methods to subscribe, unsubscribe, and trigger events.

15. What are proxy objects in JavaScript? Explain how they can be used for validation
or logging with an example.

16. Write a function that uses the Reflect API to intercept object property reads, writes,
and deletions. Explain how it differs from traditional Object.defineProperty.

17. What is the difference between synchronous and asynchronous iterators in JavaScript?
Implement an example of an asynchronous iterator to fetch paginated data from an API.

18. Scenario: You are working on a large-scale application, and you need to load modules
dynamically only when required. How would you achieve this using JavaScript’s dynamic
imports? Provide a code example.

19. How would you secure sensitive information in JavaScript, such as API keys, within
a browser-based application? Discuss possible approaches and their limitations.

20. What is memoization in JavaScript? Write a function that memoizes the results of a
computationally expensive operation.

7
CSS and Layouts - Interview Questions
1. Explain the differences between position: absolute, relative, fixed, and sticky.
Provide examples of when and why you would use each position type.

2. What is the difference between inline and block elements in CSS? Explain with
examples and discuss how inline-block differs from both.

3. Compare inline-block and inline-flex. When would you prefer inline-flex over
inline-block? Provide a use case.

4. What is the CSS box model? Explain its components and the difference between
content-box and border-box. How does this affect element dimensions?

5. What is the default position of HTML elements in CSS? How does this default
positioning influence layout decisions?

6. Compare Flexbox and CSS Grid. When should you use Flexbox, and when is CSS
Grid the better choice? Provide a scenario for each.

7. How would you implement dark mode on a website? Discuss both CSS-only and
JavaScript-based approaches.

8. How can we achieve responsive design? Explain the role of media queries, fluid layouts,
and viewport units.

9. Write CSS to center a div both vertically and horizontally using Flexbox. Then,
rewrite the same using CSS Grid.

10. How does z-index work in CSS? What are stacking contexts, and how do they
influence z-index? Provide an example where z-index does not behave as expected.

11. Scenario: You need to create a three-column layout where all columns are of equal
height, regardless of content size. How would you achieve this using Flexbox or Grid?

12. What are pseudo-elements in CSS? How are they different from pseudo-classes? Pro-
vide examples for ::before and ::after.

13. Scenario: You want to create a sticky navigation bar that stays at the top of the
viewport when the user scrolls past it. How would you implement this using CSS?

14. Explain the concept of CSS specificity. What happens when multiple rules target the
same element? Provide an example and discuss how to resolve conflicts.

15. What are CSS custom properties (variables)? How are they different from prepro-
cessor variables (e.g., in Sass or Less)? Provide an example of using custom properties
for theming.

16. Scenario: You are tasked with designing a responsive image gallery where images
resize proportionally and wrap to the next row when the viewport width changes. How
would you achieve this using CSS Grid or Flexbox?

17. Explain the difference between rem, em, px, and percentage units in CSS. When
should you use each?

8
18. What is the difference between min-width, max-width, and width in CSS? Provide
an example of how they can be combined for responsive design.

19. Scenario: You have a footer that needs to stick to the bottom of the page when
content is short but stay below the content when the page is long. How would you
achieve this with CSS?

20. What are CSS transitions and animations? Provide an example of a button hover
effect using both techniques.

21. What is the difference between visibility: hidden and display: none? How
do they impact element layout and interactivity?

22. Explain the role of media queries in CSS. Write a media query to make a navigation
menu responsive for devices with a maximum width of 768px.

23. How does the clamp() function in CSS work? Provide an example of where it is
useful.

24. Scenario: You need to create a layout where one column takes up 70

25. What is the difference between relative units (e.g., em, rem) and absolute units (e.g.,
px)? When should you choose one over the other?

26. Explain the differences between CSS preprocessors like Sass/Less and native CSS
features like custom properties. Which would you prefer for large-scale projects and
why?

27. Scenario: You are asked to create a loading spinner using only CSS. How would you
implement this, and what properties would you use?

State Management and Redux - Interview Questions

1. What are the limitations of using useContext for state management in a React appli-
cation? Explain how Redux addresses these limitations and provides additional benefits.

2. Why is middleware used in Redux? Explain its role in the Redux lifecycle and provide
an example of implementing a custom middleware for logging actions.

3. How would you write a Jest test to verify that the Redux state is updated correctly
after an action is dispatched? Provide a code example.

4. Scenario: You have a React application where multiple components need access to the
same state, but their updates should not trigger unnecessary re-renders. How would you
handle this with Redux?

5. Compare Redux Toolkit with traditional Redux. What problems does Redux Toolkit
aim to solve, and how does it simplify state management?

6. How does Redux handle immutability? Why is immutability important in state man-
agement, and how would you ensure immutability in a reducer?

9
7. What is the difference between thunk middleware and saga middleware in Redux?
When would you choose one over the other?

8. Scenario: You need to load data from an API and update the state when the data
is successfully fetched. How would you handle this in Redux using middleware like
redux-thunk? Provide a code example.

9. Explain the Redux data flow architecture. What are the roles of actions, reducers,
and the store? Use a diagram to illustrate the flow if possible.

10. How does the combineReducers function work in Redux? Provide an example where
you need to manage multiple slices of state.

11. Scenario: You have a large-scale application, and some parts of the state are only
needed in specific routes. How would you handle this in Redux to optimize performance?

12. What are selectors in Redux? How do they improve performance, and how can you
use libraries like reselect to create memoized selectors? Provide an example.

13. How would you handle deeply nested state updates in Redux? Discuss best practices
and provide an example using the spread operator or libraries like immer.

14. Scenario: In a multi-user chat application, you need to manage real-time updates for
messages. How would you implement this with Redux? What role would middleware
play in this scenario?

15. What are the common anti-patterns in Redux, and how can you avoid them?

16. Explain how you would set up persistence for Redux state using libraries like redux-persist.
What are the challenges of persisting state, and how can you address them?

17. What is the purpose of the Redux DevTools? How would you configure your store
to integrate with it?

18. Scenario: A user logs into an application, and you need to manage both the user’s
authentication state and their profile data. How would you structure the Redux store
and actions to handle this efficiently?

19. What is the difference between local component state (using useState) and global
state (using Redux)? When should you choose one over the other?

20. How would you handle server-side rendering (SSR) with Redux in a Next.js applica-
tion? Discuss the integration process and challenges.

21. Write a test case in Jest to mock a Redux store and verify that a connected component
receives the correct props from the state.

22. What are the pros and cons of using Redux for state management in a React appli-
cation compared to alternatives like zustand or Recoil?

23. Scenario: In a shopping cart application, you need to implement a feature where the
cart is synced across multiple tabs. How would you implement this using Redux?

10
24. Explain the difference between optimistic and pessimistic updates in Redux. Provide
an example where optimistic updates improve user experience.

25. What is the useSelector hook in Redux? How does it differ from the connect
HOC? Provide an example of using useSelector to access specific slices of state.

Web APIs and Performance - Interview Questions

1. Name some common Web APIs provided by the browser. Explain their purposes
and give a use case for each (e.g., Fetch API, Web Storage API, Geolocation API,
WebSocket API, etc.).

2. What are web workers, and how do they improve performance in a web application?
Provide a scenario where web workers would be essential, and write a simple example to
demonstrate their use.

3. How would you configure environment variables for different environments (e.g., de-
velopment, staging, production)? Discuss best practices for managing sensitive data in a
frontend application.

4. What is an HTTP-only cookie, and why is it considered more secure than a regular
cookie? Explain its use case in scenarios like authentication.

5. How would you integrate Server-Sent Events (SSE) in the frontend? Provide a code
example to demonstrate real-time updates using SSE.

6. Scenario: You need to implement a file upload feature that supports large file uploads
without blocking the UI. How would you use browser APIs to achieve this efficiently?

7. Explain the differences between localStorage, sessionStorage, and cookies. When

should you use each?

8. How does the browser’s requestAnimationFrame() method improve performance for

animations? Provide an example of its use compared to traditional setInterval().

9. Scenario: A web page takes too long to load because of a large number of DOM
elements. What browser APIs or techniques would you use to identify and resolve the
performance bottlenecks?

10. What is the difference between synchronous and asynchronous requests in the Fetch
API? Provide an example of handling errors in an asynchronous request.

11. Explain how you would measure and optimize the performance of a React application
using browser APIs like the Performance API.

12. What are IntersectionObserver and MutationObserver? Provide use cases and
code examples to demonstrate their applications.

13. Scenario: You need to create a real-time chat application where the UI updates
immediately when a new message arrives. How would you choose between WebSockets
and SSE for this purpose? Explain your reasoning.

11
14. What is a Content Security Policy (CSP), and how does it improve web application
security? Provide an example of configuring a CSP for a web app.

15. Explain the role of the navigator API in accessing device-specific features like ge-
olocation, battery status, or media devices. Provide examples for each.

16. How does the Cache API help in improving the performance of a Progressive Web
App (PWA)? Provide an example of using it to cache resources.

17. What is the purpose of the Service Worker API? Explain how it enables offline
functionality and provide a basic example of registering a service worker.

18. Scenario: You are building a live dashboard that displays stock prices in real-time.
What strategies and APIs would you use to handle frequent updates efficiently?

19. Explain the purpose of the WebRTC API. How would you use it to create a peer-to-peer
video call application?

20. What is the difference between async/await and Promises? Provide an example of
converting a function using Promises to async/await.

21. What are the security implications of exposing sensitive data through JavaScript?
How can you prevent such issues when using environment variables or accessing Web
APIs?

22. How does lazy loading images using the loading attribute or IntersectionObserver
improve performance? Provide a code example.

23. Scenario: Your application is experiencing slow rendering due to heavy DOM updates.
How would you use the requestIdleCallback() API to defer non-critical updates?

24. How does the Push API enable real-time notifications in web applications? Provide
an example of integrating it with a service worker.

25. What are HTTP/2 and HTTP/3, and how do they improve the performance of web
applications compared to HTTP/1.1?

26. Explain the difference between a REST API and a GraphQL API. Which would you
choose for a frontend application focused on performance and why?

27. What are WebSockets, and how do they differ from traditional HTTP requests?
Provide an example of implementing WebSockets in the frontend.

28. How would you monitor and optimize API request performance in a frontend appli-
cation? What tools or techniques would you use?

Debugging and Optimization - Interview Questions

1. Scenario: A specific user ID is causing an issue in production. How would you debug
this issue? Discuss tools like logs, remote debugging, and tools like Sentry, along with
steps to reproduce the problem.

12
2. How do you approach debugging when something fails in a production environment
without affecting other users? Provide examples of tools and techniques such as moni-
toring systems, browser dev tools, and A/B testing.

3. How can you ensure that a React component is optimal and does not trigger unneces-
sary re-renders? Explain using tools like React DevTools and techniques like memoization
(React.memo, useCallback, and useMemo).

4. What are some effective ways to optimize JavaScript applications for performance?
Discuss techniques like:

(a) Lazy loading and code splitting

(b) Debouncing and throttling
(c) Tree-shaking
(d) Avoiding memory leaks
(e) Optimizing loops and expensive computations

5. How would you minimize the build size of a web application? Discuss approaches such
as:

(a) Removing unused dependencies

(b) Using tools like Webpack or Rollup to configure tree-shaking and code splitting
(c) Minifying JavaScript and CSS
(d) Using CDN for static assets

6. What steps would you take to debug a memory leak in a JavaScript application? Ex-
plain the use of browser DevTools, the Performance tab, and tools like Heap Snapshots.

7. How would you debug slow page loads in a web application? Discuss the use of tools
like Lighthouse, Chrome DevTools, and WebPageTest.

8. Scenario: A React application is experiencing performance issues due to a large number

of state updates. How would you optimize this? Provide examples of techniques like:

(a) Batching state updates

(b) Using React.memo for child components
(c) Avoiding deep comparisons in props

9. What are source maps, and how do they help in debugging production builds? Explain
how you would enable and use them effectively.

10. Explain how you would debug and fix a CORS error in a web application. Provide
an example of configuring a backend server to resolve the issue.

11. Scenario: A third-party library is causing performance bottlenecks. How would you
identify the issue and decide whether to replace or optimize the library?

12. What are the differences between synchronous and asynchronous debugging? How
do tools like async stack traces in modern browsers assist in debugging async code?

13
13. How would you debug and fix layout shifts in a web application caused by dynamic
content? Discuss tools like Chrome’s Layout Shift visualization.

14. How do you identify and fix unused CSS or JavaScript in a project? Discuss tools
like PurifyCSS, UnCSS, or Webpack plugins.

15. Scenario: After a deployment, the application crashes for some users due to a browser
compatibility issue. How would you debug and resolve this?

16. How would you optimize a large form with multiple fields in React to ensure better
performance and user experience?

17. Explain the role of console.time() and console.profile() in JavaScript debug-

ging. Provide an example of how you would use these tools.

18. Scenario: A single-page application (SPA) shows a significant performance drop in

older browsers. How would you debug and optimize this application?

19. What are the common anti-patterns in React that can lead to performance degrada-
tion? How would you identify and fix them?

20. How would you debug a network issue where API requests fail intermittently? Discuss
the use of browser DevTools Network tab, error logs, and retry mechanisms.

21. Scenario: Your team has implemented a complex animation on the homepage, and
it is causing performance issues on mobile devices. How would you debug and optimize
the animation?

22. What are the advantages of lazy loading images, and how would you implement it?
Explain with an example using the loading attribute or IntersectionObserver.

23. How would you analyze and optimize bundle sizes using tools like Webpack Bundle
Analyzer or Source Map Explorer?

24. What are the best practices for reducing time-to-interactive (TTI) in a web applica-
tion? Discuss techniques like lazy hydration and preloading critical resources.

25. Scenario: A user’s browser crashes while interacting with your web app due to high
memory consumption. How would you debug and resolve the issue?

26. What is the purpose of the PerformanceObserver API? How would you use it to
measure custom performance metrics?

TypeScript - Interview Questions

1. Why do we need TypeScript? What are its advantages compared to plain JavaScript?
Discuss benefits like type safety, improved tooling, and better code maintainability with
examples.

2. Do browsers understand TypeScript natively? If not, how does TypeScript work in

a web application? Explain the role of the TypeScript compiler and how it transpiles
TypeScript to JavaScript.

14
3. What is the difference between interface and type in TypeScript? Provide examples
where each is more suitable and discuss scenarios like extending or merging.

4. What happens if you define multiple interfaces with the same name but different
properties in TypeScript? Explain the concept of interface merging with a practical
example.

5. How does TypeScript support object-oriented programming (OOP) concepts like in-
heritance, polymorphism, and encapsulation? Provide examples using class, extends,
and implements.

6. What are utility types in TypeScript (e.g., Pick, <—metae nd| > P artial, Readonly)?P rovidereal−
worldexamplesof theirusage.Scenario : Y ouhaveaf unctionthatacceptsanobjectwithadynamicsetof pro

7. 7. What is the difference between unknown and any types in TypeScript? Provide
scenarios where each is appropriate.

8. How would you use TypeScript to ensure type safety when working with a REST API?
Discuss typing the request/response data structures and provide examples using axios
or fetch.

9. How does TypeScript handle function overloading? Provide examples of how to define
and use overloaded functions.

10. What are generics in TypeScript? How do they improve code reusability? Provide
examples of using generics in functions, classes, and interfaces.

11. Scenario: You are working on a project where type definitions are missing for a
third-party JavaScript library. How would you write custom type declarations?

12. What is the purpose of the never type in TypeScript? Provide examples of when it
is used.

13. How would you handle null and undefined values in TypeScript? Discuss the role of
the strictNullChecks compiler option.

14. What are enums in TypeScript? What are the differences between numeric and string
enums? Provide examples of both.

15. How does TypeScript handle modules and namespaces? Explain the difference and
provide examples of when to use each.

16. Scenario: A large TypeScript project has inconsistent type usage across files. What
steps would you take to refactor and enforce type consistency?

17. What is type assertion in TypeScript? How is it different from type casting in other
languages? Provide examples of when and how to use type assertions.

18. How do you define a tuple in TypeScript? What are some practical use cases of
tuples?

19. Explain the concept of mapped types in TypeScript. Provide examples of creating
new types based on existing ones using mapped types.

15
20. How would you ensure that a TypeScript project is properly configured and follows
best practices? Discuss the role of tsconfig.json, linters (e.g., ESLint), and strict mode
settings.

21. What is a discriminated union in TypeScript? Provide examples of how it can simplify
working with complex types in a type-safe manner.

22. Scenario: You need to implement a Redux store in a TypeScript project. How would
you define and enforce types for actions, reducers, and the store?

23. What is the purpose of the keyof keyword in TypeScript? How does it help in
creating type-safe utilities? Provide examples.

24. How does TypeScript integrate with React? Discuss concepts like typing props, state,
and functional components with examples.

25. What is the purpose of the NonNullable utility type in TypeScript? Provide an
example of its usage.

26. How does TypeScript improve the maintainability of large-scale projects? Discuss
features like type inference, modularity, and documentation generation.

27. What are ambient declarations in TypeScript, and how are they used? Provide
examples of declaring global variables or modules.

28. Scenario: You are migrating a JavaScript project to TypeScript. What steps would
you take to ensure a smooth migration? Discuss strategies like incrementally adding
types and refactoring code.

29. How would you type-check a higher-order function (HOC) in TypeScript? Provide
an example of typing the input and output of an HOC in React.

Miscellaneous - Interview Questions

1. What is the difference between Authentication and Authorization? Provide an exam-
ple of each in a web application context.

2. What is Content Security Policy (CSP)? How does it help prevent attacks like XSS
(Cross-Site Scripting)? Explain how to implement CSP in a web application.

3. What is Cross-Origin Resource Sharing (CORS)? Explain why it’s needed and what
errors might arise without proper CORS configuration. How would you handle CORS in
the frontend and backend?

4. What is a preflight request in the context of CORS? When does the browser send a
preflight request, and how does it affect the server response?

5. Compare Session Storage vs Local Storage. When should you use each, and what are
the differences in terms of lifespan, accessibility, and performance?

6. What is prop drilling in React? How can it be avoided using solutions like context or
state management libraries (e.g., Redux, MobX)?

16
7. How would you create a popup modal in React? Provide a basic implementation and
explain how you would manage visibility, accessibility, and closing the modal.

8. How would you enable multiple language support (i18n) in a web application? Dis-
cuss tools like React-Intl, i18next, and strategies for handling translations and language
switching.

9. What is the difference between a design pattern and a methodology? Can you give
examples of each and explain how they impact software development?

10. What is the difference between a deep copy and a shallow copy in JavaScript? How
would you implement both, and when would you use each? Provide examples using
methods like Object.assign() and JSON.parse(JSON.stringify()).

11. What is the nullish coalescing operator (??) in JavaScript? How did you handle
situations like this before its introduction in ES2020 (e.g., using ||)?

12. How does a progressive web app (PWA) differ from a traditional web app? Ex-
plain the core principles of PWAs and how you would implement them, including service
workers and offline support.

13. What are the security implications of storing sensitive data in LocalStorage or Ses-
sionStorage? How would you secure such data in a web application?

14. Explain how you would implement and manage environment variables in a Node.js
application. How does the dotenv package help, and how would you use it in production
vs development?

15. What is the purpose of an API gateway in a microservices architecture? Provide an

example of how it can improve the scalability and security of an application.

16. How would you handle error boundaries in React? What are the use cases for using
ErrorBoundary components in production applications?

17. Scenario: You need to add authentication to a web application. How would you
implement it using JWT (JSON Web Token)? Discuss the authentication flow, token
storage, and token expiration.

18. What is the difference between synchronous and asynchronous code in JavaScript?
How do you handle asynchronous operations using promises, async/await, and callbacks?

19. What is the event delegation pattern in JavaScript? How does it optimize event
handling, and when should you use it? Provide an example of applying event delegation
in a list of items.

20. What are WebSockets, and how do they differ from HTTP? Provide examples of how
to use WebSockets for real-time communication in a web application.

21. Scenario: You are working on a large-scale project, and you need to structure the
CSS efficiently. How would you implement CSS modules, and what are their advantages?

22. What are the primary differences between a GET and a POST request in HTTP?
Provide use cases for when each would be appropriate.

17
23. What is the concept of lazy loading, and how can it be implemented in both images
and components in a React application? Discuss the impact on performance and user
experience.

24. Explain the concept of the observer pattern in JavaScript. How would you implement
this pattern to create an event-driven system in a web application?

25. How would you manage routing in a Single Page Application (SPA) like React? What
are the advantages of using a client-side router like React Router, and how would you
handle navigation and history?

26. How would you design a rate limiter for an API to avoid abuse? Discuss various
strategies like token bucket or leaky bucket algorithms and the implementation consider-
ations.

27. What is the purpose of the fetch API, and how does it differ from older methods like
XMLHttpRequest? Provide examples of making network requests using fetch().

28. What are the best practices for securing sensitive information such as API keys and
passwords in a frontend application? Discuss solutions like environment variables, server-
side storage, and encryption.

29. How would you handle file uploads in a web application? Discuss the use of the
FormData API, chunked uploads, and server-side validation.

18