React State is Not a Variable, It's a Snapshot per Render

Two JavaScript operators that quietly save you from runtime crashes: ?. — Optional Chaining ?? — Nullish Coalescing Before: const city = user.address.city; // 💥 Crashes if user or address is null After: const city = user?.address?.city ?? 'Unknown'; // ✅ Safe. Always. What each one does: ?. → Stops evaluation and returns undefined if anything in the chain is null/undefined. No crash, no if-checks needed. ?? → Returns the right-hand value ONLY when the left is null or undefined. Unlike ||, it won't replace 0, false, or '' — which are valid values. Combined, they make your data-fetching code 10x more resilient. One line. Zero crashes. Ship it. #JavaScript #WebDevelopment #Frontend #CodingTips #CleanCode

🚀 Crack the Code: The React Lifecycle (Core Level) Ever wondered how React actually manages the life of a component? Whether you’re prepping for a Senior Dev interview or just trying to squash that persistent memory leak, mastering the Lifecycle Phases is your secret weapon. 🛠️ React components are like living organisms: they are born, they grow, and they eventually pass away. 1️⃣ The Birth: Mounting Phase This is where it all begins. React initializes state and builds the initial Virtual DOM. The Hook: useEffect(() => { ... }, []) Pro Tip: Use this phase for initial API calls or setting up subscriptions. If you leave the dependency array empty, it runs exactly once—like a birth certificate! 2️⃣ The Growth: Updating Phase Whenever props or state change, React springs into action. This is where the magic of Diffing happens—React compares the old Virtual DOM with the new one to update only what’s necessary. The Hook: useEffect(() => { ... }, [dependency]) Pro Tip: Always be intentional with your dependency array. Missing a dependency can lead to stale data; adding too many can cause infinite loops! 🔄 3️⃣ The End: Unmounting Phase The most ignored phase, but arguably the most critical for performance. 🧹 The Hook: The Cleanup Function inside useEffect. Why it matters: If you don't clear your setInterval or unsubscribe from a socket here, you’re inviting memory leaks to crash your party. 💡 The "Core Level" Secret: Render vs. Commit To keep your apps buttery smooth, React splits work into two internal phases: Render Phase: Pure calculation. React figures out what changed. It can pause or restart this work if a higher-priority task comes in. Commit Phase: This is where React actually touches the Real DOM. It’s fast, synchronous, and happens in one go. 🧠 The Mental Model Shift In modern React, stop thinking about "methods" and start thinking about Synchronization. useEffect isn't just a lifecycle hook—it’s a tool to synchronize your component with an external system (the API, the DOM, or a Window event). Are you building for performance or just for functionality? Let's discuss in the comments! 👇 #ReactJS #WebDevelopment #FrontendEngineers #CodingTips #JavaScript #SoftwareArchitecture

🔥 Stale Closure in React — A Common Bug You Must Know Ever faced a situation where your state is not updating correctly inside setTimeout / setInterval / useEffect? 🤯 👉 That’s called a Stale Closure --- 💡 What is happening? A function captures the old value of state and keeps using it even after updates. --- ❌ Example (Buggy Code): import { useState, useEffect } from "react"; function Counter() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); // ❌ Always logs 0 (stale value) }, 1000); }, []); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } 👉 Why? Because the closure captured "count = 0" when the effect first ran. --- ✅ Fix (Correct Approach): useEffect(() => { const id = setInterval(() => { setCount(prev => prev + 1); // ✅ always latest value }, 1000); return () => clearInterval(id); }, []); --- 🎯 Key Takeaway: Closures + async code (setTimeout, setInterval, event listeners) = ⚠️ potential stale state bugs --- 💬 Interview One-liner: “Stale closure happens when a function uses outdated state due to how closures capture variables.” --- 🚀 Mastering this concept = fewer bugs + stronger React fundamentals #ReactJS #JavaScript #Frontend #InterviewPrep #Closures #WebDevelopment

