React Interview Questions: Tree Shaking for Smaller Bundles

🚀 JavaScript Interview Question: Event Bubbling vs Event Delegation One question I recently came across in a frontend interview was about Event Bubbling and Event Delegation in JavaScript. Let’s break it down simply 👇 🔹 Event Bubbling Event Bubbling is a mechanism where an event starts from the target element and then bubbles up to its parent elements in the DOM hierarchy. For example, if you click a button inside a div: Button → Div → Body → Document The event will trigger on the button first, then move upward to its parent elements. The event will trigger on the button first, then move upward to its parent elements. document.getElementById("parent").addEventListener("click", () => { console.log("Parent clicked"); }); document.getElementById("child").addEventListener("click", () => { console.log("Child clicked"); }); If the child is clicked, the console output will be: Child clicked Parent clicked This happens because of event bubbling. 🔹 Event Delegation Event Delegation is a technique where we attach a single event listener to a parent element instead of multiple child elements. It works because of event bubbling. Example: document.getElementById("list").addEventListener("click", (event) => { if (event.target.tagName === "LI") { console.log("List item clicked:", event.target.textContent); } }); Instead of adding listeners to every <li>, we attach one listener to the parent <ul>. 🔹 Why Event Delegation is Powerful ✅ Improves performance ✅ Reduces memory usage ✅ Works with dynamically added elements ✅ Cleaner and scalable code 💡 Interview Tip: If an interviewer asks about Event Delegation, always mention that it works because of Event Bubbling. 💬 Have you ever used event delegation in large React or JavaScript applications for performance optimization? #javascript #frontend #reactjs #webdevelopment #interviewpreparation #coding

🚀 JavaScript Interview Questions – Are You Really Prepared? Here are 5 questions many developers struggle to answer clearly: 1️⃣ What is the difference between parseInt() and Number()? Answer: parseInt() parses until invalid character; Number() converts entire string or returns NaN. 2️⃣ How do you check if a variable is an array? Answer: Using Array.isArray(). 3️⃣ What is the output of typeof null? Answer: "object" (a known JS quirk). 4️⃣ What is destructuring assignment? Answer: Syntax for unpacking values from arrays or properties from objects. 5️⃣ What is event bubbling? Answer: When an event propagates from child to parent elements. ⚠️ These are just 5 out of 3000+ JavaScript Interview Questions & Answers covered in my book. If you're preparing for: Frontend interviews React / Node roles Product-based companies Startup technical rounds This book is designed for clear, precise, interview-focused answers. 📘 3000+ Questions 📘 Beginner to Advanced 📘 Concise, interviewer-ready explanations If you're serious about cracking JavaScript interviews, this resource will save you months of preparation time.

If your frontend interview is just 2 days away, you can just stop trying to cover everything. That rarely works. Instead, focus on the highest-ROI topics the ones interviewers actually use to evaluate you. This list is short, brutal, and effective. 🔑 JavaScript Fundamentals (Non-Negotiable) These explain why most bugs happen. • var, let, const block vs function scope • Hoisting & Temporal Dead Zone • Closures & lexical environment • this binding, call / apply / bind, arrow functions • Prototype chain & inheritance • ES6 classes vs prototypes (what’s syntax sugar, what isn’t) 👉 If this is weak, interviews fall apart fast. ⚙️ Execution Model & Async Behavior Almost every “why does this behave weirdly?” question lives here. • Event loop — call stack, task queue, microtask queue • Promises & chaining • async / await patterns (errors, sequencing) • Stale closures in async code 🧠 Data, References & Immutability Interviewers love probing reference bugs. • Equality & coercion (== vs ===, truthy/falsy) • Shallow vs deep copy • Object & array references • map, filter, reduce, find, some, every 🌐 Browser & DOM (Often Underestimated) This separates frontend engineers from React users. • DOM events & event delegation • Reflow vs repaint (what actually triggers them) • Debouncing vs throttling • requestAnimationFrame when & why to use it 🌍 Network & Side Effects Real frontend work is async + network heavy. • Fetch API • AbortController — why cancellation matters • CORS basics (what FE controls vs what it doesn’t) • Web storage vs cookies — security & use cases ⚡ Performance & Architecture Signals You don’t need mastery — you need reasoning. • Pure functions & testable code • When memoization helps vs hurts • Web Workers — what problems they actually solve 🧠 How to Study These in 2 Days Don’t memorize definitions. For every topic, practice answering: • Why does this exist? • What breaks if I misuse it? • Where have I seen this bug in real code? That’s how interviews probe. 🎯 Final Reminder You don’t pass interviews by knowing more. I think you pass by explaining fundamentals clearly under pressure. If this helped, save it. If you’re interviewing soon, good luck. You’ve got this. #FrontendInterviews #InterviewPreparation #WebPerformance #SoftwareEngineering

