Next.js 15 Interview Questions for Senior Frontend Roles

🚀 Interview Experience – Frontend (React/JavaScript) | Persistent Systems Recently had an interesting interview experience with Persistent Systems and wanted to share some of the questions/topics that were discussed. It was a great mix of practical coding, core JavaScript concepts, and frontend fundamentals. 🔹 Coding / Problem-Solving 1. A parent div with 3 child divs. You need to place first at bottom-left and second at bottom-middle and third one at bottom-right. 🔹 JS output-based questions: 🌞 (function () { try { throw new Error(); } catch (x) { var x = 1, y = 2; console.log(x); } console.log(x); console.log(y); })(); 🌞 console.log(0 || 1); //1 console.log(1 || 2); //1 console.log(0 && 1); //0 console.log(1 && 2); // 2 🌞 (function(){ var a = b = 3; })(); console.log(a); console.log(b); 🌞 Create a React component that allows a user to select a file and simulate an upload process. When the user clicks the upload button, display a progress bar that gradually fills from 0% to 100% and show the upload percentage. The progress bar should update dynamically using React state. 🔹 Core JavaScript Concepts 1. Currying (currying vs normal functions) 2. call, apply, bind – when to use 3. Event loop 4. Promises: Promise.all, Promise.allSettled, Promise.race 5. Debouncing vs Throttling 6. Sync vs Deferred execution 7. Object & Array Destructuring 8. Difference between for...of and for...in . 🔹 React Topics 1. Hooks 2. useState – async or sync? How it works internally 3. Error Boundaries 4. Redux / Redux Toolkit flow 🔹 HTML & CSS Fundamentals 1. Box Model 2. CSS Specificity 3. Pseudo-classes and Pseudo-elements 4. Accessibility. Responsive Design techniques 🔹 Testing - Writing test cases (basic understanding expected) 💡 Overall, the interview focused more on fundamentals + real-world implementation rather than just theory. Would love to hear if you've come across similar questions or patterns! 👇 #PersistentSystems #Frontend #JavaScript #ReactJS #WebDevelopment #InterviewExperience #CodingInterview #Learning #CareerGrowth

⚙️ process.nextTick vs setImmediate vs setTimeout vs setInterval — Node.js Interview🔥 If you're preparing for backend interviews, understanding how Node.js handles async execution is a big differentiator. These functions are often confusing—but super important 👇 🔹 process.nextTick() → Runs immediately (microtask queue) * Executes right after the current operation * Runs before the event loop continues * Highest priority 👉 Use when: You want something to run ASAP after current code 📌 Example: process.nextTick(() => console.log("nextTick")); console.log("sync"); 🔹 setImmediate() → Runs in next event loop cycle * Executes in the check phase * Runs after I/O operations * Lower priority than nextTick 👉 Use when: You want to defer execution 📌 Example: setImmediate(() => console.log("setImmediate")); 🔹 setTimeout() → Runs after delay (minimum time) * Executes after a specified delay (not exact timing) * Runs in the timers phase * `0ms` doesn’t mean immediate execution 👉 Use when: Delay execution 📌 Example: setTimeout(() => console.log("timeout"), 0); 🔹 setInterval() → Runs repeatedly * Executes a function at fixed intervals * Continues until cleared 👉 Use when: Repeating tasks (polling, timers) 📌 Example: setInterval(() => console.log("running..."), 1000); 🔹 Key Differences (Quick View) process.nextTick(): * Executes immediately after current operation * Microtask queue * Highest priority setImmediate(): * Executes in next event loop cycle * Check phase setTimeout(): * Executes after delay * Timers phase setInterval(): * Executes repeatedly after fixed delay 🔹 Interview Tip If asked: 👉 Difference between nextTick, setImmediate, and setTimeout? 💡 Answer smartly: * nextTick → before event loop continues * setTimeout(0) → timers phase * setImmediate → check phase ⚠️ Pro Tip: Overusing `process.nextTick()` can block the event loop. Use it wisely. Master the event loop = Master Node.js 🚀 #NodeJS #JavaScript #BackendDevelopment #EventLoop #CodingInterview #SoftwareEngineer #LearnToCode

Want to Ace 👉 Web4you #JavaScript #Interviews? Master the Event Loop and Its Core Components! 𝟭. 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 - 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁? 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). Follow Arun Dubey for more related content! #javascript #eventloop #frontend #reactjs #questions