Your component unmounted. But your timer didn't. This is one of the most common memory leaks in React — and it leaves zero errors in the console. Here's what's happening: 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗰𝗹𝗲𝗮𝗻𝘂𝗽: useEffect(() => {  const id = setInterval(() => {   console.log('still running...');   setData(fetch()); // setting state on unmounted component  }, 1000); }, []); User navigates away. Component unmounts. But the interval is still alive in memory. Still firing. Still trying to update state that no longer exists. React will warn you: "Can't perform a React state update on an unmounted component" But by then — the leak already happened. 𝗪𝗶𝘁𝗵 𝗰𝗹𝗲𝗮𝗻𝘂𝗽: useEffect(() => {  const id = setInterval(() => {   console.log('running...');  }, 1000);  return () => clearInterval(id); // 👈 this is the cleanup }, []); The function you return from useEffect runs in two situations: → Before the effect runs again (dependency changed) → When the component unmounts Think of it as a paired contract: You start something → you are responsible for stopping it. 𝗧𝗵𝗿𝗲𝗲 𝘁𝗵𝗶𝗻𝗴𝘀 𝘁𝗵𝗮𝘁 𝗮𝗹𝘄𝗮𝘆𝘀 𝗻𝗲𝗲𝗱 𝗰𝗹𝗲𝗮𝗻𝘂𝗽: → setInterval / setTimeout → Event listeners (window.addEventListener) → WebSocket or API subscriptions If you start it in useEffect — you clean it up in the return. No exceptions. Have you ever shipped a memory leak from a missing cleanup? 👇 #ReactJS #JavaScript #WebDevelopment #Frontend #useEffect #LearnInPublic #SoftwareEngineering #TypeScript #Programming

Nobody told me this when I started React. I learned props. I learned the state. I thought I understood both. I didn't. I was putting everything in state. User data. Config values. Things passed in from the parent. Didn't matter — if I needed it inside a component, it went into useState. It worked. Until it didn't. On a client project, I had a component receiving a userId from its parent. I was also storing that userId in local state. Then the parent updated. My local state didn't. Two different values. One component. Complete mess. The bug took me hours to find. The fix was deleting four lines of code. Here's what nobody told me: Props and state are not two ways to store data. They are two completely different things with two completely different jobs. Props are data that comes from outside. The parent owns it. The parent controls it. Your component just receives it and uses it. You don't store it. You don't copy it. You use it directly. State is data that lives inside. Your component owns it. Your component controls it. When it changes, the component re-renders. Nothing outside knows it exists unless you explicitly pass it down. One simple test I use now: Does this component own this data — or is it just receiving it from somewhere else? If it owns it → state. If it's receiving it → props. Use it directly. Never copy it into state. That one question has saved me from every props-vs-state bug I've ever faced. The bug I had on that client project? I was copying props into the state. The parent updated the prop. My state copy didn't follow. UI showed stale data. Classic mistake. Extremely common. Nobody warns you about it early enough. #React #JavaScript #Frontend #ReactJS #WebDevelopment #Programming #100DaysOfCode #SoftwareDevelopment

Day 6 — Find Second Largest Number in an Array (JavaScript) Problem Write a function to find the second largest number in an array. Example Input: [10, 5, 8, 20] Output: 10 Approach First find the largest number, then find the largest number smaller than it. Code function secondLargest(arr){ let largest = -Infinity let second = -Infinity for(let i = 0; i < arr.length; i++){ if(arr[i] > largest){ second = largest largest = arr[i] } else if(arr[i] > second && arr[i] !== largest){ second = arr[i] } } return second } console.log(secondLargest([10,5,8,20])) Alternative Approach function secondLargest(arr){ let sorted = [...new Set(arr)].sort((a,b) => b-a) return sorted[1] } What I Learned How to track two maximum values in a single loop. #javascript #frontenddeveloper #codingpractice #webdevelopment