🚀 JavaScript Interview Topic: Event Loop & Async Behavior One concept that appears again and again in frontend interviews is the JavaScript Event Loop. Many developers know the basics, but interviewers love asking scenario-based questions around it. Here are 10 tricky questions you should be able to answer: 1️⃣ What will be the output order when using console.log, setTimeout, and Promise.resolve together? 2️⃣ Why do Promise callbacks run before setTimeout callbacks in JavaScript? 3️⃣ What is the difference between Microtasks and Macrotasks in the event loop? 4️⃣ What happens internally when async/await is used with Promise.resolve()? 5️⃣ Why does setTimeout(fn, 0) still execute after synchronous code? 6️⃣ What will be the output when multiple Promise.then() chains run inside setTimeout? 7️⃣ How does the Call Stack interact with the Event Loop when asynchronous tasks complete? 8️⃣ What happens if a microtask keeps scheduling another microtask repeatedly? 9️⃣ What is the difference between queueMicrotask() and Promise.then()? 🔟 How can misunderstanding the Event Loop cause UI bugs in React applications? 💡 Mastering the Event Loop is not just for interviews — it helps you write predictable async code and avoid subtle bugs. Curious — which one of these questions has been asked to you in an interview? 👀 #javascript #webdevelopment #frontenddevelopment #reactjs #softwareengineering #codinginterview #javascriptdeveloper #techinterview #programming #developers

