React's Virtual DOM: Efficient UI Updates with Smart Diffing

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

I recently revisited the React countdown timer. It reminded me of a mistake many of us have made at least once. Two common problems with timers in React - Memory leaks - Stale state caused by JavaScript closures The closure problem: When we create setInterval, the callback captures variables at creation time. So setInterval(() => {     setRemainingMs(remainingMs - 1000) }, 1000) This looks okay, but it is incorrect. Because remainingMs inside a closuer is frozen. The interval keeps the old value even after React re-renders. So this leads to - Frozen timers - Skipped seconds - Incorrect UI state The correct fix: use functional state update:     setRemainingMs(prev => Max.max(prev-1000, 0)) Preventing Memory Leaks: If we create something in useEffect (intervals, listeners, subscriptions), we must clean it up: return () => clearInterval(interval) Otherwise, the timer keeps running even after the component unmounts. How I remember: - If state depends on previous state -> use functional updates - If I create side effects -> I must clean them up So, React did not break my timer; JavaScript closures did, React just made them visible. If this saved you from a future bug, it was worth sharing #React #JavaScript #Frontend #WebDevelopment #CleanCode #development #devnote

So you wanna build a responsive carousel in React - it's a game changer. Simple, really: you just need a few basics to get started. Node.js version 14.0 or higher, check. A package manager like npm, yarn, or pnpm, got it. A React project, preferably version 17 or higher, and some basic knowledge of React components - you know, the usual suspects. Oh, and familiarity with JavaScript or TypeScript doesn't hurt either. Now, let's talk installation - it's a breeze. Just use your preferred package manager to install React Responsive Carousel: npm install react-responsive-carousel, yarn add react-responsive-carousel, or pnpm add react-responsive-carousel. Easy peasy. After that, import the CSS file in your main entry file, and you're good to go. Creating a simple image carousel is a walk in the park - just import the Carousel component and use it in your JSX file. It's fast. React Responsive Carousel has some amazing features, like automatic responsiveness, navigation arrows, indicators, touch support, and legend support - all the bells and whistles. But here's the thing: you can customize your carousel to fit your needs. Use props like showArrows, showIndicators, and autoPlay to make it your own. It's like building with Legos - the possibilities are endless. For more info, check out the official repository: https://lnkd.in/gV2JfYru Source: https://lnkd.in/ge4Zrn6M #React #ResponsiveCarousel #JavaScript

🤯 Do you want a pro React tip? I started naming my useEffect functions, and its beautiful 👇 React code is full of hooks noise like useState, useEffect, useRef, and useMemo everywhere. It's hard to quickly scan a file and understand what's actually happening because the lifecycle stuff dominates everything. I started using named functions instead of arrow functions for my effects, and it made a massive difference. Here's why: 1️⃣ Cuts through the noise — When you have multiple useEffects in a component, descriptive names like synchronizeMapZoomLevel or fetchUserData let you scan the file and immediately understand the flow without reading implementation details. 2️⃣ Stack traces — If something breaks, the function name shows up in the error stack. Way easier to debug than an anonymous function at line 47. 3️⃣ Forces single responsibility — When you try to name an effect and struggle? That's usually because it's trying to do too many things. It naturally pushes you to split things up or remove them altogether (You might not need an effect) Some people prefer to extract everything into custom hooks immediately, which is great too. But this works really well for simpler cases where a full hook feels like overkill. Have you tried this? Or do you go straight to custom hooks for everything? #React #JavaScript #WebDev #CleanCode

⚛️ When NOT to Use React Hooks React Hooks are powerful, but using them everywhere is not always the best choice. While building and refactoring components, I learned that knowing when not to use a hook is just as important as knowing how to use one. Here are some real cases where I avoid hooks: ❌ Don’t use useEffect for derived data If a value can be calculated from props or state, it doesn’t belong in useEffect. ❌ Don’t use useState for static values Constants and fixed values don’t need a state. ❌ Don’t use useMemo or useCallback prematurely Optimization hooks should solve real performance issues—not be added by default. ❌ Don’t use useRef to control UI Refs are for storing mutable values, not for triggering re-renders. ❌ Don’t add hooks just because you can Cleaner logic always beats more hooks. ✨ Key lesson: Good React code is not about using more hooks — it’s about writing simpler, more predictable components. How do you decide when a hook is really needed? #React #ReactHooks #WebDevelopment #JavaScript #Frontend #CleanCode #LearningJourney

What is useReducer Hook in React.js? useReducer is a React Hook used to manage complex state logic in a more predictable and structured way. Instead of directly updating state, you dispatch actions that describe what happened. A reducer function then decides how the state should change based on those actions. How it works (in simple terms) 1️⃣ Action – Describes an event (e.g., "ADD_ITEM") 2️⃣ Dispatch – Sends the action 3️⃣ Reducer – Determines the next state 4️⃣ State – Updated state re-renders the UI ➡️ Action → Dispatch → Reducer → New State Basic Syntax const [state, dispatch] = useReducer(reducer, initialState); Why use useReducer? ✅ Better for complex or related state ✅ Makes state updates predictable ✅ Centralizes logic in one place ✅ Easier to debug and maintain #ReactJS #useReducer #FrontendDevelopment #WebDevelopment #JavaScript #ReactHooks

