Interview topics

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 :

1. Closures & Scope
2. Event Loop & Async
3. Promises & Async/Await
4. Hoisting & This Keyword
5. Prototypes & Inheritance

𝗥𝗲𝗮𝗰𝘁 :

1. useState & useEffect
2. Context API & useContext
3. Custom Hooks
4. Component Lifecycle
5. State Management (Redux/Zustand)

𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 & 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻:

1. Code Splitting & Lazy Loading
2. Memoization (useMemo, useCallback)
3. Virtual DOM & Reconciliation
4. Bundle Optimization
5. Web Vitals & Performance Metrics

𝗘𝘀𝘀𝗲𝗻𝘁𝗶𝗮𝗹 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀:

1. Event Delegation & Bubbling
2. Debouncing & Throttling
3. Error Boundaries & Error Handling
4. Browser Storage (localStorage, sessionStorage)
5. REST APIs & HTTP Methods

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗯𝗮𝘀𝗲𝗱 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀

1. Implement Promise.all polyfill
2. Implement Promise.any polyfill
3. Implement Array.prototype.reduce polyfill
4. Implement Lodash’s flatten method
5. Implement auto-retry for promises
6. Throttle promises by batching
7. Debouncing implementation
8. Throttling implementation
9. Execute N callback-based async tasks in series
10. Output prediction for tricky 10–15 JavaScript snippets
11. Object vs Map differences in JavaScript
12. Difference between PATCH and PUT
13. What is the difference between debounce and throttle?
14. How does the JavaScript Engine work?
15. What is the Event Loop and how does the Microtask Queue work?
16. Explain Virtual DOM and its comparison mechanism
17. How to control tab order in DOM (explain tabIndex)
18. What is Event Capturing and Bubbling
19. How to override toString on String.prototype
20. What is OAuth and how does it work?
21. How does SSO work?
22. What are REST API methods and their differences?
23. Principles of Functional Programming
24. What are microservices?

𝗥𝗲𝗮𝗰𝘁-𝗦𝗽𝗲𝗰𝗶𝗳𝗶𝗰 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀

1. Why do keys matter in React and how do they improve performance?
2. Explain how useState works internally
3. Implement a basic version of useState
4. What are React Portals? How are modals mounted using them?
5. What are Error Boundaries in React?
6. How does memoization work in React?
7. SSR vs CSR with examples and use-cases
8. What is Module Federation?
9. What is Micro-Frontend Architecture?
10. Server-Side Rendering techniques to improve SEO
11. What are memory leaks in React and how to detect them?
12. How to measure performance in a React application?
13. How would you build a tool like Create React App?
14. How do you structure reusable UI components in React?

𝟭. 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸
— 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁?
The Call Stack is where JavaScript keeps track of function calls. It is a stack structure that handles synchronous code execution.
— 𝗛𝗼𝘄 𝗱𝗼𝗲𝘀 𝗶𝘁 𝘄𝗼𝗿𝗸?

1. When a function is invoked, it’s pushed onto the stack.
2. Once it finishes, it’s popped off.
3. If an error occurs during execution, it’s thrown from the stack.

𝟮. 𝗘𝘃𝗲𝗻𝘁 𝗤𝘂𝗲𝘂𝗲 (𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗤𝘂𝗲𝘂𝗲)
— 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁?
The Event Queue (also known as the callback queue) stores events that are to be processed asynchronously, like events triggered by a setTimeout or DOM events.
— 𝗛𝗼𝘄 𝗱𝗼𝗲𝘀 𝗶𝘁 𝘄𝗼𝗿𝗸?

1. When the Call Stack is empty, the Event Loop checks the Event Queue.
2. It then pushes the next task onto the stack for execution.

𝟯. 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲
— 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁?
The Microtask Queue holds tasks that need to be executed after the currently executing script, but before any events in the event queue. Microtasks include promise callbacks and other tasks like MutationObserver.
— 𝗛𝗼𝘄 𝗱𝗼𝗲𝘀 𝗶𝘁 𝘄𝗼𝗿𝗸?
Once the call stack is empty and before the event queue is processed, the event loop picks up and processes tasks in the microtask queue. This ensures that promises are resolved before other events are processed.