React Interview Questions That 90% of Candidates Can't Answer! Everyone prepares for useState, useEffect, and Virtual DOM. But senior engineers get asked THIS. 𝟭. 𝗪𝗵𝗮𝘁 𝗵𝗮𝗽𝗽𝗲𝗻𝘀 𝗶𝗳 𝘆𝗼𝘂 𝗰𝗮𝗹𝗹 𝗮 𝘀𝗲𝘁𝗦𝘁𝗮𝘁𝗲 𝗶𝗻𝘀𝗶𝗱𝗲 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘄𝗶𝘁𝗵 𝗻𝗼 𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝘆 𝗮𝗿𝗿𝗮𝘆? - Most say "infinite loop" but can you explain exactly WHY and how React's render cycle causes it? That's what they're testing. 𝟮. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗲𝗮𝗿𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗮𝗻𝗱 𝗵𝗼𝘄 𝗱𝗼𝗲𝘀 𝗖𝗼𝗻𝗰𝘂𝗿𝗿𝗲𝗻𝘁 𝗠𝗼𝗱𝗲 𝘀𝗼𝗹𝘃𝗲 𝗶𝘁? - Never heard of it? You're not alone. Tearing happens when UI shows inconsistent data during async renders. This is a senior-level gem. 𝟯. 𝗪𝗵𝗮𝘁'𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 𝗮𝗻𝗱 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘄𝗶𝘁𝗵 𝗮 𝗿𝗲𝗮𝗹 𝘂𝘀𝗲 𝗰𝗮𝘀𝗲? - Hint: It's all about when they fire relative to DOM paint. Most candidates fumble the real-world example. 𝟰. 𝗛𝗼𝘄 𝘄𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗯𝘂𝗶𝗹𝗱 𝗮 𝗥𝗲𝗮𝗰𝘁 𝗮𝗽𝗽 𝘁𝗵𝗮𝘁 𝘄𝗼𝗿𝗸𝘀 𝗪𝗜𝗧𝗛𝗢𝗨𝗧 𝗮 𝗯𝘂𝗻𝗱𝗹𝗲𝗿? - Tests your understanding of ESModules, CDN imports, and how React actually works under the hood. 𝟱. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗮 𝗭𝗼𝗺𝗯𝗶𝗲 𝗖𝗵𝗶𝗹𝗱 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁-𝗥𝗲𝗱𝘂𝘅? - It occurs when a child component tries to access a store item that no longer exists. Can you explain how to prevent it? 𝟲. 𝗪𝗵𝘆 𝘀𝗵𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗻𝗲𝘃𝗲𝗿 𝗱𝗲𝗳𝗶𝗻𝗲 𝗮 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗶𝗻𝘀𝗶𝗱𝗲 𝗮𝗻𝗼𝘁𝗵𝗲𝗿 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁? - Most junior devs do this. Senior devs know it breaks reconciliation and causes subtle, hard-to-debug bugs. 𝟳. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗦𝘁𝗮𝗹𝗲 𝗖𝗹𝗼𝘀𝘂𝗿𝗲 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸𝘀 𝗮𝗻𝗱 𝗵𝗼𝘄 𝗱𝗼 𝘆𝗼𝘂 𝗳𝗶𝘅 𝗶𝘁? - This trips up even experienced devs. If your useEffect is reading old state values, you're likely hitting this. 𝟴. 𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝗥𝗲𝗮𝗰𝘁 𝗣𝗼𝗿𝘁𝗮𝗹𝘀 𝗮𝗻𝗱 𝘄𝗵𝗲𝗻 𝘄𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗔𝗖𝗧𝗨𝗔𝗟𝗟𝗬 𝘂𝘀𝗲 𝘁𝗵𝗲𝗺 𝗶𝗻 𝗽𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻? - Hint: Modals, tooltips, and dropdowns that need to escape overflow:hidden parents. 𝟵. 𝗖𝗮𝗻 𝘆𝗼𝘂 𝘂𝘀𝗲 𝗥𝗲𝗮𝗰𝘁 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗝𝗦𝗫? 𝗪𝗵𝘆 𝘄𝗼𝘂𝗹𝗱 𝘆𝗼𝘂? - Yes! React.createElement() is what JSX compiles to. Understanding this shows deep knowledge. 𝟭𝟬. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗛𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗮𝗻𝗱 𝘄𝗵𝗮𝘁 𝗰𝗮𝘂𝘀𝗲𝘀 𝗛𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻 𝗘𝗿𝗿𝗼𝗿𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀? - With SSR becoming the norm, this question is showing up in EVERY senior frontend interview right now. Follow the Frontend Circle By Sakshi channel on WhatsApp: https://lnkd.in/gj5dp3fm 𝗙𝗼𝗹𝗹𝗼𝘄𝘀 𝘂𝘀 𝗵𝗲𝗿𝗲 → https://lnkd.in/geqez4re

🚀 Node.js Interview Question #1: What is the Event Loop? If you're preparing for a Node.js backend developer interview, one of the most common questions is: 👉 “What is the Event Loop in Node.js?” 🔹 Simple Explanation Node.js uses a single-threaded, non-blocking architecture. Instead of creating multiple threads for each request, Node.js handles many requests efficiently using the Event Loop. The Event Loop is the mechanism that allows Node.js to perform asynchronous operations such as: - Database queries - File system operations - API calls - Timers Even though Node.js runs on a single thread, it can still handle thousands of concurrent requests. 🔹 How it Works 1️⃣ JavaScript code runs in the Call Stack 2️⃣ When an async operation occurs (like a DB call), it is sent to Node.js APIs / Worker Threads 3️⃣ Once completed, the callback is placed in the Callback Queue 4️⃣ The Event Loop continuously checks the stack and pushes callbacks back to the stack when it's empty This is how Node.js achieves high performance and scalability. 🔹 Example console.log("Start"); setTimeout(() => { console.log("Inside Timeout"); }, 0); console.log("End"); Output Start End Inside Timeout Why? Because the "setTimeout" callback goes to the callback queue, and the event loop executes it only after the call stack is empty. 🔹 Key Takeaway ✔ Node.js is single-threaded but asynchronous ✔ Event Loop enables non-blocking I/O ✔ Helps Node.js handle many concurrent users efficiently --- 💬 If you're learning Node.js or preparing for backend interviews, follow for more quick backend concepts. #NodeJS #BackendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #TechInterview

