Debounce vs Throttle in Scroll Tracking

I thought useRef was only for accessing DOM… 😅 But I was wrong. 💡 For a long time, I used useRef like this: const inputRef = useRef(); 👉 Focus input, access DOM — that’s it. ⚠️ Then I faced a problem: I needed to store a value 👉 without causing re-render Using useState was triggering re-renders ❌ 💡 Then I discovered: useRef can store mutable values 👉 without re-rendering the component 🧠 Example: const countRef = useRef(0); countRef.current++; 👉 Value updates 👉 But component doesn’t re-render ✅ Result: • Better performance • No unnecessary re-renders • More control over values 🔥 What I learned: useRef is not just for DOM 👉 it’s for persisting values across renders #ReactJS #FrontendDeveloper #JavaScript #ReactInterview #CodingTips #WebDevelopment

useEffect — The Hook That Confused Me (Until I Got This) useEffect was confusing until I understood one thing: dependencies control everything. The Rule: javascript // Runs ONCE after mount useEffect(() => { fetchData(); }, []); // Runs when userId changes useEffect(() => { fetchUser(userId); }, [userId]); // Runs on EVERY render (avoid!) useEffect(() => { console.log('render'); }); What I Learned the Hard Way: Missing dependencies = stale data Adding everything = infinite loops Cleanup functions matter (especially for subscriptions) My Checklist: What should trigger this effect? Do I need to clean up? Can this cause unnecessary renders? What's your React Hook survival tip? #ReactJS #JavaScript #FrontendDeveloper #WebDev #CodingTi

💡 𝗟𝗲𝗮𝗿𝗻𝗲𝗱 𝗦𝗼𝗺𝗲𝘁𝗵𝗶𝗻𝗴 𝗡𝗲𝘄: 𝗣𝗼𝗹𝗹𝗶𝗻𝗴 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗜 𝗿𝗲𝗰𝗲𝗻𝘁𝗹𝘆 𝗰𝗮𝗺𝗲 𝗮𝗰𝗿𝗼𝘀𝘀 𝗽𝗼𝗹𝗹𝗶𝗻𝗴 while working on a feature, something I hadn’t used before. At its core, 𝗽𝗼𝗹𝗹𝗶𝗻𝗴 is simple: 👉 Re-fetch data at regular intervals to keep the UI updated. But what I found interesting is how you use it: • Poll continuously ⏱️ • OR poll 𝗼𝗻𝗹𝘆 𝘄𝗵𝗲𝗻 𝗻𝗲𝗲𝗱𝗲𝗱 (smarter + more efficient) I explored both approaches and added examples in the image below. 👇 ⚡ 𝗞𝗲𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Use polling thoughtfully to balance real-time updates with performance. Still exploring when to use polling vs WebSockets for real-time systems. 𝗔𝗹𝘄𝗮𝘆𝘀 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 🚀 #React #FrontendDevelopment #JavaScript #WebDevelopment #Learning #Performance

Your useEffect is firing 6 times. It's probably not what's in the dependency array. I had [options] in mine. One dependency. Looked fine. The effect ran on every single render anyway — hammering my API with duplicate calls I couldn't explain. The problem wasn't the value. It was the reference. options was an object getting recreated fresh on every render, so React saw a "new" dependency every time — even when the actual data hadn't changed. React doesn't deep-compare objects in the dep array. It checks identity. Fix was wrapping options in useMemo. Two lines. Effect ran once. Done. But honestly, the bigger shift was realising I'd been thinking about dependencies wrong. It's not just what is in the array — it's whether the things in the array are actually stable between renders. If your effect fires more than it should, check the stability of your deps, not just the list. What kills you about useEffect? Curious if this one's common. #react #javascript #reacthooks #frontenddevelopment #webdev

Debouncing vs Throttling — simple but powerful ⚡ I used to mix these up a lot. Here’s the easiest way to think about it: Debounce → waits until you stop Example: typing in a search bar → API call fires after you finish typing Throttle → runs at a fixed interval Example: scrolling → function runs every few ms, not constantly 👉 Debounce = fewer calls, better for inputs 👉 Throttle = smoother UI, better for continuous actions Small concept, but it makes a big difference in performance. #Frontend #JavaScript #WebPerformance