𝟰. 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽
— 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁?
The Event Loop is the mechanism that allows JavaScript to perform non-blocking operations by managing the order in which tasks are executed from the call stack, event queue, and microtask queue.

• 𝗛𝗼𝘄 𝗱𝗼𝗲𝘀 𝗶𝘁 𝘄𝗼𝗿𝗸? The event loop constantly checks the call stack. If the call stack is empty, it checks the microtask queue and processes any pending microtasks. After all microtasks are processed, the event loop picks events from the event queue for execution.

𝗞𝗲𝘆 𝗣𝗼𝗶𝗻𝘁:
Microtasks are always executed before the event queue. This is why Promise.then() is processed before setTimeout().

𝟱. 𝗦𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁 𝗮𝗻𝗱 𝗦𝗲𝘁𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹
— 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁?
setTimeout() and setInterval() are used to schedule code execution after a specified time, but they are added to the event queue and are processed after all synchronous code and microtasks.

• 𝗛𝗼𝘄 𝗱𝗼𝗲𝘀 𝗶𝘁 𝘄𝗼𝗿𝗸? The setTimeout() and setInterval() tasks are executed after the current script is finished executing, which is why you may see asynchronous code run after synchronous code (even if it’s scheduled for immediate execution).

1. What is React, and what problem does it solve?
2. What are the main features of React?
3. What is the difference between a class component and a functional component?
4. What is JSX, and why is it used in React?
5. How does the Virtual DOM work in React?
6. What is reconciliation in React?
7. Explain the concept of React Fiber.
8. What are keys in React, and why are they important?
9. What are props and state in React?
10. How is state different from props?
11. What are React Hooks, and why were they introduced?
12. Explain the useState and useEffect hooks with examples.
13. What is the difference between useMemo and useCallback?
14. How does useRef work, and what are its common use cases?
15. What are custom hooks, and how do you create one?
16. What is the difference between useLayoutEffect and useEffect?
17. How do you handle cleanup in useEffect?
18. Can you explain the rules of hooks?
19. What are the different phases of a React component’s lifecycle?
20. What are lifecycle methods in class components?
21. How can you replicate lifecycle methods using hooks?
22. What is the difference between componentDidMount and useEffect?
23. How can you optimize re-renders in React components?
24. How is state managed in React applications?
25. What are controlled and uncontrolled components?
26. What is the Context API in React, and how is it used?
27. What is Redux, and how does it work with React?
28. What are the differences between Redux, MobX, and Context API?
29. How does useReducer differ from useState?
30. What are actions, reducers, and stores in Redux?
31. What is React Suspense, and how does it improve performance?
32. Explain React.lazy() and code splitting.
33. What is server-side rendering (SSR) in React?
34. How does hydration work in Next.js?
35. What is React Concurrent Mode (or Concurrent Features)?
36. What are higher-order components (HOCs)?
37. What are render props in React?
38. What are portals in React, and where are they used?
39. How can you optimize performance in large React apps?
40. What are fragments in React?
41. How are events handled in React?
42. What is event bubbling and event capturing?
43. How do you handle forms and validations in React?
44. What is React Router, and how does routing work?
45. What is the difference between BrowserRouter and HashRouter?
46. How do you pass data between routes in React Router v6?
47. What are the best practices for structuring React projects?
48. How do you test React components?
49. What are snapshot tests in React?

50. What tools are commonly used for testing React apps (e.g., Jest, RTL, Cypress)?

51. Difference between useMemo and useCallback.

52. What is a key in React? Why do we use it, and what happens if we don’t?

53. What is the difference between useLayoutEffect and useEffect?

54. How do you manage the state if your state is dependent on the previous state?

55. How do you optimize a React application? How does lazy loading work? Where exactly is lazy loading beneficial?

56. How browser read TypeScript?

57. How event loop work? Which has more priority macro task queue or, micro task queue? If I have 100 tasks in macro and 1 in micro, which will be executed first?

58. What techniques would you use to prevent layout shifts (CLS) and improve perceived performance in a React application?

59. How will you debug any production issue without writing logs?

60. What is Webpack? benefits of using it?

61. How to measure the web app performance?

62. What is the difference between Real DOM and Virtual DOM, and how does this work in deep?