Want to Ace 👉 Web4you #JavaScript #Interviews? Master the Event Loop and Its Core Components! 𝟭. 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 - 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁? 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). Follow Arun Dubey for more related content! #javascript #eventloop #frontend #reactjs #questions

Want to Ace 👉 Web4you #JavaScript #Interviews? Master the Event Loop and Its Core Components! 𝟭. 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 - 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁? 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). Follow Arun Dubey for more related content! #javascript #eventloop #frontend #reactjs #questions

🚀 React JS Interview Coding Questions (For Mid–Senior Developers) If you're preparing for React interviews (3–10+ years experience), these coding questions are MUST practice 👇 🔥 1. Debounced Search Input Build a search bar that calls API only after user stops typing (use "useEffect + setTimeout" or custom hook). 🔥 2. Infinite Scroll Load more data when user reaches bottom (Intersection Observer API). 🔥 3. Custom useFetch Hook Create reusable hook with loading, error, and data handling. 🔥 4. Optimized Re-rendering Prevent unnecessary re-renders using "React.memo", "useMemo", "useCallback". 🔥 5. Form Handling + Validation Build form with controlled inputs + validation (email, password rules). 🔥 6. Implement Dark/Light Mode Toggle theme using Context API or Redux. 🔥 7. Role-Based Routing Admin/User protected routes using JWT + React Router. 🔥 8. Shopping Cart Logic Add/remove/update quantity + total price calculation. 🔥 9. File Upload with Preview Upload image and show preview before submit. 🔥 10. Build a Modal from Scratch Reusable modal with open/close, backdrop, and ESC key support. --- 💡 Bonus (Advanced Level): ✔ Implement Virtualized List (performance optimization) ✔ Build your own Redux-like state manager ✔ Micro-frontend integration in React ✔ Web Workers for heavy calculations --- 🎯 Pro Tip: In interviews, focus more on: - Clean code structure - Reusability (custom hooks/components) - Performance optimization - Edge cases handling --- 💬 Which question do you find most challenging? Let’s discuss in comments 👇 #ReactJS #FrontendDeveloper #JavaScript #CodingInterview #WebDevelopment #ReactInterview

Want to Ace 👉 Web4you hashtag #JavaScript #Interviews? Master the Event Loop and Its Core Components! 𝟭. 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 - 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁? 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). Follow Arun Dubey for more related content! #javascript #eventloop #frontend #reactjs #questions

