React useCallback optimization: when to use it

𝟯 𝗧𝗿𝗶𝗰𝗸𝘆 𝗥𝗲𝗮𝗰𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝗔𝘀𝗸𝗲𝗱 𝗶𝗻 𝗠𝗮𝗻𝘆 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀 These are not your typical “what is useState” questions. These are the ones that actually test how well you understand React. ⸻ 1️⃣ Why does this component re-render even with React.memo? A child component is wrapped with React.memo. Props look the same. But it still re-renders. 👉 What could be causing this? Hint: Think beyond primitive values. ⸻ 2️⃣ Why is this useEffect running twice in development? You wrote an effect with an empty dependency array. Still, it runs twice. 👉 Is this a bug or expected behavior? 👉 What is React doing behind the scenes? ⸻ 3️⃣ Why is state not updating inside this async function? You update state, but inside a setTimeout or async callback, it still uses the old value. 👉 Why does this happen? 👉 How would you fix it? ⸻ These questions are simple to read… But tricky to answer correctly. Day 19/100 — sharing real React interview questions. #ReactJS #FrontendInterviews #JavaScript #FrontendEngineering #TechCareers

53 topics. 102 questions. 4 days. One platform. 20 tabs open. Half too basic, half too academic. No structure. And every time I came back next day I'd forget where I left off. So I just built what I needed. A platform for my own learning. 53 topics, 102 interview questions, 4 days. Day 1: JavaScript + Browser APIs Day 2: React internals (Fiber, hooks, re-renders, patterns) Day 3: Next.js (SSR, SSG, server components, middleware) Day 4: System design, security, testing, performance Each topic has 3 explanation levels. Layman, mid, senior. Senior isn't just "what is X". It's how you'd actually break it down in an interview. Spent the most time on that part. Collected the most asked interview questions with answers from multiple sources and LinkedIn posts. Added those too. Progress tracking is there because I literally kept forgetting which topic I was on lol. Sign up and it saves across devices. This was built for me. Not a polished product. There will be bugs. But the content covers pretty much everything that comes up in frontend rounds. I know a lot of devs are going through the same thing right now. Prepping alone, 50 resources open, no idea what you've covered and what you haven't. If this saves even one person some time, worth sharing. Link: https://lnkd.in/de49nsKY #frontend #react #nextjs #javascript #interviewprep

𝐖𝐡𝐲 𝐃𝐨 𝐖𝐞 𝐔𝐬𝐞 𝐂𝐥𝐨𝐬𝐮𝐫𝐞𝐬 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭 𝐉𝐒? 🤔 Closures are one of the most important concepts in JavaScript… and React uses them everywhere. But many developers don’t realize it 👇 What is a closure? A closure is when a function remembers the variables from its outer scope even after that scope has finished execution. How React uses closures 👇 🔹 Event Handlers Functions like onClick capture state values at the time they are created 🔹 Hooks (useState, useEffect) Hooks rely on closures to access state and props inside functions 🔹 Async operations (setTimeout, API calls) Closures hold the state values when the async function was created Example 👇 const [count, setCount] = useState(0); const handleClick = () => { setTimeout(() => { console.log(count); }, 1000); }; What will this log? 🤔 It logs the value of count at the time handleClick was created This is why we sometimes face “stale closure” issues ⚠️ Why this matters? Understanding closures helps you: ✔ Debug tricky bugs ✔ Avoid stale state issues ✔ Write better React logic Tip for Interview ⚠️ Don’t just define closures Explain how they behave in React That’s what interviewers look for Good developers use React. Great developers understand how it works under the hood. 🚀 #ReactJS #JavaScript #Closures #FrontendDeveloper #WebDevelopment #ReactInterview #CodingInterview #SoftwareDeveloper

🚨 Still confused about React lifecycle methods? Complete Lifecycle Flow (Class Component) constructor() You’re not alone. When I first learned React, lifecycle methods felt like a mess: ❌ Too many methods ❌ Hard to remember order ❌ No clear real-world connection Then I realized one simple thing 👇 👉 React lifecycle is just 3 phases: ✔ Mounting (Component created) ✔ Updating (State/Props change) ✔ Unmounting (Component removed) That’s it. Once you understand this flow, everything starts making sense: 💡 When to call APIs 💡 Where to optimize performance 💡 How to avoid bugs So I created a simple visual to make it easy for anyone preparing for interviews or working on real projects. 📌 Save this for quick revision 📌 Share with your developer friends And tell me in the comments 👇 Which React topic should I simplify next? #ReactJS #FrontendDeveloper #FullStackDeveloper #JavaScript #WebDevelopment #Coding #InterviewPrep #TechCommunity

🚀 Day 7 - Frontend Interview Series 🔥 Topic: Promise Chaining Handling multiple async operations can quickly become messy with nested callbacks 😵 That’s where Promise Chaining comes in! 👉 Promise chaining allows you to execute async tasks step-by-step using ".then()" 💡 Why it’s useful? ✔ Avoids callback hell ✔ Improves readability ✔ Makes code more maintainable 🔗 Example: getData() .then((data) => { console.log("Step 1:", data); return "Processed Data"; }) .then((processed) => { console.log("Step 2:", processed); }) .catch((error) => { console.log("Error:", error); }); ⚡ Key Tip: Always return something from ".then()" to pass it to the next step 📌 Without chaining = messy nested callbacks 📌 With chaining = clean & structured flow #JavaScript #WebDevelopment #Frontend #AsyncProgramming #Promises #React