🚀 Introducing one-global-state — A simpler way to manage global state in React. A small project to solve a common pain point I’ve faced (and I’m sure many of you have too) — global state management in React. We all know tools like Redux or reducer-based patterns are powerful… …but sometimes, they feel like overkill and add bloating for simple use cases 🤯 So I built something minimal, intuitive, and developer-friendly 👇 ✨ one-global-state A tiny utility library that: ✅ Feels just like useState ✅ Eliminates boilerplate ✅ Keeps things simple and predictable ✅ Is easier than most existing alternatives 💡 The idea was straightforward: “What if global state could be as simple as using useState?” No complex setup. No unnecessary abstractions. Just clean and easy state management. 📦 Already seeing traction with 264 weekly downloads 🙌 🔗 GitHub: https://lnkd.in/gjPrNeX4 🔗 NPM: https://lnkd.in/gu6QES8j I’d love to hear your thoughts, feedback, or ideas to improve this further 💬 If you’re tired of over-engineered state solutions, give it a try and let me know what you think! #react #javascript #webdevelopment #opensource #frontend #npm #devtools #buildinpublic

Spent hours chasing a bug that turned out to be a typo? We've all been there. My latest debugging saga involved a React component rendering incorrect data. The state was updating, but the UI wasn't reflecting the 𝐥𝐚𝐭𝐞𝐬𝐭 𝐯𝐚𝐥𝐮𝐞𝐬 immediately. 💡 I was pulling my hair out inspecting network requests and reducer logic. Turns out, the issue was a classic `useEffect` pitfall. My dependency array was missing a key variable, causing the effect to run with a 𝐬𝐭𝐚𝐥𝐞 𝐜𝐥𝐨𝐬𝐮𝐫𝐞. 🧠 A simple addition to `[dependency]` fixed hours of frustration. This reinforces how much 𝐜𝐨𝐧𝐭𝐞𝐱𝐭 𝐦𝐚𝐭𝐭𝐞𝐫𝐬 in component lifecycles. Always double-check your `useEffect` dependencies; they're often the silent culprits behind subtle React bugs. What's your go-to strategy when `useEffect` dependencies bite you? #ReactJS #FrontendDevelopment #DeveloperTips

🚀 5 React Mistakes I Made as a Beginner (And How to Fix Them) When I first started building with React, I made a lot of mistakes that slowed me down and introduced bugs I couldn't explain. Here are 5 of the most common ones — and how to fix them: ❌ #1 — Not cleaning up useEffect Forget to return a cleanup function? Hello, memory leaks. ✅ Always return a cleanup for timers, event listeners, and subscriptions. ❌ #2 — Using index as a key in lists This breaks React's reconciliation and causes weird UI bugs. ✅ Always use a unique ID from your data as the key prop. ❌ #3 — Calling setState directly inside render This creates an infinite re-render loop. ✅ Keep state updates inside event handlers or useEffect only. ❌ #4 — Fetching data without handling loading and error states Your UI breaks or shows nothing while data loads. ✅ Always manage three states: loading, error, and success. ❌ #5 — Putting everything in one giant component Hard to read, hard to debug, impossible to reuse. ✅ Break your UI into small, focused, reusable components. These mistakes cost me hours of debugging. I hope sharing them saves you that time. If you found this helpful, feel free to repost ♻️ — it might help another developer on their journey. 💬 Which of these mistakes have you made? Drop a comment below! #React #JavaScript #WebDevelopment #Frontend #MERNStack #ReactJS #100DaysOfCode #CodingTips #Developer

Ever notice your search bar firing an API call on every keystroke? Type “react” and that’s 5 requests. Type a sentence and your network tab cries. The fix is a tiny React hook called useDebounce. It waits until the user stops typing, then returns the final value. One render. One request. Done. No libraries. No dependencies. Drop it into any search input, filter, or autosave field. Snippet here: https://lnkd.in/gHDtaUtJ What React hook do you reach for in every project? #ReactJS #JavaScript #WebDevelopment #ReactHooks #FrontendDevelopment