Mistake #1: I used useEffect for almost everything. Fetching data, syncing props to state, deriving values, even handling basic logic. At one point, my components had more useEffect than actual UI. Things worked… but they were fragile. Small changes broke unexpected parts. The realisation came later: useEffect is meant for side effects, not general logic. If you’re calculating something from props or state, you probably don’t need an effect at all. Once I reduced unnecessary useEffect usage, my components became predictable and easier to debug. Follow for Day 2. Repost if you’ve ever been stuck debugging useEffect. #reactjs #frontend #javascript #webdevelopment #cleanCode #softwareengineering

🎨 I got tired of recoloring SVGs one at a time. You know that thing where you need 30 icons in a new brand color and you're sitting there doing find-and-replace on hex codes file by file? I kept doing that for way too long before I thought, okay, I should just automate this. So I built SVG Batch Recolor Tool. Here's how it works: 📋 Paste a bunch of SVG URLs 🎯 Pick a hex color ⚡ Hit recolor — all fills, strokes, and inline styles update instantly 👀 Live preview grid so you see what you're getting 📦 Download individually or grab everything as a ZIP It fetches the SVGs server-side (because CORS will ruin your afternoon otherwise), does the recoloring client-side with regex, and bundles the output with jszip. 🛠 Built with: Next.js 15 · React 19 · Tailwind v4 Honestly it's a simple tool. I just couldn't find one that worked the way I wanted, so here we are. The whole thing is open source 👇 🔗 Link: https://lnkd.in/gK-QQwi7 ♻️ Repost if this could save someone's afternoon. #webdev #nextjs #react #opensource #svg #developertools #frontend #javascript #typescript

🚀 Debounce vs Throttle in React (and when to use each) Handling user interactions efficiently is key to building performant applications — especially when dealing with frequent events like typing and scrolling. Here’s a simple breakdown: 🔹 Debounce • Delays execution until the user stops triggering the event • Best for: search inputs, API calls on typing 🔹 Throttle • Limits execution to once every fixed interval • Best for: scroll events, resize handlers ⚠️ Without control, frequent events can lead to: • Too many API calls • UI lag • Performance issues 📈 Results: • Reduced unnecessary API requests • Improved UI responsiveness • Better user experience 💡 Key takeaway: Use debounce when you want the final action, use throttle when you want continuous control. What scenarios have you used debounce or throttle in? #React #Frontend #WebDevelopment #Performance #JavaScript #NextJS

Scroll events giving you headaches? 😩 There's a better way. The Intersection Observer API lets you detect when elements enter the viewport — no scroll listeners, no layout thrashing, just clean and efficient JS. ⚡ I just published a full breakdown with real code examples, tips, and common mistakes to avoid. 🔧 Read it now 👉 hamidrazadev.com #javascript #webdev #frontend #learntocode #100daysofcode

🚀 Day 14 – setTimeout Gotcha Think setTimeout runs exactly after the delay? Not quite. 😏 Here’s a classic trap 👇 for (var i = 1; i <= 3; i++) { setTimeout(() => { console.log(i); }, 1000); } 👉 What do you expect? 1 2 3 ❌ 👉 What you get: 4 4 4 😲 💥 Why this happens var is function scoped, not block scoped By the time setTimeout executes, the loop is already done i becomes 4, so all callbacks log the same value ✅ Fix #1: Use let for (let i = 1; i <= 3; i++) { setTimeout(() => { console.log(i); }, 1000); } ✔️ Output: 1 2 3 ✅ Fix #2: Use Closure for (var i = 1; i <= 3; i++) { ((j) => { setTimeout(() => { console.log(j); }, 1000); })(i); } ✔️ Output: 1 2 3 🧠 Pro Insight (Angular Devs 👇) This matters a LOT when dealing with: async API calls loops with delayed UI updates timers inside components Using let or closures prevents unexpected UI bugs 🐛 ⚡ Takeaway 👉 setTimeout doesn’t pause your loop 👉 It schedules a callback for later 👉 Scope matters more than delay 💬 Have you ever been bitten by this bug? #JavaScript #Angular #WebDevelopment #AsyncJS #Frontend #100DaysOfCode