Hitesh Ghodki’s Post

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

var was forgiving. Sometimes too forgiving. You could use a variable before declaring it and JavaScript would just... let you. No error. Just undefined. let and const changed that. Now the same pattern throws a ReferenceError. But here's what most explanations miss: the variable is hoisted. It exists. The engine knows about it. It just refuses to let you touch it. That window between the start of the scope and the declaration line has a name — the Temporal Dead Zone. The TDZ exists for a reason: catching bugs that var would silently swallow. Using a variable before it's defined is almost always a mistake. Now JavaScript tells you that instead of guessing. One place it catches even experienced devs off guard — default parameter values that reference each other. Do you always know where your TDZ is? 👇 #JavaScript #WebDevelopment #Frontend #JS #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

🔁 Why does this print 4, 4, 4 — and not 1, 2, 3? One of the most common JavaScript interview questions, and it all comes down to one thing: the event loop. Look at this: for (var i = 1; i <= 3; i++) {  setTimeout(() => console.log(i), 0) } What I expected when I started with Javascript: 1 2 3 What we actually get: 4 4 4 Why? 😓 😓 😓 JavaScript is single-threaded. When the loop runs, it doesn't pause and wait for setTimeout to fire. Instead, each callback gets placed in the task queue and runs only after the call stack is completely empty. So by the time any callback runs, the loop is already done — and i has already been incremented to 4. The callbacks don't hold a copy of i. They all share a reference to the same var i. And that i is now 4. But swap var for let — and suddenly it prints :1, 2, 3. Why? 😓 for (let i = 1; i <= 3; i++) {  setTimeout(() => console.log(i), 0) } let is block-scoped. Each iteration of the loop gets its own brand new i( Imagine this , let is a self-centered guy who likes to live in his own bubble) So each callback closes over a separate variable — one holding 1, one holding 2, one holding 3. When the callbacks eventually run from the task queue, they each find their own i — untouched. var shares one variable across the whole loop. let creates a fresh one per iteration. That's the entire difference. #javascript #eventloop

My form was getting harder to manage… as it grew 😅 Yes, seriously. At first, everything was simple. But as inputs increased, handling state became messy. 💡 I was doing this: const [value, setValue] = useState(""); <input value={value} onChange={(e) => setValue(e.target.value)} /> 👉 Controlled input ⚠️ Problem: • Too many states • More re-renders • Hard to manage large forms 💡 Then I explored another approach: 👉 Uncontrolled components 🧠 Example: const inputRef = useRef(); 👉 Access value when needed 💡 Difference: Controlled → React manages state Uncontrolled → DOM manages state ✅ Result: • Better flexibility • Cleaner logic (for some cases) • Easier form handling 🔥 What I learned: Not every input needs to be controlled. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

There was a time when frontend felt like wiring everything by hand… We’d grab elements with getElementById or querySelector, attach event listeners, managing callbacks, deal with closures, and manually clean things up. Focus an input on button click? Add an event listener, handle event propagation (capturing vs bubbling—using the third parameter when needed), and remember to remove it properly to avoid leaks. Events? Built-in with JSX Synthetic Events (onClick, onChange) We just use: ref.current?.focus() // directly access Web API method when needed #React #webdevelopement #javascript

Why do we need the 𝘂𝘀𝗲𝗠𝗲𝗺𝗼 hook when we can perform heavy calculations inside 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲, which runs only once? The key difference is flexibility and reactivity. 𝘂𝘀𝗲𝗠𝗲𝗺𝗼 can run once or re-run when specific values change. It accepts two arguments: 1. A callback function 2. A dependency array You can pass values in the dependency array, and whenever any of those values change, React re-invokes the callback function. This ensures you always have the latest values inside the callback. Real-world use case: Validating edit form values on initial load and re-validating when certain conditions or inputs change. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactHooks #PerformanceOptimization #CodingTips

I used Debounce when I should have used Throttle… 😅 And it broke my feature. 💡 I was working on scroll tracking 👉 I wanted to track user scroll position in real-time So I used Debounce. ⚠️ Problem: Debounce waits until user stops scrolling 👉 So I was getting delayed updates ❌ 💡 Then I switched to Throttle 🧠 Difference: 👉 Debounce Waits → runs after user stops action 👉 Throttle Runs → at fixed intervals while action continues 📌 Example: Typing → use Debounce ✅ Scrolling → use Throttle ✅ ✅ Result: • Smooth scroll tracking • Better performance • Correct behavior 🔥 What I learned: Choosing the wrong optimization can break the user experience. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

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

Core mental model of useMemo() 💡 ➡️ It takes a pure function as the first argument and a dependency array as the second. ➡️ That function returns a value, and React reuses the previously cached result on later renders if the dependencies have not changed. ➡️ If the returned value is a primitive, React reuses the same value 🧠 This is commonly useful for expensive calculations. ➡️ If the returned value is an object or array, React reuses the same reference 🧠 This is commonly useful for stabilizing props passed to a memoized component created with React.memo() #javascript #typescript #react #useMemo() #memorization