Optimize Frontend Performance with Debounce and Throttle Techniques

I wrote the same component 3 times before I realised I only needed to write it once. Days 43–45/100 — 3 days deep into React, and the foundations are finally locking in. Here's everything that clicked this week: 🔹 Fragments — the invisible wrapper React needs a single parent element. But wrapping everything in a <div> pollutes your DOM. <> </> groups your JSX with zero DOM footprint. Clean markup. No ghost divs. No unexpected CSS side effects. 🔹 Map method — lists without the pain In vanilla JS, rendering a list meant loops + manual DOM updates. In React — one .map() call and every item in your array becomes a component. Dynamic. Clean. Automatic. 🔹 Conditional Rendering — 3 tools, 1 goal Making React show the right thing at the right time: • if-else — for complex logic outside JSX • Ternary — clean inline decisions inside JSX • Logical && — show something only when a condition is true Your UI should respond to data — not just display it. 🔹 Passing data via Props Props are how components talk to each other. Parent has data → passes it down → child receives and uses it. Without props, every component is an island. With props, they become a system. 🔹 Destructuring Props Instead of props.name, props.age, props.email everywhere — const { name, age, email } = props. Cleaner. Less repetitive. Readable at a glance. The biggest realisation from these 3 days? A component isn't a fixed UI block. It's a template. Props are the variables. Conditions are the logic. Map is the engine. That's the foundation of almost every React app in production. Day 45 done. 55 to go. 🚀 #100DaysOfCode #ReactJS #MERNStack #WebDevelopment #LearningInPublic #JavaScript #BuildInPublic

Building loading states shouldn’t feel like copy-paste work. Every React project ends up with the same repetitive loading UI code — divs, shimmer effects, duplicated layouts… again and again. So I built something to fix that. react-auto-skeletonizer An npm package that automatically generates skeleton loaders for your React components. No more manually crafting loading states. Just plug it in and let it handle the boring part. What it does: - Generates skeleton UI based on your components - Saves time and reduces repetitive code - Improves user experience with clean loading states Try it out: https://lnkd.in/gAjmubgD Would love to know what you think — feedback, ideas, or improvements are all welcome 🙌 #React #Frontend #JavaScript #OpenSource #npm #WebDevelopment

🚀 Day 11/30 – useRef Hook (Deep Dive) Today I learned one of the most underrated React Hooks ⚡ 👉 useRef Today I learned: ✅ useRef stores a mutable value that persists across renders ✅ Updating useRef does NOT trigger re-render ✅ Mostly used for DOM access & storing values 💻 Example: import { useRef } from "react"; function InputFocus() { const inputRef = useRef(); const focusInput = () => { inputRef.current.focus(); }; return ( <> Focus </> ); } 🔥 What actually happens behind the scenes: 1️⃣ Component renders → ref object is created 2️⃣ React attaches it to DOM → inputRef.current 3️⃣ Value stays same across renders 👉 No re-render happens when ref changes 💡 useRef vs useState (Important Difference): useState → triggers re-render 🔁 useRef → does NOT trigger re-render ⚡ 💡 Real Use Cases: Focus input fields Store previous values Access DOM elements Avoid unnecessary re-renders ⚡ Advanced Insight: useRef is like a “box” that React does NOT track for rendering. 🔥 Key Takeaway: useRef is not for UI updates — it’s for storing values & accessing DOM without re-render. Are you using useRef or still confused? 👇 #React #useRef #Hooks #FrontendDevelopment #JavaScript #LearnInPublic #CodingJourney

⚛️ 𝗣𝗿𝗲𝘃𝗲𝗻𝘁𝗶𝗻𝗴 𝗨𝗻𝗻𝗲𝗰𝗲𝘀𝘀𝗮𝗿𝘆 𝗥𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗨𝘀𝗲 𝗼𝗳 𝗺𝗲𝗺𝗼 & 𝘂𝘀𝗲𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 In React applications, performance issues often come from repeated re-renders rather than heavy logic. This becomes more noticeable when passing functions as props. 𝗖𝗼𝗺𝗺𝗼𝗻 𝗘𝘅𝗮𝗺𝗽𝗹𝗲 <ChildComponent onClick={() => handleClick(id)} /> A new function is created on every render, causing child components to re-render. 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗙𝗶𝘅 Use useCallback: const handleItemClick = useCallback((id) => { handleClick(id) }, []) Then: <ChildComponent onClick={handleItemClick} /> 𝗖𝗼𝗺𝗯𝗶𝗻𝗲 𝘄𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 export default React.memo(ChildComponent) Now child re-renders only when props actually change. 𝗪𝗵𝗲𝗻 𝗧𝗵𝗶𝘀 𝗛𝗲𝗹𝗽𝘀 𝗠𝗼𝘀𝘁 • Large lists • Dashboard UI • Reusable components • Expensive child rendering • Deep component trees 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗡𝗼𝘁𝗲 Avoid over-optimizing: • Use memo only where needed • Measure before optimizing • Keep code readable Small memoization changes can improve UI responsiveness significantly. 💬 Curious — Do you use memoization by default, or only after noticing performance issues? #ReactJS #Frontend #Performance #JavaScript #WebDevelopment #SoftwareEngineering #DevCommunity

