Avoiding useEffect Bugs with Intentional Dependencies

useEffect is one of the most important—and most misused—hooks in React. A simple way to think about it: It runs after render when its dependencies change. Common mistakes: Missing dependencies, causing unnecessary re-renders Incorrect dependencies, leading to bugs Putting too much logic in one effect Forgetting cleanup for listeners or timers A better approach is to keep each effect focused and predictable: useEffect(() => { const handler = () => setWidth(window.innerWidth); window.addEventListener("resize", handler); return () => window.removeEventListener("resize", handler); }, []); If you are using useEffect just to compute values, you probably don’t need it. Use useMemo or useCallback instead. Understanding when and why your code runs is the key to using useEffect correctly.

The Ghost in the UI. We see the error. We don’t see the path that led there. In the frontend, a stack trace is just a destination. To fix the bug, you need the journey. This is how Sentry turns telemetry into time travel. 1. The Instrumentation Sentry doesn't wait for a crash. It stays active. It wraps the native browser APIs—fetch, XHR, Console. It listens to every click and every navigation. It builds a trail of Breadcrumbs. When the exception finally hits, it doesn’t just send the error; it sends the history. 2. The Illusion of Video The "Session Replay" feature feels like a MP4 recording. It isn’t. Recording pixels is heavy. Recording DOM mutations is light. Sentry takes a snapshot of the DOM tree and logs every change (mutations) as a sequence of events. When you watch a replay, you aren't watching a video—you are watching Sentry re-render the user's exact session in a sandbox. Under the hood, this magic is powered by rrweb (record and replay the web), an open-source library that serializes the DOM and records mutations as a JSON stream. 3. The Package The magic lives in @sentry/replay. If you’re on the modern stack, it’s already bundled in @sentry/react or @sentry/nextjs. You just have to wake it up. The Invisible Edge Standard logging tells you what happened. Replay tells you why. Stop debugging by guessing. Start debugging by observing. #Frontend #SystemDesign #Sentry #React #JavaScript  #Technology #SoftwareEngineering #WebDevelopment #Programming #SystemDesign #TechStrategy #Debugging #ErrorMonitoring

Three useEffects, all anonymous. A production bug. Spent 40 minutes fixing what should have taken 5. Not again. useEffect(() => { ... }) will tell you nothing when it breaks. No stack trace, no clues in react devtools. Just anonymous in the profiler 15 times. This is what happened to us. Three effects in a single component - all of them anonymous. The error referred to the component, but didn’t specify the effect. Three senior engineers manually debugging the issue, staring at the same file. The tool wasn’t the solution, the tool was a naming convention: useEffect(function syncCartWithLocalStorage() { ... }) One small change. Then I set a rule for the team: → Every useEffect should be a named function. → The name should describe what the effect does, not when. → syncCart, fetchUserProfile, subscribeToSocket are preferred over onMount or handleChange. The results after 2 months were: - 30% reduction in time spent debugging. - Stack traces were self documenting. - New developers were onboarded quickly - effects read like a table of contents. - Code reviews were shorter. The name alone explained what was expected. Debuggability is not a feature you add later, it’s a habit you embed in every line. What’s your small syntax habit that saved you hours of debugging? #ReactJS #FrontendEngineering #WebDevelopment #CodeQuality #DeveloperProductivity

Most useEffect hooks ship with anonymous callbacks. The problem: to understand "what is this?", you’re forced to spend cognitive resources parsing the entire implementation. This friction hits hardest during code reviews, debugging, or performance profiling. Moving to named functions inside useEffect, useMemo, useCallback etc. instantly restores self-documentation. It answers the "what" before you even look at the "how," turning imperative noise into a readable pipeline. Honestly, it’s a far superior pattern than the old "comment before every effect" rule I used to push for. Beyond readability, naming acts as a built-in SRP (Single Responsibility Principle) detector. If you find yourself wanting to use "and" in the function name, your hook is overloaded. The struggle to find a concise name is usually a signal that it’s time to decompose the effect. This post was inspired by this article: https://lnkd.in/eEmByPs7. It perfectly articulates what I’ve been feeling for a while: naming hook callbacks isn't just about aesthetics — it’s a functional tool for better decomposition, responsibility control, and easier debugging. #ReactJS #FrontendArchitecture #CleanCode #WebDevelopment #JavaScript #TypeScript #CodingTips