React State Is a Snapshot — Not a Variable (A Concept Every React Dev Should Know) One of the most misunderstood concepts in React is that state is a snapshot in time, not a mutable variable. When React renders a component, it gives you a snapshot of: props state event handlers That snapshot is fixed for that render. setCount(count + 1); setCount(count + 1); setCount(count + 1); You might expect count to increase by 3 — but it doesn’t. Why? Because all three updates read the same snapshot of count. The Correct Mental Model State updates are queued React re-renders later with a new snapshot Code inside the same render never sees updated state The Fix: Functional Updates setCount(prev => prev + 1); setCount(prev => prev + 1); setCount(prev => prev + 1); Now React applies each update to the latest value, not the old snapshot. Why This Matters Understanding state as a snapshot helps you: Avoid stale state bugs Write predictable event handlers Fix issues with async logic, debouncing, and batching Reason better about concurrent rendering in React 18+ Key Takeaway State doesn’t change inside a render. React gives you a snapshot — and the next render gives you a new one. Once this clicks, many “weird” React bugs suddenly make sense. #ReactJS #Frontend #JavaScript #WebDevelopment #ReactHooks #React18

🚨 Why key Is So Important in React Lists (Not Just a Warning!) Most developers know what keys are… but very few understand why they actually matter 👀 🧠 What React Really Does Behind the Scenes When a list changes, React tries to be smart and fast. Instead of re-rendering everything, it: 👉 Compares old list vs new list 👉 Updates only what changed This process is called reconciliation. ❌ Problem: No Key (or Wrong Key) items.map(item => <Item />) React gets confused: Which item moved? Which one was removed? Which one stayed the same? Result ❌ 👉 Wrong UI updates 👉 Input values jump 👉 Animations break 👉 Bugs that are hard to debug Solution: Unique key items.map(item => ( <Item key={item.id} /> )) 🎯 Why keys matter ✔ Helps React identify each item uniquely ✔ Tracks items even when order changes ✔ Updates only the correct component ✔ Prevents unexpected UI behavior 🚫Why index as key is risky items.map((item, index) => ( <Item key={index} /> )) If you: Add items Remove items Reorder items React may reuse the wrong component 😬 📌 Index keys are okay only for static lists that never change. 🧩 Simple analogy Think of keys like Aadhar numbers 🪪 Names can repeat, positions can change — but the ID always stays the same. 🧠 One-line takeaway 👉 Keys help React track items correctly and prevent wrong UI updates. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactTips #CleanCode #DevHackMondays #TechSimplified

⚛️ React 19 lets you delete useEffect for DOM logic. 👇 👇 For years, integrating third-party DOM libraries (like GSAP, ResizeObserver, or vanilla JS animations) required a specific dance: 1. Create a useRef. 2. Create a useEffect. 3. Check if (ref.current). 4. Return a cleanup function. It separated the "Element" from the "Logic" that controlled it. React 19 introduces Ref Callback Cleanup. ❌ The Old Way: You had to synchronize a mutable ref with an effect. It was verbose and prone to "stale closure" bugs if you forgot dependencies. ✅ The Modern Way: Pass a function to the ref prop. React runs this function when the node mounts. If you return a function, React will automatically run it when the node unmounts. Why this is cleaner: 📉 Less Code: Logic is co-located with the element it affects. 🧠 No Hooks: You don't need useRef or useEffect for simple DOM integrations. ⚡ Safe: Handles node mounting/unmounting lifecycles perfectly. Note: This is perfect for things like ResizeObserver, IntersectionObserver, or auto-focus logic. #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactHooks #Hooks #ReactTips #FrontrendDeveloper #DevloperTips

Why setState(prev => …) Exists (And When You MUST Use It) ⚛️ Ever written this and expected +2? setCount(count + 1); setCount(count + 1); But React gave you +1 😵💫 React isn’t broken. Your mental model is. What’s actually happening 👇 Remember this rule: Each render sees its own snapshot of state 📸 In that render: count has one fixed value Both updates read from the same snapshot So React sees: setCount(0 + 1); setCount(0 + 1); ➡️ Result: 1, not 2 Why the functional updater exists 🧠 Now look at this: setCount(prev => prev + 1); setCount(prev => prev + 1); This time, React does this internally: First update → prev = 0 → 1 Second update → prev = 1 → 2 Why? Because the updater function: Runs after React processes the queue Always receives the latest state, not a stale snapshot When you MUST use prev => … ✅ Use the functional updater whenever: The next state depends on the previous state You’re doing multiple updates in a row Updates happen inside async code (setTimeout, promises, events) 💡 The real takeaway setState(value) says: “Set state to this value” setState(prev => next) says: “Calculate the next state from the latest reality” If React state feels confusing, it’s usually because you’re thinking in variables — not renders. 💬 Question for you: When did this bug first bite you? #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #SoftwareEngineering #CodingBlockHisar