Your component is re-rendered... Then what? Most developers stop thinking here. And that’s where the real magic starts. This is Post 3 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. React does NOT update the DOM immediately. Because touching the DOM is expensive. Instead, it follows a 3-step process: Render → Diff → Commit First, React creates something called a 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠. Not the real DOM. Just a JavaScript object in memory. A blueprint of your UI. Every time your component runs, React builds a new tree of this Virtual DOM. And it already has the previous tree stored. Now comes the interesting part. React compares: Old tree vs New tree This step is called 𝗗𝗶𝗳𝗳𝗶𝗻𝗴. It finds exactly what changed. Not everything. Just the difference. Then comes the final step: 𝗖𝗼𝗺𝗺𝗶𝘁 phase React takes only those changes… …and updates the real browser DOM So no, React is NOT re-rendering your whole page. It’s doing surgical updates. The key insight: React separates thinking from doing. Thinking = Render + Diff Doing = Commit That’s why React is fast. Because touching the DOM is expensive. So React minimizes it. Flow looks like this: ✅️ Component runs ✅️ Virtual DOM created ✅️ Changes calculated ✅️ DOM updated ✅️ Browser paints UI Once you see this, you stop fearing re-renders. And start understanding them. In Post 4 of React Under the Hood: How does React actually compare trees? (The diffing algorithm 👀) Follow Farhaan Shaikh if you want to understand react more deeply. 👉 Read in detail here: https://lnkd.in/dTYAbM6n #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

https://lnkd.in/d4ZvdajQ — Most people overcomplicate tipping logic, but as a Senior Frontend Engineer, I see it as a masterclass in edge-case handling. 🚀 Building this with TypeScript and Next.js 15 reminded me that even 'simple' tools deserve a robust architectural foundation. 💻 I remember being at a group dinner where 8 people spent five minutes arguing over who owed what. It was awkward and honestly, a solved problem. 🍽️ I built this Tip Calculator to end that friction. Here is a mini-dive into the logic behind it: 1. Input Sanitization: We use controlled components to ensure users don't break the math with non-numeric characters. ⚙️ 2. Real-time Precision: I leveraged Tailwind CSS and shadcn/ui to build a UI that updates as you type, providing instant visual feedback. 3. The Math: Handling floating-point math in JavaScript is notoriously tricky. I implemented rounding strategies to ensure the total is accurate to the cent. 4. Performance: I ran the calculation logic through Vitest using Bun to ensure that edge cases—like zero splitters—don't crash the site. 🧪 5. Workflow: Using Cursor helped me refactor the state management logic for the percentage sliders in record time. 🛠️ It’s not just about the numbers; it’s about making sure the user never has to think twice when the bill arrives. 📈 Everything is optimized for speed because no one wants to wait for a tip calculation to load. ✨ Building tools like this is a great way to keep my fundamental skills sharp while providing real utility. 💡 How do you handle decimal precision and rounding in your own frontend projects? 💬 #TipCalculator #FrontendEngineer #TypeScript #ReactJS #Nextjs #TailwindCSS #WebDev #SoftwareEngineering #Coding #JavaScript #UIUX #CleanCode #DeveloperLife #ProductivityTools #Calculators

The only right way to merge Tailwind classes in ⚛️React. 👇 If you have ever built a reusable UI component with Tailwind, you have definitely run into this bug: You set a default class like px-4. Later, you use the component and try to override it by passing px-8 as a prop. You inspect the DOM, and both classes are there: class="px-4 px-8". But the padding hasn't changed. Why? Because Tailwind classes do not override based on the order they appear in your HTML. They override based on their order in the generated CSS stylesheet. The modern standard is the cn() utility function. ❌ The Legacy Way (String Concatenation): Using ${className} blindly adds classes without checking for conflicts. Ternary operators make your class strings incredibly hard to read. High risk of CSS cascade bugs. ✅ The Modern Way (clsx + tailwind-merge): A tiny utility function that intelligently merges Tailwind classes. • Conflict Resolution: If you pass px-8, it explicitly removes px-4 from the final string so the browser never gets confused. • Clean Conditionals: No more messy ternaries. Just use isActive && 'bg-blue'. • The Industry Standard: This is the exact architecture powering massive modern component libraries like shadcn/ui. The Shift: We are moving away from unpredictable string concatenation and using intelligent class merging to build bulletproof UI components. Learn how to solve Tailwind CSS class conflicts in React components using the cn utility. Discover how combining clsx and tailwind-merge prevents CSS cascade bugs, allowing you to safely override default padding, margins, and colors dynamically. #TailwindCSS #ReactJS #NextJS #WebDevelopment #Frontend #CSS #JavaScript #CleanCode #SoftwareEngineering #TechTips #TailwindTips #FrontendTips #FrontendDeveloper #DeveloperTips

