React useEffect: Handling Side Effects and Cleanup

𝗔 𝗥𝗲𝗮𝗰𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝗜 𝗖𝗮𝗺𝗲 𝗔𝗰𝗿𝗼𝘀𝘀 𝗥𝗲𝗰𝗲𝗻𝘁𝗹𝘆 Imagine you have a component rendering a list of 5,000 users. Every time the parent component updates, the entire list re-renders. The UI starts lagging. What would you try first to optimize it? Possible approaches: 1️⃣ Wrap the list component with React.memo 2️⃣ Use useMemo for the filtered data 3️⃣ Virtualize the list using libraries like react-window 4️⃣ Move state closer to where it’s used Which approach would you try first — and why? Continuing Day 5 — sharing interesting React interview questions I come across. #ReactJS #FrontendInterviews #JavaScript #FrontendDevelopment

JavaScript Interview Question 🔥 const fun = () => { try { return 1; } finally { return 3; } }; console.log(fun()); Output: 3 Why? The finally block always executes and overrides any return from try or catch. 👉 Interview Tip: If finally has a return, it will win—always. #frontend #reactjs #nextjs #javascript #community

𝗥𝗲𝗮𝗰𝘁 𝗝𝗦 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 — 𝗖𝗼𝗺𝗽𝗹𝗲𝘁𝗲 𝗚𝘂𝗶𝗱𝗲 𝗳𝗼𝗿 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 Prepare for your next frontend interview with the most important React JS interview questions. This guide covers core concepts, hooks, state management, lifecycle methods, performance optimization, component architecture, and real-world scenarios asked by top companies. #ReactJS #FrontendDeveloper #WebDevelopment #JavaScript #ReactInterview #CodingInterview #TechInterview #SoftwareDeveloper #ReactHooks #LearnReact

JavaScript Interview Question 🔥 const numbers = [1, 2, 3, 4, 5]; const newNumbers = numbers.map(num => { if (num % 2 === 0) return; return num * 2; }); console.log(newNumbers); Output: [2, undefined, 6, undefined, 10] Why? .map() always returns an array of the same length as the original If the callback doesn’t return a value, undefined is inserted Here, even numbers return undefined, odd numbers return num * 2 What would you use instead of .map() if you want to skip undefined values? Comment below 👇 #frontend #reactjs #javascript #interview #community #nextjs

🤔 Ever clicked a button inside a card… and the card’s onClick fired too? That’s event propagation (aka bubbling/capturing) doing its job. 🧠 JavaScript interview question What is event propagation, and what does stopPropagation() actually stop? ✅ Short answer A DOM event travels through the tree in 3 phases: Capturing (down) → 2) Target → 3) Bubbling (up) event.stopPropagation() stops the event from continuing to other elements in the propagation path. 🔍 The 3 phases (how the event moves) Capturing (trickling): document → ... → target (only if listener uses { capture: true }) Target: handlers on the clicked element Bubbling: target → ... → document (default for most listeners) 🎯 event.target vs event.currentTarget target = the actual element you clicked currentTarget = the element whose listener is currently running This is the key for event delegation on parents. 💻 Example (capturing happens first, then bubbling) document.addEventListener( "click", (e) => { console.log("capturing at document"); }, { capture: true } ); document.body.addEventListener("click", () => { console.log("bubbling at body"); }); // Click anywhere: // 1) "capturing at document" // 2) "bubbling at body" 🛑 Stopping propagation (2 flavors) event.stopPropagation() Stops the event from moving to parent/ancestor listeners. ✅ Other handlers on the same element can still run. event.stopImmediatePropagation() Stops bubbling and prevents other handlers on the same element from running. ⚠️ Common mistake stopPropagation() does NOT stop default behavior. To stop a link from navigating, use event.preventDefault(). ⚛️ React note In React you’ll typically use e.stopPropagation() inside an onClick to prevent a parent component’s handler from firing, same idea, just React’s event wrapper. #JavaScript #Frontend #WebDevelopment #DOM #ReactJS #InterviewPrep #100DaysOfCode #TypeScript

🚨 JavaScript Async Interview Question What will be the output? console.log("Start"); setTimeout(() => { console.log("Timeout 1"); }, 0); Promise.resolve() .then(() => { console.log("Promise 1"); }) .then(() => { console.log("Promise 2"); }); setTimeout(() => { console.log("Timeout 2"); }, 0); console.log("End"); Looks simple… But many developers get the order wrong. Because JavaScript doesn’t execute async code the way we intuitively expect. This question tests your understanding of: • Call Stack • Microtask Queue • Macrotask Queue • JavaScript Event Loop What do you think the output will be? #JavaScript #FrontendInterview #EventLoop #ReactJS #FrontendDeveloper #ProductBasedCompany

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? Keys in React are 𝗻𝗼𝘁 𝗷𝘂𝘀𝘁 𝗳𝗼𝗿 𝗿𝗲𝗺𝗼𝘃𝗶𝗻𝗴 𝘄𝗮𝗿𝗻𝗶𝗻𝗴𝘀 — they control how React 𝗶𝗱𝗲𝗻𝘁𝗶𝗳𝗶𝗲𝘀 𝗮𝗻𝗱 𝗿𝗲𝘂𝘀𝗲𝘀 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀. Using unstable keys (like array indexes in dynamic lists) can cause: - Broken animations - Lost input focus - Incorrect component state 🔧 𝗕𝗲𝘀𝘁 𝗽𝗿𝗮𝗰𝘁𝗶𝗰𝗲: Always use 𝘀𝘁𝗮𝗯𝗹𝗲, 𝘂𝗻𝗶𝗾𝘂𝗲 𝗜𝗗𝘀 from your data whenever possible. Good keys = predictable UI behavior. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CodingTips #BestPractices #FullstackDeveloper

 JavaScript Interview Question 🔥 const person = { name: 'Alice' }; function showAge(age) { console.log(`${this.name} is ${age} years old`); } showAge.call(person, 11); // call Output: Alice is 11 years old showAge.bind(person, 11); // bind (not executed) How would you fix the bind so it prints: 👉 Alice is 11 years old 💡 Hint: bind() does not execute immediately. Drop your fix in the comment section 👇 #javaScript #ReactJS #NextJS #frontend #community #interviewTips

Day 45/365 – JS Interview Question 🚀 var x = 1; function test() { console.log(x); var x = 2; } test(); ✅ Output: undefined 💡 Why? Inside the function, var x is hoisted to the top of its scope. So when console.log(x) runs, the local x already exists — but it hasn’t been assigned 2 yet. That’s why it prints undefined, not 1. #javascript #hoisting #jsinterview #frontend #js #interview #frontendprep

Day 40/365 – slice() vs splice() in JavaScript Many developers confuse slice() and splice() — but the distinction is essential for avoiding unintended mutations. 🔹slice() → does NOT modify the original array const arr = [1, 2, 3, 4]; const result = arr.slice(1, 3); console.log(result); // [2, 3] console.log(arr); // [1, 2, 3, 4] (unchanged) 🔹 splice() → modifies the original array constarr= [1, 2, 3, 4]; const result=arr.splice(1, 2); console.log(result); // [2, 3] console.log(arr); // [1, 4] (modified) 👉 Rule of thumb: slice = copy splice = change Understanding this prevents unexpected bugs — especially in state management. #JavaScript #CodingTips #WebDevelopment #js #jsinterview #interview