💡React Interview Question💡 Why do we always use useState, useRef, useReducer hook to store any information in the functional component instead of using normal variables? Answer: Whenever we create a React functional component, React behind the scenes creates a JavaScript function, and uses bind method to pass the props as arguments for each component like this: const User = User.bind(null, { userId: 10, username: 'Mike' }) Here, because of the bind method so we can re-use that component later multiple times with different props like this: <User userId={10} username="Mike" /> <User userId={12} username="Jerry" /> And because 𝗨𝘀𝗲𝗿 component is converted to a JavaScript function, each time you call that function, all the local variables, event handlers declared in the component will be re-created on every function call/re-render of the component. That's the reason we use hooks like 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲, 𝘂𝘀𝗲𝗥𝗲𝗱𝘂𝗰𝗲𝗿 or 𝘂𝘀𝗲𝗥𝗲𝗳 to store the values inside the component to retain the values across multiple re-renders. Even though we declare state or ref in a component, state or ref value is actually stored outside the component linked to that particular component, that's why we don't loose its value during re-render. If we declare a local variable 𝗰𝗼𝘂𝗻𝘁𝗲𝗿 along with the 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 hook inside a 𝗨𝘀𝗲𝗿 component like this: 𝘧𝘶𝘯𝘤𝘵𝘪𝘰𝘯 𝘜𝘴𝘦𝘳() { 𝘤𝘰𝘯𝘴𝘵 [𝘶𝘴𝘦𝘳, 𝘴𝘦𝘵𝘜𝘴𝘦𝘳] = 𝘶𝘴𝘦𝘚𝘵𝘢𝘵𝘦(𝘯𝘶𝘭𝘭); 𝘤𝘰𝘯𝘴𝘵 𝘤𝘰𝘶𝘯𝘵𝘦𝘳 = 𝟣𝟢; 𝘤𝘰𝘯𝘴𝘵 𝘩𝘢𝘯𝘥𝘭𝘦𝘊𝘭𝘪𝘤𝘬 = (𝘦𝘷𝘦𝘯𝘵) => { // 𝘴𝘰𝘮𝘦 𝘤𝘰𝘥𝘦 } // 𝘴𝘰𝘮𝘦 𝘑𝘚𝘟 } then the 𝗰𝗼𝘂𝗻𝘁𝗲𝗿 variable and 𝗵𝗮𝗻𝗱𝗹𝗲𝗖𝗹𝗶𝗰𝗸 method will be re-created on every re-render of the 𝗨𝘀𝗲𝗿 component so 𝗰𝗼𝘂𝗻𝘁𝗲𝗿 variable value will be reset to 𝟭𝟬 on every re-render of the component, but the 𝘂𝘀𝗲𝗿 state will maintain its previous value across multiple re-render of the 𝗨𝘀𝗲𝗿 component and it 𝘄𝗶𝗹𝗹 𝗻𝗼𝘁 𝗯𝗲 re-initialized to null on re-render. Because even though the state is declared inside a component, React actually stores the state information outside the component so as to not lose its value during re-render. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nextjs #webdevelopment

🚀 **Master These 20 JavaScript Interview Questions** If you're preparing for your next JavaScript interview, these 20 questions cover the fundamentals every developer should know: 1️⃣ What is a closure, and how is it used in real-world scenarios? 2️⃣ How does hoisting work for variables and functions? 3️⃣ Can you explain the event loop and how JavaScript handles asynchronous tasks? 4️⃣ What are Promises, and how do they manage async operations? 5️⃣ How does `async/await` simplify working with Promises? 6️⃣ Why don’t arrow functions have their own `this`? 7️⃣ What is destructuring and when should you use it? 8️⃣ What’s the difference between the spread operator and rest parameters? 9️⃣ How does prototype-based inheritance work in JavaScript? 🔟 What determines the value of `this` in different execution contexts? 1️⃣1️⃣ How do ES6 classes work, and how do they differ from constructor functions? 1️⃣2️⃣ Why are JavaScript modules important in modern applications? 1️⃣3️⃣ When should you use `map()` and `filter()`? 1️⃣4️⃣ How does `reduce()` accumulate values into a single output? 1️⃣5️⃣ What’s the difference between `setTimeout` and `setInterval`? 1️⃣6️⃣ How do template literals improve string manipulation? 1️⃣7️⃣ What is type coercion, and why can it be unpredictable? 1️⃣8️⃣ What are truthy and falsy values in JavaScript? 1️⃣9️⃣ When should you use debouncing vs throttling? 2️⃣0️⃣ What is currying, and how does it enhance function reusability? If you're preparing for interviews or sharpening your fundamentals, these questions are a great place to start. #JavaScript #Frontend #WebDevelopment #Interviews #Coding #TechCareers