🚀 𝗗𝗲𝗰𝗼𝗱𝗲 𝗠𝗘𝗥𝗡 𝘄𝗶𝘁𝗵 𝗠𝗲 – 𝗗𝗮𝘆 𝟮 𝗕𝗮𝘀𝗶𝗰𝘀 𝗮𝗿𝗲𝗻’𝘁 𝗯𝗮𝘀𝗶𝗰… 𝘁𝗵𝗲𝘆 𝗮𝗿𝗲 𝗲𝘃𝗲𝗿𝘆𝘁𝗵𝗶𝗻𝗴. Yesterday was about 𝗣𝗿𝗼𝗽𝘀. Today, I explored the real power behind React — 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 Instead of just learning syntax, I built multiple mini apps to understand how 𝘀𝘁𝗮𝘁𝗲 behaves in real scenarios. 📍 𝗪𝗵𝗮𝘁 𝗜 𝗯𝘂𝗶𝗹𝘁: • 𝗖𝗼𝘂𝗻𝘁𝗲𝗿 𝗔𝗽𝗽 (increment/decrement logic) • 𝗧𝗼𝗴𝗴𝗹𝗲 𝗕𝘂𝘁𝘁𝗼𝗻 (boolean state handling) • 𝗦𝗵𝗼𝘄/𝗛𝗶𝗱𝗲 𝗧𝗲𝘅𝘁 (conditional rendering) • 𝗣𝗮𝘀𝘀𝘄𝗼𝗿𝗱 𝗜𝗻𝗽𝘂𝘁 (visibility toggle) • 𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗜𝗻𝗽𝘂𝘁 (form state management) • 𝗧𝗼𝗱𝗼 𝗟𝗶𝘀𝘁 (real-world state usage) 💡 𝗞𝗲𝘆 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀: • 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 for managing dynamic UI • State changes trigger 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 • Handling input using 𝗰𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗱 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 • 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝗮𝗹 𝗿𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴 • Managing 𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝗲 𝘀𝘁𝗮𝘁𝗲𝘀 🌗 𝗕𝗼𝗻𝘂𝘀: 𝗗𝗮𝗿𝗸 𝗠𝗼𝗱𝗲 • Theme toggle using state • Saved preference with 𝗹𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲 𝘂𝘀𝗲𝗦𝘁𝗮𝘁𝗲 is not just a hook — it makes UI feel alive. 🔗 GitHub: https://lnkd.in/g39YNFQx Let’s grow together 🤝 #MERN #ReactJS #WebDevelopment #LearningInPublic #100DaysOfCode

Just leveled up my performance and debugging game! 🚀 As web applications grow more complex, delivering a lightning-fast, jank-free user experience is more critical than ever. To ensure I'm utilizing the browser's full potential and building highly optimized applications, I just wrapped up 𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗖𝗵𝗿𝗼𝗺𝗲 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗧𝗼𝗼𝗹𝘀, 𝗩𝟰 by 𝗝𝗼𝗻 𝗞𝘂𝗽𝗲𝗿𝗺𝗮𝗻 on 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗠𝗮𝘀𝘁𝗲𝗿𝘀. It was a fantastic, deep-dive into the engine that powers our daily web development. Here are my biggest takeaways for building faster, more resilient apps: 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀 & 𝗥𝗔𝗜𝗟: A solid breakdown of metrics like LCP, INP, and CLS. It's a great reminder that users perceive anything under 100ms as instant, making it essential to keep the main thread free. 𝗙𝗿𝗮𝗺𝗲 𝗕𝘂𝗱𝗴𝗲𝘁𝘀 & 𝗝𝗮𝗻𝗸: To maintain a smooth 60fps, we only have about 10-16ms of budget per frame. Profiling the main thread is vital to identify busy computation tasks and dropped frames before they cause visual stuttering. 𝗠𝗲𝗺𝗼𝗿𝘆 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁: Learned how to effectively use the Memory Panel to capture snapshots and track down silent memory leaks—like detached DOM nodes and zombie event listeners—by analyzing shallow vs. retained sizes. 𝗡𝗲𝘁𝘄𝗼𝗿𝗸 𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝘁𝗶𝗼𝗻: This was a massive highlight. Speeding up the network waterfall essentially comes down to three core principles. Make Files Smaller: Utilizing Gzip/Brotli compression, minification, and modern image formats. 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴: Moving way beyond standard console logs by mastering conditional breakpoints, stepping through the Call Stack, and using the Coverage tool to instantly identify unused JavaScript and CSS. The DevTools suite is an absolute powerhouse when you know exactly where to look. How are you tracking down performance bottlenecks or memory leaks in your current web projects? Drop your favorite debugging tips below! 👇 #WebPerformance #ChromeDevTools #FrontendDevelopment #WebDevelopment #JavaScript #Debugging #ContinuousLearning