React Interview Question: How do you re-render the view when the browser is resized? When we resize the browser window, React does not automatically re-render the component because React only re-renders when state or props change, not when the browser size changes. we can re-render the component by following these 3 steps: step 1- listen to the browser resize event step 2- store window size in state step 3- update state on resize 🔹 Step 1: Listen to the browser resize event - browser provides a resize event on the window object. - we can listen to it using addEventListener. 🔹 Step 2: Store window size in state - we use useState to store the current width (or height). - whenever this state updates, React will re-render the component. 🔹 Step 3: Update state on resize - inside the resize handler, update the state with the latest window size. 🔹 Example import { useState, useEffect } from "react"; function App() { // Step 2: Store window width in state const [width, setWidth] = useState(window.innerWidth); useEffect(() => { // Step 3: Function to update state on resize const handleResize = () => { setWidth(window.innerWidth); // triggers re-render }; // Step 1: Add event listener window.addEventListener("resize", handleResize); // Cleanup to prevent memory leaks return () => { window.removeEventListener("resize", handleResize); }; }, []); return ( <div> <h1>Window width: {width}</h1> <p>Try resizing your browser</p> </div> ); } export default App; 🔹 What’s happening here in above example? - when the component mounts, event listener is added - when the window resizes, handleResize runs - state (width) updates, React re-renders UI - when component unmounts, listener is removed 🔹Conclusion React does not track browser events automatically, but by connecting browser events to state, we stay in full control of re-rendering. Connect/Follow Tarun Kumar for more tech content and interview prep #ReactJS #FrontendDevelopment #JavaScript #WebDev #CodingInterview

𝗜 𝘁𝗵𝗼𝘂𝗴𝗵𝘁 𝗜 𝘄𝗮𝘀 𝗿𝗲𝗮𝗱𝘆 𝗳𝗼𝗿 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀... 𝘂𝗻𝘁𝗶𝗹 𝘁𝗵𝗶𝘀 𝗼𝗻𝗲 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝗽𝗿𝗼𝘃𝗲𝗱 𝗺𝗲 𝘄𝗿𝗼𝗻𝗴.... ASKED : "𝗘𝘅𝗽𝗹𝗮𝗶𝗻 𝘁𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝘃𝗲𝗻𝘁 𝗹𝗼𝗼𝗽 𝘄𝗶𝘁𝗵 𝗮𝘀𝘆𝗻𝗰 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝗿?" Me: "JavaScript is single-threaded. The event loop handles async operations by using the call stack and callback queue." Interviewer: "What about microtasks vs macrotasks?" Me: "Um... they're both queues?" Interviewer: "If I schedule a setTimeout and a Promise, which executes first?" Me: "...setTimeout?" Wrong. Interview over. I knew async/await. I used Promises daily. I'd built complex async applications. 𝗧𝗵𝗲 𝗲𝘃𝗲𝗻𝘁 𝗹𝗼𝗼𝗽 : It's the specific mechanism that coordinates synchronous code, microtasks, macrotasks, and browser APIs to create the illusion of concurrency in a single-threaded language. 𝗧𝗵𝗲 𝗺𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗲𝗹 𝘁𝗵𝗮𝘁 𝗳𝗶𝗻𝗮𝗹𝗹𝘆 𝗺𝗮𝗱𝗲 𝗶𝘁 𝗰𝗹𝗶𝗰𝗸: JavaScript has ONE thread. It can only execute one thing at a time. 𝗕𝘂𝘁 𝗶𝘁 𝗵𝗮𝘀 𝗵𝗲𝗹𝗽: → Browser APIs (setTimeout, fetch, DOM events) run outside JavaScript → Event loop coordinates what executes when → Two separate queues: microtasks and macrotasks The loop's job: When call stack is empty, check microtasks first. Execute ALL microtasks. Then take ONE macrotask. Repeat. 𝗧𝗵𝗲 𝟰 𝗽𝗶𝗲𝗰𝗲𝘀 𝗺𝗼𝘀𝘁 𝗱𝗲𝘃𝘀 𝗺𝗶𝘀𝘀: 𝟭) 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 Runs synchronous code → Long tasks block everything 𝟮) 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗵𝗶𝗴𝗵 𝗽𝗿𝗶𝗼𝗿𝗶𝘁𝘆) Promises run here → Always before timers 𝟯) 𝗠𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗹𝗼𝘄 𝗽𝗿𝗶𝗼𝗿𝗶𝘁𝘆) setTimeout, events → Runs after microtasks 𝟰) 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 Browser handles async work → Pushes callbacks to queues 𝗧𝗵𝗲 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄-𝗪𝗶𝗻𝗻𝗶𝗻𝗴 𝗔𝗻𝘀𝘄𝗲𝗿: "JavaScript is single-threaded with a call stack. Async work is handled by Web APIs, and callbacks go into queues. Microtasks (Promises) run first, then macrotasks (setTimeout). The event loop executes all microtasks, then one macrotask. That’s why Promises run before setTimeout." 𝗘𝗻𝗱 𝘄𝗶𝘁𝗵 𝟭 𝗰𝗼𝗻𝗰𝗿𝗲𝘁𝗲 𝗲𝘅𝗮𝗺𝗽𝗹𝗲: You click a button that triggers a fetch. Click handler runs → fetch goes to browser → handler finishes. While waiting, user interacts with UI normally. When data returns, Promise runs (microtask) → UI updates. Async work doesn’t block the app, it gets scheduled smartly!! 𝗡𝗼𝘄 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄 𝗛𝗢𝗪 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗵𝗮𝗻𝗱𝗹𝗲𝘀 𝗮𝘀𝘆𝗻𝗰! Learn these fundamentals deeply and you won’t just clear interviews… you’ll get hired. Start your prep with our frontend interview resource!! Link in comments👇

🔁 Reposting this — Event Loop & async behavior in JavaScript Went through this again today, and honestly, it’s one of those topics that feels simple at first but gets confusing when you actually try to explain it. Here’s how I currently understand it: - JS runs synchronous code first (call stack) - Then it clears microtasks (Promises, etc.) - Then macrotasks like setTimeout What clicked for me is this: 👉 even if setTimeout is 0ms, it still runs after promises Tried this example: console.log("start"); setTimeout(() => console.log("timeout"), 0); Promise.resolve().then(() => console.log("promise")); console.log("end"); Output: start end promise timeout Still working on explaining this better (especially dry runs), but getting clearer with practice. 📌 Open to frontend opportunities (React / JavaScript) Would love to know how you guys usually explain this in interviews. #JavaScript #EventLoop #Frontend #LearningInPublic #OpenToWork