The only right way to merge Tailwind classes in ⚛️React. 👇 If you have ever built a reusable UI component with Tailwind, you have definitely run into this bug: You set a default class like px-4. Later, you use the component and try to override it by passing px-8 as a prop. You inspect the DOM, and both classes are there: class="px-4 px-8". But the padding hasn't changed. Why? Because Tailwind classes do not override based on the order they appear in your HTML. They override based on their order in the generated CSS stylesheet. The modern standard is the cn() utility function. ❌ The Legacy Way (String Concatenation): Using ${className} blindly adds classes without checking for conflicts. Ternary operators make your class strings incredibly hard to read. High risk of CSS cascade bugs. ✅ The Modern Way (clsx + tailwind-merge): A tiny utility function that intelligently merges Tailwind classes. • Conflict Resolution: If you pass px-8, it explicitly removes px-4 from the final string so the browser never gets confused. • Clean Conditionals: No more messy ternaries. Just use isActive && 'bg-blue'. • The Industry Standard: This is the exact architecture powering massive modern component libraries like shadcn/ui. The Shift: We are moving away from unpredictable string concatenation and using intelligent class merging to build bulletproof UI components. Learn how to solve Tailwind CSS class conflicts in React components using the cn utility. Discover how combining clsx and tailwind-merge prevents CSS cascade bugs, allowing you to safely override default padding, margins, and colors dynamically. #TailwindCSS #ReactJS #NextJS #WebDevelopment #Frontend #CSS #JavaScript #CleanCode #SoftwareEngineering #TechTips #TailwindTips #FrontendTips #FrontendDeveloper #DeveloperTips

🚀 𝗜𝗻𝘁𝗿𝗼𝗱𝘂𝗰𝗶𝗻𝗴 𝗥𝗲𝗰𝘁𝗶𝗳𝘆 — 𝗮 𝗹𝗶𝗴𝗵𝘁𝘄𝗲𝗶𝗴𝗵𝘁 𝗥𝗲𝗮𝗰𝘁-𝗹𝗶𝗸𝗲 𝗨𝗜 𝗹𝗶𝗯𝗿𝗮𝗿𝘆 𝗯𝘂𝗶𝗹𝘁 𝗳𝗿𝗼𝗺 𝘀𝗰𝗿𝗮𝘁𝗰𝗵 After diving deep into how modern UI frameworks work under the hood, I set out to build one myself. The result is Rectify — a lightweight, React-inspired library with zero React dependencies. 🧠 𝗪𝗵𝗮𝘁’𝘀 𝗶𝗻𝘀𝗶𝗱𝗲  • ⚙️ Fiber reconciler & concurrent rendering — implemented from the ground up  • 🎣 Complete Hooks API — useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer, useId, and more  • 🧩 Class components with full lifecycle support  • 🚀 Advanced features — memo(), lazy(), and <Suspense>  • 🌐 Context API  • 🧭 Built-in router — BrowserRouter, HashRouter, nested routing support  • 🛠️ Tooling integration — Vite plugin + Babel transform  • ⚡ CLI scaffold — spin up a project in seconds All of this comes in at ~𝟭𝟬 𝗞𝗕 𝗴𝘇𝗶𝗽𝗽𝗲𝗱. 🎯 𝗪𝗵𝘆 𝗥𝗲𝗰𝘁𝗶𝗳𝘆? Rectify isn’t trying to replace React Instead, it’s a deep exploration into the mechanics behind modern UI frameworks:  • How does a fiber reconciler actually work?  • How do hooks persist state across renders?  • What does concurrent rendering really mean in practice? If you’ve ever been curious about these internals, the source code is fully open and designed to be read. ⚡ 𝗚𝗲𝘁 𝘀𝘁𝗮𝗿𝘁𝗲𝗱 pnpm create @rectify-dev/rectify-app my-app 📦 Explore  • npm: @rectify-dev/core  • npm: @rectify-dev/router  • Docs: https://lnkd.in/g9j5qDYV Would love to hear your feedback if you give it a try 🙌 #OpenSource #JavaScript #TypeScript #WebDevelopment #Frontend #React #UIFramework