⚛️ Top 150 React Interview Questions – 142/150 📌 Topic: ⚡ Vite vs. CRA ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHAT is it? CRA (Create React App) The legacy React starter kit that bundles the entire app using Webpack before serving it. Vite A modern build tool that uses Native ES Modules (ESM) to serve code instantly during development. CRA = Bundle first, then serve Vite = Serve instantly, bundle later (for production) ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHY does Vite win? 🚀 Dev Server Speed Vite starts instantly because it doesn’t bundle everything upfront. 🔥 Fast HMR (Hot Module Replacement) Only the changed module updates — even in large apps. 🧠 Modern Architecture Uses native browser ESM + Esbuild (written in Go). ⚠️ CRA Status CRA is officially deprecated. Vite is the modern standard. Speed difference becomes massive in big projects. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 HOW do they differ? ❌ CRA (Heavy Webpack Bundle) npx create-react-app my-app • Full bundling before dev server • Slow startup in large apps • Webpack configuration locked (unless ejected) ✅ Vite (Modern & Fast) npm create vite@latest my-app -- --template react • Native ESM during development • On-demand file serving • Esbuild-powered speed • Lean configuration Vite bundles only for production build. ━━━━━━━━━━━━━━━━━━━━━━ 🔹 WHERE to use what? 🆕 New Projects Always choose Vite or Next.js. 🏢 Large Codebases Vite reduces startup time from minutes → seconds. 🔧 Legacy Maintenance CRA still exists in older enterprise apps. 📦 Component Libraries Vite is perfect for fast local development. ━━━━━━━━━━━━━━━━━━━━━━ 📝 SUMMARY CRA is like a Traditional Library 📚 To read one page, you wait while the librarian organizes the entire collection (bundle). Vite is like an E-Reader 📱 You tap the page you want — and it loads instantly. ━━━━━━━━━━━━━━━━━━━━━━ 👇 Comment “React” if this series is helping you 🔁 Share with someone starting modern React projects #ReactJS #Vite #CreateReactApp #WebPerformance #FrontendTools #ModernWeb #Top150ReactQuestions #LearningInPublic #Developers ━━━━━━━━━━━━━━━━━━━━━━

🚨 I Recently Attended a Frontend Developer Interview — Here’s What Was Asked I gave a frontend interview recently, and honestly, it reminded me that companies are still deeply focused on strong JavaScript fundamentals, React behavior, and real engineering thinking — not just libraries. Sharing some of the questions I was asked so it helps someone preparing right now 👇 💻 JavaScript Fundamentals • What are the data types in JavaScript? • What do you mean by Primitive Datatype? • How would you copy one object into another object? • Explain Closure in JavaScript with a real example • What are the risks of using closures in production code? ⚛️ React Deep Dive • If count is updated using useRef, will the UI re-render? (They shared a code snippet) • Rewrite the same logic using useState • Predict the output of this code: const handleClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; • Have you used the useEffect hook? Explain practical scenarios where you applied it. 🎨 CSS & Layout • Explain the CSS Box Model • Have you used CSS Grid in real-world layouts? 🔧 Developer Workflow • What Git flow do you follow in your team? (Feature branches, PR reviews, release strategy, collaboration — they were interested in real experience.) 👉 My biggest takeaway: Even for experienced frontend roles, interviews are testing how clearly you understand core concepts rather than how many libraries you know. If you’re preparing right now: Focus on closures, React rendering behavior, and real-world workflow discussions — these topics came up multiple times. 💬 Should I share detailed explanations of: 1️⃣ Closures & common mistakes 2️⃣ Git workflow used in product teams? 3️⃣ Next Interview Experience? #FrontendDevelopment #ReactJS #Javascript #InterviewExperience #WebDevelopment #LearnInPublic