Just shipped a clean and functional Password Generator 🔑 Built this project to sharpen my core JavaScript fundamentals while focusing on real user interaction. 👉 Live demo: https://lnkd.in/dY4wYVeH 💡 Key things I worked on: - DOM manipulation (querySelector / getElementById) - Dynamic password generation logic - Randomization using "Math.random()" + "Math.floor()" - Input validation (handling edge cases like empty or invalid values) - Copy-to-clipboard functionality using "navigator.clipboard" - Smooth UI feedback using "setTimeout()" and class toggling ⚙️ What makes it interesting: Instead of just generating random characters, I structured the logic to ensure better randomness and control over how passwords are built. This project helped me better understand how JavaScript connects logic → UI → user experience. Next step: Adding customization options (uppercase/lowercase toggles, symbols control, strength meter). Would love feedback from other devs 👇 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #BuildInPublic #CodingJourney #LearnToCode #DeveloperLife #TechProjects #PortfolioProject

React Rule at Factory: No direct useEffect allowed They banned calling useEffect directly in the codebase. For the rare cases needing external sync on mount, they use a single explicit hook: useMountEffect(). Why? Most useEffect usage was creating: Infinite loops Race conditions Hidden dependency hell Flaky refactors Debugging pain (“why did this run?”) This is even more critical now that AI agents are writing frontend code and often add “just-in-case” effects. The team replaced most effects with these 5 clean patterns: Derive state — don’t sync it with effects Use proper data-fetching libraries — no manual fetch + setState Event handlers — not effect flags useMountEffect — only for true external sync (DOM, third-party widgets) Reset with React keys — instead of effect choreography Result: Fewer bugs, easier reasoning, faster onboarding, and a more predictable codebase. It started as a strict rule born from production pain — now it feels like an essential guardrail. Would you adopt a “no direct useEffect” rule on your team? Thoughts? Too extreme or smart discipline? Drop your take below #React #ReactJS #Frontend #WebDevelopment #JavaScript #CleanCode #SoftwareEngineering

When working on our real-time game project (ft_transcendence), my team and I peppered our code with setTimeout, requestAnimationFrame and a lot of async / await. They all looked like different flavours of 'async'; they all 'ran later'. I assumed they must behave differently (why else would they all exist?), but I didn't really know how or why. So I looked into it, trying to build a mental model about what actually happens in the browser. Once that clicked, these mechanisms became easier to reason about and a lot of previously confusing behavior stopped being surprising. I've documented this process into a series: - Why nothing can interrupt synchronous execution - What a “task” actually is - Why promises always run first - And most recently: what async / await really does I’ve put everything together here: https://lnkd.in/dG_Gy3Fn Still more articles to come! Also - what’s one async behavior in JavaScript that confused you the most?

Vite 8.0 is out: What’s new and why it matters 🧑💻 Recently, Vite released version 8 with a new bundler, Rolldown, introducing a major architectural shift. Earlier, Vite relied on: • esbuild for development • Rollup for production We no longer need separate bundlers for development and production. Vite is moving toward a unified approach with Rolldown, a Rust-based bundler designed for better performance and scalability, delivering significantly faster builds (up to 10–30x compared to Rollup). What I found even more interesting is a smaller (but impactful) change 🤔 Browser console logs can now be forwarded directly to the terminal (like VS Code, Cursor and other IDEs). 💡 Why this matters Browser errors can now be seen directly in the terminal, enabling faster debugging without switching to the browser and improving modern workflows where tools (including AI-assisted tools like Cursor, Claude, Codex and Copilot) can access these errors more directly in the terminal. As AI becomes a bigger part of development, tools are evolving fast. It will be interesting to see how other tools evolve in the future. #Vite #JavaScript #ReactJS #DeveloperExperience #WebDevelopment #FrontendDevelopment #FullStackDeveloper #SoftwareEngineering