React's Reference Equality Gotcha: Avoiding Performance Hits

⚠️ Props vs State in React If you don’t understand this properly… 👉 React will ALWAYS feel confusing. Let’s simplify it 👇 --- 🧩 Props (Think: Parameters) ✔ Passed from Parent → Child ✔ Read-only (cannot be changed) ✔ Used to send data Example: ```jsx <Child name="Kiran" /> ``` --- ⚙️ State (Think: Internal Memory) ✔ Managed inside the component ✔ Can be updated ✔ Controls UI behavior Example: ```jsx const [count, setCount] = useState(0); ``` --- 🔥 The Biggest Mistake: Trying to change props ❌ 👉 You can’t. --- 💡 Key Insight: Props = Input State = Internal Data --- 📌 Simple Analogy: Props = Function arguments 📥 State = Local variables 📦 --- 🧠 Pro Tip: If data needs to change → use State If data is passed → use Props --- 💬 Question: What confused you more when learning React? Props or State? #ReactJS #Frontend #JavaScript #WebDevelopment #Coding #LearnReact

🔥 Still fishing your API data with useEffect? 🎣 I was doing the same… One API call — but handling loading, errors, dependency arrays, and refetch issues 😵 It felt like more work than the actual feature. Then I switched to React Query ⚡ And everything just… worked. No manual fetching. No unnecessary state management. No headaches. Just clean, synced, and reliable data. 👉 Work smarter. Not harder. Stop fishing your data 🎣 Start using React Query ⚡ Follow for more 🚀 #ReactNative #ReactNativeDevelopers #MobileAppDevelopment #ReactJS #ReactQuery #WebDevelopment #FrontendDevelopment #JavaScript #100DaysOfCode #DevCommunity #CodingLife #SoftwareEngineering #Programming #LearnToCode #Developers #TechContent #MobileApp

📒 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐡𝐚𝐬 𝐚 𝐜𝐥𝐞𝐚𝐧𝐞𝐫 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐢𝐧 𝐭𝐡𝐞 𝐛𝐚𝐜𝐤𝐠𝐫𝐨𝐮𝐧𝐝… 𝐚𝐧𝐝 𝐦𝐨𝐬𝐭 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐢𝐠𝐧𝐨𝐫𝐞 𝐢𝐭. 𝑌𝑒𝑠, 𝐼’𝑚 𝑡𝑎𝑙𝑘𝑖𝑛𝑔 𝑎𝑏𝑜𝑢𝑡 𝐺𝑎𝑟𝑏𝑎𝑔𝑒 𝐶𝑜𝑙𝑙𝑒𝑐𝑡𝑖𝑜𝑛 (𝐺𝐶) ♻️ Every time you create: ✅ objects ✅ arrays ✅ functions 𝐽𝑎𝑣𝑎𝑆𝑐𝑟𝑖𝑝𝑡 𝑎𝑙𝑙𝑜𝑐𝑎𝑡𝑒𝑠 𝑚𝑒𝑚𝑜𝑟𝑦. 𝐵𝑢𝑡 𝑡ℎ𝑒 𝑟𝑒𝑎𝑙 𝑞𝑢𝑒𝑠𝑡𝑖𝑜𝑛 𝑖𝑠… When does JS free that memory? ➡️ Only when the value becomes unreachable. 🔥 Reachable = Alive If something can be accessed from: 1️⃣ global variables 2️⃣ current function variables 3️⃣ call stack …it stays in memory. Example: 𝗹𝗲𝘁 𝘂𝘀𝗲𝗿 = { 𝗻𝗮𝗺𝗲: "𝗝𝗼𝗵𝗻" }; 𝘂𝘀𝗲𝗿 = 𝗻𝘂𝗹𝗹; Now no one can access it → GC removes it. ⚡ 𝐵𝑖𝑔𝑔𝑒𝑠𝑡 𝑚𝑖𝑠𝑐𝑜𝑛𝑐𝑒𝑝𝑡𝑖𝑜𝑛: “Objects are deleted when they have no references.” Not exactly. Because two objects can reference each other and STILL get deleted. 📌 If the main root reference is gone, the whole connected group becomes an unreachable island → GC clears everything. 🚀 𝑊ℎ𝑦 𝑠ℎ𝑜𝑢𝑙𝑑 𝑦𝑜𝑢 𝑐𝑎𝑟𝑒? Because this is how memory leaks happen: ❌ event listeners not removed ❌ unused variables still holding references ❌ large objects stored unnecessarily Result: 🐢 slow apps 💥 crashes 📉 poor performance 💡 Simple rule: If you don’t need it → remove the reference. Because JavaScript will clean it… only after you let go. #JavaScript #WebDevelopment #Frontend #ReactJS #Programming #Coding #SoftwareEngineering #Tech #Learning #interview