63. Create a parent box, then display 3 boxes diagonally inside it.

64. If the browser cache becomes full due to your application storing too much data, how would you prevent the application from crashing or breaking?

65. How can I debug and stop a React component from re-rendering multiple times due to changes in another component?

66. Output of code below, what is the value of c?
    const [c, setC] = useState(0);
    useEffect(() => {
    console.log(‘hello’);
    setC(c + 1);
    setC(c+1)
    setC(c+1)
    });

67. Scenario-based questions on event bubbling and stopPropagation.

68. Overloading and overriding in JavaScript

69. What are Error Boundaries?

70. What is the difference between createElement and using a component tag in React?

71. What are debouncing and throttling? Give examples.

72. What is React?

73. What is useMemo ?

74. What are the features of React ?

75. What is JSX ?

76. What is DOM ?

77. What is Virtual Dom ?

78. What is component life cycle of React class component ?

79. What are fragments in react ?

80. What are props in react ?

81. What are synthetic events in react ?

82. What are the difference between Package.json and Package.lock.json ?

83. What are the differences between client side and server side rendering ?

84. What is state in Reactjs?

85. What are props ?

86. What are the differences between State and Props in react ?

87. What is props drilling ?

88. What are the disadvantages of props drilling and How we can avoid props drilling ?

89. What are Pure components in React ?

90. Whatare Ref’s in React?

91. What is meant by forward ref ?

92. What are Error boundaries ?

93. What are Higher order components in react ?

94. What are the differences between controlled and uncontrolled components ?

95. What is useCallback ?

96. What are the differences between useMemo and useCallback ?

97. What are keys in React ?

98. What is Lazy loading in React ?

99. What is suspense in React ?

100. What are custom hooks ?

101. What is useReducer hook ?

102. What are Portals in react ?

103. What is context in react ?

104. Practical question: Give an example of context api usage ?

105. What is the purpose of callback function as an argument of setState()?

106. Practical question: create a custom hook for increment/decrement counter ?

107. Which lifecycle hooks in class component are replaced with useEffect in functional components ?

108. What is Strict mode in react ?

109. What are the different ways to pass data from child component to parent component in react ?

110. Practical question: How to send data from child to parent using callback functions ?

111. Practical question: How to send the data from child component to parent using useRef ?

112. How do you optimize your react application ?

113. How would you consume a RESTful JSON API in reactjs?
     43.different design patterns used in react?

114. context api vs redux

115. prop types in react(How to apply validation on props in react)

116. What are React Mixins ?

117. what are the different hooks you have used ?

118. What are render props in react ?

119. What are the different types of exports and imports ?

120. What are the differences between create element vs clone element in react ?

121. When to use useState and useReducer?

122. What are protected routes in react ?

123. What is react-router has context menu

Become a member
JavaScript​:
Can you explain hoisting and give an example?
What is the difference between var, let, and const?
What is event delegation in JavaScript?
How does the this keyword work within different contexts?
⚛️ ReactJS:
What is the difference between using useCallback and useMemo?
What is the impact of Virtual DOM on performance?
Can you explain the React component lifecycle (with hooks)?
How can you optimize a re-render in React?
⚙️ Next.js:
What is the difference between using getServerSideProps or getStaticProps?
How does routing function in Next.js?
What are the advantages of Next.js over CRA?
There was also a small coding exercise from the interviewer:
Create a simple todo list app with the ability to add, update, and delete using React hooks.

JavaScript Deep Dive
This round focused heavily on JS fundamentals and hands-on coding.

Key topics included:

• Output-based questions around this, arrow functions, and call/apply/bind
• A currying problem (Try question here: https://lnkd.in/dVUaWXvc)
• Implementing a polyfill for Array reduce method (Try question here: https://lnkd.in/dfn6Mkpf)
• Writing a function to fetch data from an API with a timeout/abort feature

💻 Round 2 — Machine Coding
This round tested real-world implementation skills.

Tasks included:

• Implementing prototypal inheritance from scratch
• Building a login form (focus on structure, validation, and state management) (Similar question: https://lnkd.in/dZdA-pbB)

🧩 Round 3 — Hiring Manager Discussion
This was a mix of technical depth and project understanding.

Covered topics:

• In-depth discussion on past projects and design decisions
• Focus areas like SDLC, observability, debuggability, and performance optimization

🧭 Takeaway:
Angel One’s interview process strongly emphasizes JavaScript mastery, hands-on problem-solving, and system-level thinking. If you’re preparing — make sure you can explain your code and design choices clearly, not just make them work.

Top Javascript #interview Questions

1. What is the difference between var, let, and const in JavaScript?
2. What are closures in JavaScript, and how do they work?
3. What is the this keyword in JavaScript, and how does it behave in different contexts?
4. What is a JavaScript promise, and how does it handle asynchronous code?
5. What is the event loop, and how does JavaScript handle asynchronous operations?
6. What is hoisting in JavaScript, and how does it work?
7. What are JavaScript data types, and how do you check the type of a variable?
8. What is the difference between null and undefined in JavaScript?
9. What is a callback function, and how is it used?
10. How do you manage errors in JavaScript?
11. What is the difference between setTimeout() and setInterval()?
12. How do JavaScript promises work, and what is the then() method?
13. What is async/await, and how does it simplify asynchronous code in JavaScript?
14. What are the advantages of using async functions over callbacks?
15. How do you handle multiple promises simultaneously?
16. What are higher-order functions in JavaScript, and can you provide an example?
17. What is destructuring in JavaScript, and how is it useful?
18. What are template literals in JavaScript, and how do they work?
19. How does the spread operator work in JavaScript?
20. What is the rest parameter in JavaScript, and how does it differ from the arguments object?
21. What is the difference between an object and an array in JavaScript?
22. How do you clone an object or array in JavaScript?
23. What are object methods like Object.keys(), Object.values(), and Object.entries()?
24. How does the map() method work in JavaScript, and when would you use it?
25. What is the difference between map() and forEach() in JavaScript?
26. What is event delegation in JavaScript, and why is it useful?
27. What are JavaScript modules, and how do you import/export them?
28. What is the prototype chain in JavaScript, and how does inheritance work?
29. What is bind(), call(), and apply() in JavaScript, and when do you use them?
30. How does JavaScript handle equality comparisons with == and ===?
31. What is the Document Object Model (DOM), and how does JavaScript interact with it?
32. How do you prevent default actions and stop event propagation in JavaScript?
33. What is the difference between synchronous and asynchronous code in JavaScript?
34. What is the difference between an event object and a custom event in JavaScript?
35. How do you optimize performance in JavaScript applications?

Here are 10 real React.js interview scenarios with smart answers 🧠

1️⃣ Scenario: The interviewer asks — “Your React app is lagging. How do you find the root cause?”
A: Use React Profiler, track component re-renders, and identify heavy components or unnecessary state updates.

2️⃣ Scenario: “You updated a prop, but UI didn’t reflect the change. What could be wrong?”
A: State immutability issue or memoized child component not detecting prop changes.

3️⃣ Scenario: “You have two API calls — one depends on another. How would you handle it in React?”
A: Chain the calls using async/await or use Promise.all if they can run in parallel, managing loading state cleanly.

4️⃣ Scenario: “Your useEffect is firing twice. What’s the reason?”
A: React Strict Mode in development double-invokes effects; ensure side effects are idempotent.

5️⃣ Scenario: “Your component unmounts before async data arrives. How do you prevent state update errors?”
A: Use cleanup function or AbortController to cancel requests on unmount.

6️⃣ Scenario: “Your user list component re-renders even when data doesn’t change.”
A: Optimize with React.memo, useMemo, or useCallback to prevent unnecessary renders.

7️⃣ Scenario: “How would you improve the performance of a large table with 10,000+ rows?”
A: Virtualize the list using libraries like react-window or react-virtualized.

8️⃣ Scenario: “What if two components need the same data but aren’t parent-child?”
A: Use Context API or a global store like Redux, Zustand, or Recoil.

9️⃣ Scenario: “You deployed your React app and got a blank screen — what do you check first?”
A: Check route paths, build paths, console errors, and environment variables.

🔟 Scenario: “How would you debug a component that randomly breaks after navigation?”
A: Inspect React DevTools for props/state, check unmounted component updates, and verify cleanup in effects.