Most important question that was asked in React Developer interview Sharing the questions here in case it helps someone preparing for similar roles. Some of the questions they asked: 1. What is React and why is it efficient? 2. How does React work internally? 3. What is the most challenging task you handled in your project? 4. Is JavaScript tightly coupled or loosely coupled? 5. Why do we use TypeScript? 6. How does "extends" work in TypeScript and what is the difference between type and interface? 7. How does Redux work, from installation to usage in a project? 8. Have you used Redux Toolkit (RTK) or TanStack Query? 9. What is the difference between bind and apply in JavaScript? 10. What has been your experience with useCallback and useMemo in real projects? 11. What is the role of the dependency array in useEffect? Overall, the round was focused on practical understanding of React, TypeScript and JavaScript rather than just theory. 👨💻 Follow for daily React, and JavaScript #React #JavaScript #TypeScript #Redux #Frontend #InterviewExperience #capgemini

🚀 Day 6 of My Frontend Developer Interview Preparation Today I explored one of the most powerful (and tricky 😅) concepts in JavaScript — Closures and how they behave with setTimeout. At first, closures feel simple — a function remembering its lexical scope. But when combined with asynchronous behavior like setTimeout, things get really interesting 🤯 💡 Key Learnings: A closure allows a function to access variables from its outer scope even after that function has finished executing. setTimeout doesn’t execute immediately — it runs after the specified delay, which can lead to unexpected outputs if you don’t understand closures properly. The combination of loops + closures + setTimeout can produce tricky interview questions 🔥 📌 One important insight: Understanding how JavaScript handles memory, execution context, and scope chain is the key to predicting outputs correctly. These concepts may look simple, but behind the scenes, a lot is happening! I’ll be sharing some tricky output-based questions on this soon 👀 👉 If you already know how closures behave with setTimeout, drop your answer in the comments! #javascript #frontenddeveloper #webdevelopment #coding #interviewpreparation #reactjs #learninpublic #100DaysOfCode

🚀 𝗦𝘁𝗼𝗽 𝗚𝗼𝗼𝗴𝗹𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝘀𝘆𝗻𝘁𝗮𝘅 𝗮𝗴𝗮𝗶𝗻 𝗮𝗻𝗱 𝗮𝗴𝗮𝗶𝗻... What if you had everything in one place? 👇 I’ve created a React.js Cheat Sheet to help you build faster and code smarter ⚛️ 📚 What’s inside: • JSX fundamentals • Core React concepts • Essential Hooks (useState, useEffect & more) 💡 Who is this for? ✔ Beginners getting started with React ✔ Developers preparing for interviews ✔ Engineers who want faster development & cleaner code 📌 Pro Tip: Great developers don’t memorize everything… They build systems and references they can rely on 💾 Save this post so you don’t have to search again while building 💬 Let’s discuss: What was the most confusing React concept when you started? 👨💻 Follow for more dev content #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks #CodingLife #DevTips #SoftwareEngineering

🚀 Day 8/30 – Frontend Interview Series 📌 What is Async/Await? async/await is a modern way to handle asynchronous operations in JavaScript. It makes your code look cleaner and easier to read compared to Promises and callbacks. 🔹 1. async Keyword Used before a function Always returns a Promise async function greet() { return "Hello"; } greet().then(console.log); // Hello 🔹 2. await Keyword Used inside async functions only Waits for a Promise to resolve async function fetchData() { let data = await Promise.resolve("Data received"); console.log(data); } fetchData(); 🔥 3. Example (Real-world API) async function getUser() { try { let response = await fetch("https://lnkd.in/dEvCbUij"); let data = await response.json(); console.log(data); } catch (error) { console.log("Error:", error); } } ⚡ Why use async/await? ✔ Cleaner code (no .then() chaining) ✔ Easier error handling (try...catch) ✔ Looks like synchronous code ✔ Better readability in large apps #JavaScript #WebDevelopment #Frontend #ReactJS #CodingJourney

𝟯 𝗧𝗿𝗶𝗰𝗸𝘆 𝗥𝗲𝗮𝗰𝘁 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝗔𝘀𝗸𝗲𝗱 𝗶𝗻 𝗠𝗮𝗻𝘆 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀 These are not your typical “what is useState” questions. These are the ones that actually test how well you understand React. ⸻ 1️⃣ Why does this component re-render even with React.memo? A child component is wrapped with React.memo. Props look the same. But it still re-renders. 👉 What could be causing this? Hint: Think beyond primitive values. ⸻ 2️⃣ Why is this useEffect running twice in development? You wrote an effect with an empty dependency array. Still, it runs twice. 👉 Is this a bug or expected behavior? 👉 What is React doing behind the scenes? ⸻ 3️⃣ Why is state not updating inside this async function? You update state, but inside a setTimeout or async callback, it still uses the old value. 👉 Why does this happen? 👉 How would you fix it? ⸻ These questions are simple to read… But tricky to answer correctly. #ReactJS #FrontendInterviews #JavaScript #FrontendEngineering #TechCareers