🚀 React Series – Day 13 useRef - A Simple Way to Persist Values Without Re-rendering In React, most developers rely on state to manage data. But not every value needs to trigger a UI update. This is where useRef comes in. It allows you to store a value that persists across renders without causing the component to re-render. Some common use cases: • Accessing DOM elements (e.g., focusing an input field) • Storing previous values • Managing timers or intervals For example, focusing an input field without re-rendering the component is a perfect use case for useRef. 👉 The key difference: State updates → re-render component useRef updates → no re-render This makes it a great choice for handling values that don’t directly affect the UI. #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #learnreact #30daysofcode #programming #reactinterview #react #coding

🤔 Wait… shouldn’t variables be deleted? How is it possible that a function still remembers a variable…even after the function where it was created has already finished executing? 😳 👉 Sounds impossible, right? 🚀 JavaScript’s one of the most powerful concepts: Closures 🧠 What is a Closure? A closure is created when a function is defined inside another function, and the inner function can access variables from its parent scope — even after the parent function has finished execution. ⚡Shouldn’t variables be deleted? Normally, yes ✅ 👉 Once a function finishes, its local variables are removed from memory (thanks to garbage collection) But closures change the game 👇 👉 If an inner function is still using those variables, JavaScript keeps them alive in memory 🔍 What’s really happening? The inner function “closes over” its parent’s variables 💡 That’s why it’s called a closure Even though the outer function is done… the inner function still has access to its scope 😮 🔐 Why Closures Matter (Real Use Cases) Closures aren’t just theory — they’re used everywhere: 👉 Encapsulation (Private Variables) Keep data hidden from global scope 👉 Debouncing & Throttling Control function execution (very common in React apps) 👉 State management patterns Maintain data across function calls 💡 Real Developer Insight Closures are powerful… but can be tricky 👉They can also hold memory longer than expected 👉 Misuse can lead to memory leaks 🚀 Final Thought: Most developers use closures unknowingly… But great developers understand how and why they work. #JavaScript #FrontendDevelopment #WebDevelopment #Closures #CodingTips #LearnJavaScript #BuildInPublic #100DaysOfCode #LearnInPublic

I spent 3 months confused by React. Then I learned Hooks — and everything finally clicked. Most tutorials throw you into class components and lifecycle methods. It's overwhelming. But Hooks changed everything — they made React actually fun to write. Here's the complete mental map I wish I had on day one: ⚡ useState — add local state to any function component ⚡ useEffect — handle side effects (API calls, subscriptions) 🔵 useRef — access DOM elements & persist values without re-rendering 🔵 useContext — share data across the component tree 🟡 useMemo — cache expensive calculations 🟡 useCallback — memoize functions to prevent unnecessary re-renders 🟢 useReducer — manage complex state with reducer logic 🟢 useLayoutEffect — like useEffect, but fires before paint 5 tips to go from beginner → advanced: Master useState & useEffect DEEPLY before moving on Build custom hooks — extract logic you reuse (e.g. useWindowSize) Think in data flow — hooks work best when you understand how state moves Optimize wisely — reach for useMemo/useCallback only when you actually need them Keep building. Real projects teach what tutorials can't. Hooks aren't just syntax — they're a new way of thinking about UI logic. If you're just starting out: be patient with yourself. The mental model takes time. Once it lands, you'll wonder how you ever coded without them. Save this post — it'll make sense in ways it doesn't yet. 🔖 Which Hook was the hardest for you to wrap your head around? Drop it below 👇 #ReactJS #WebDevelopment #JavaScript #Frontend #ReactHooks #Coding #LearnToCode #SoftwareEngineering #100DaysOfCode

React Learning Series | Contd... #Day23: useRef : Refreshing the basics. 👉 A ref is a mutable object that persists across re-renders 👉 Unlike variables inside components, it is NOT recreated on every render 👉 You access it via ref.current ✅ const ref = useRef({ testId: 123 }); 💡 Key difference vs State: • ref → mutable, synchronous, NO re-render • state → immutable, async, triggers re-render 🚫 Don’t use refs when: ❌ You need UI updates ❌ You want to pass data as props 👉 Think of refs as an escape hatch, not a data store. ⚠️ Important: 🔴 Refs are assigned only after the DOM is rendered. 🔁 Passing refs to child components: 1️⃣ As prop (manual way) 2️⃣ Using forwardRef (clean & scalable way) #React #JavaScript #Frontend #WebDevelopment #SoftwareEngineering

Building a real-world application always comes with those “lightbulb” moments… usually after a few hours of frustration 😅 Recently, I spent 3 hours debugging a CRUD project, chasing what felt like a complex issue ,only to discover the real problem was a missing .json() in a fetch call. It’s funny how easy it is to overlook the basics when you're deep into complex logic. That one small mistake reminded me of something important: 👉 In the MERN stack, the connection between frontend and backend depends on small but critical details 👉 If you don’t parse the response, your data is basically locked away This experience reinforced a powerful debugging habit for me: 💡 Always verify your data at the very first step Now, I make it a rule to log the raw response before touching state management. It’s a simple step ,but it can save hours of frustration. Whether you're using Vite, React, or even vanilla JavaScript, the fundamentals of REST APIs stay the same. Sometimes the most “advanced” problems… have the most “basic” solutions. And honestly, once you find the issue , you just laugh and move on 😄 💬 What’s a simple or “silly” bug that taught you a big lesson? #WebDevelopment #MERN #JavaScript #100DaysOfCode #LahoreDevs

I found a hidden React performance issue… without using any profiler. It was caused by something most developers ignore: 👉 “Referential equality” Here’s the problem 👇 I had a component like this: const items = [{ id: 1 }, { id: 2 }]; return <List data={items} />; Looks harmless. But on every render, a NEW array is created ❌ Even if the data is the same. So React sees: old !== new → re-render Now imagine this passed into: - memoized components - useEffect dependencies - expensive lists 🚨 Everything re-runs unnecessarily --- 👉 Real fix: const items = useMemo(() => [{ id: 1 }, { id: 2 }], []); return <List data={items} />; Now: Same reference → no unnecessary re-renders ✅ --- 💡 Where this secretly breaks apps: 1️⃣ React.memo doesn’t work as expected 2️⃣ useEffect runs again and again 3️⃣ Large lists become slow --- ⚠️ The insight most people miss: React doesn’t compare values deeply It compares references (===) Even identical objects/arrays are “different” if recreated --- 🎯 My takeaway: Performance isn’t just about “big code” It’s about small invisible patterns Once you understand this, you start writing React very differently. --- Next time your optimization “doesn’t work” Check references… not logic. --- Have you ever debugged something like this? #ReactJS #JavaScript #FrontendDevelopment #WebPerformance #ReactPerformance #SoftwareEngineering #FullStackDeveloper #CleanCode #Frontend #WebDevelopment #CodingTips #Developers #Programming #TechLearning #LearnInPublic

JavaScript is easy. Until it isn't. 😅 Every developer has been there. You're confident. Your code looks clean. You hit run. And then: " Cannot read properties of undefined (reading 'map') " The classic JavaScript wall. Here are 7 JavaScript mistakes I see developers make constantly and how to fix them: 1. Not understanding async/await ⚡ → Wrong: | const data = fetch('https://lnkd.in/dMDBzbsK'); console.log(data); // Promise {pending} | → Right: | const data = await fetch('https://lnkd.in/dMDBzbsK'); | 2. Using var instead of let/const → var is function scoped and causes weird bugs → Always use const by default. let when you need to reassign. Never var. 3. == instead of === → 0 == "0" is true in JavaScript 😱 → Always use === for comparisons. Always. 4. Mutating state directly in React → Wrong: user.name = "Shoaib" → Right: setUser({...user, name: "Shoaib"}) 5. Forgetting to handle errors in async functions → Always wrap await calls in try/catch → Silent failures are the hardest bugs to track down 6. Not cleaning up useEffect in React → Memory leaks are real → Always return a cleanup function when subscribing to events 7. Treating arrays and objects as primitives → [] === [] is false in JavaScript → Reference types don't compare like numbers — learn this early JavaScript rewards the developers who understand its quirks. 💡 Which of these caught YOU off guard when you first learned it? 👇 #JavaScript #WebDevelopment #Frontend #FullStackDeveloper #React #Programming #CodingTips #Developer #Tech #Pakistan #LearnToCode #JS #SoftwareEngineering #100DaysOfCode #PakistaniDeveloper