Durgesh Suryawanshi’s Post

I fixed a like button bug today that looked simple… but wasn’t. Clicks were working… But likes were not updating correctly. The issue? State was not syncing with the backend response. Once I fixed the state update logic, everything worked perfectly. Lesson: • Always sync frontend state with backend data • Don’t rely only on UI changes Small feature. Real learning. What bug did you fix recently? #FullStackDeveloper #WebDevelopment #JavaScript #Debugging #ProblemSolving

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 developers think this is a “small mistake”… But it can break your entire application. Today, I debugged an issue where a search feature was showing old API results. At first glance, everything looked correct: - API was working - State was updating - No errors in console But the problem was subtle 👇 When users typed fast, multiple API calls were triggered. And sometimes, a slower previous request finished after the latest one. Result? 👉 Old data overwrote the new results. This is called a race condition — and it’s more common than people think. 💡 How I fixed it: - Used request cancellation (AbortController) - Tracked latest request ID - Ignored outdated responses Simple fix. Big impact. --- As developers, it’s not always about writing code. It’s about understanding how systems behave under real user conditions. Have you faced something like this in your projects? --- #mernstack #reactjs #webdevelopment #javascript #fullstackdeveloper #softwareengineering #codingtips #frontenddevelopment #backenddevelopment #devcommunity

I’ve been working on a VS Code extension that tries to answer a simple but annoying question: “What actually happens between my frontend and backend?” Most codebases hide this behind scattered files, API calls, and routes. So I built FlowMap. It scans a project and visualizes: Frontend file → API call → Backend route No runtime. No database. Just static analysis + a graph. Current state: Works with Next.js and Express Runs locally inside VS Code End-to-end pipeline is functional Now I want to make it better, not bigger. Looking for contributors who are interested in: Improving parsing accuracy (regex-based, no AST yet) Making the graph more readable and useful Turning this into a real developer navigation tool This is not a generic visualizer. It’s focused only on how systems communicate internally. If this sounds interesting, I’d love to collaborate. #opensource #webdevelopment #vscode #javascript #typescript #nextjs #expressjs #devtools #softwareengineering

Are You Using Hooks or Misusing Them? Hooks made React cleaner but only if you respect the rules. In production environments, most bugs don't stem from complex business logic; they stem from subtle anti-patterns that degrade performance and scalability. If you’re aiming for senior-level code, here are the patterns you should stop today: ⚠️ 1. The useEffect Crutch If a value can be computed during render, it doesn’t belong in an effect. Effects are for synchronization with external systems, not for transforming data. Overusing them leads to unnecessary re-renders and "race condition" bugs. ⚠️ 2. Suppressing Dependency Arrays Disabling ESLint warnings is like ignoring a "Check Engine" light. If including a dependency breaks your logic, your logic is flawed, not the rule. Fix the stale closure; don't hide it. ⚠️ 3. Storing Derived State Storing data in useState that can be calculated from props or other state variables is a recipe for sync issues. Always maintain a Single Source of Truth. ⚠️ 4. Abstraction Fatigue (Custom Hook Overkill) Not every 3-line logic block needs a custom hook. Premature abstraction often makes code harder to follow than simple, localized duplication. Abstract for reusability, not just for "cleaner" looking files. ⚠️ 5. Using Hooks to Mask Architectural Debt Hooks are powerful, but they won't fix a poorly structured component tree. Clean architecture > "Clever" hook implementations. 💡 Senior Dev Mindset: Hooks are not just features; they are constraints that enforce predictable behavior. If your React codebase feels "fragile," it’s rarely a React problem it's usually a Hook implementation problem. 💬 Curious to hear from the community: Which of these "subtle" bugs have you spent the most time debugging lately? #ReactJS #FrontendArchitecture #WebDevelopment #JavaScript #SoftwareEngineering #CleanCode #ReactHooks #SeniorDeveloper #CodeQuality #ProgrammingTips

Have you ever found yourself lost in callbacks, wondering when your code will execute? Promises are here to save the day! They provide a cleaner way to handle asynchronous operations and make your code more manageable. ────────────────────────────── Promises: then catch finally Let's dive into how promises work in JavaScript and why they matter. #javascript #promises #asynchronous #coding #webdevelopment ────────────────────────────── Key Rules • Use .then() to handle successful outcomes. • Use .catch() to handle errors gracefully. • Use .finally() for cleanup tasks, regardless of success or failure. 💡 Try This fetch('https://lnkd.in/gyV9Vyeh') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)) .finally(() => console.log('Fetch attempt finished.')); ❓ Quick Quiz Q: What method do you use to handle errors in a promise? A: .catch() 🔑 Key Takeaway Embrace promises to write cleaner, more readable asynchronous JavaScript code! ────────────────────────────── Small JavaScript bugs keep escaping to production and breaking critical user flows. Debugging inconsistent runtime behavior steals time from feature delivery.

Day 22 #100DaysOfCode 💻 1. Difference between map and filter? — B. map transforms, filter selects 2. What triggers this? (addEventListener) — B. Button click 3. What happens here? (onclick) — B. Runs on click 4. What is the output? (map without return) — B. [undefined, undefined, undefined] 5. Which is correct to get input value? — B. value 6. What is the output? (array.find) — B. 2 7. What does async/await simplify? — B. Callbacks 8. What is the output? (array.filter) — B. [3, 4] 9. Which is best for spacing between flex items? — B. gap 10. What does querySelector do? — B. First match 11. Layout direction (Tailwind flex-col md:flex-row) — B. Column on small, row on medium+ 12. Why does map return undefined? — B. Missing return 13. What does JSON.stringify() do? — A. Converts object to string 14. What does Array.push() do? — A. Adds element to the end 15. What is the use of the spread operator (...) ? — C. Copying or merging arrays/objects 16. How to save data in LocalStorage? — B. setItem('key', 'value') 17. Difference between const and let — A. const cannot be reassigned 18. == vs === — B. === checks both value and type 19. What is the output of typeof null? — C. "object" 20. What is Hoisting? — A. Moving declarations to the top 21. Why is useState used in React? — B. To manage component state 22. What does p-4 mean in Tailwind? — A. Padding on all sides 23. What does Array.reduce() do? — B. Accumulate values to a single result 24. Why use event.preventDefault()? — A. Stops default browser behavior 25. Which method does fetch() use by default? — A. GET 🚀 #javascript #reactjs #webdevelopment #frontenddeveloper #coding #learninginpublic #Akbiplob

I built a JS Minifier that does more than just remove whitespace. 🛠️⚡ Most online minifiers are "black boxes." You paste code, and you get a mess back. I wanted to build something that helps developers understand how their code is being transformed. The Engineering Details: AST Debugging : Built-in visualization using acorn to inspect the Abstract Syntax Tree. Zero UI Lag : Minification runs in a Web Worker, keeping the main thread free for a 60fps experience. Modern Compatibility: Fully supports ES2024+ syntax, powered by Terser. Smart State: Persistent configuration via localStorage and a responsive UI using react-resizable-panels. Mangle & Compress: Smart variable renaming and dead-code removal. The Results: In my tests, I'm consistently seeing 40-60% size reductions in milliseconds. #JavaScript #WebDev #Performance #Frontend #VibeCoding

💡 Most Developers Don’t Understand Async Properly (And It Shows 👀) Let’s be brutally honest. Most developers use async/await… But when things break --- they have no idea why. We write: await fetchData(); And feel like: “Haan bhai, async likh diya… ab sab sorted hai 😎” Until production says: “bhai kuch bhi sorted nahi hai 💀” The bug was in their async flow. → They stacked awaits without understanding the execution order → They ignored the event loop → They guessed instead of reasoning Here is the truth. Async is not syntax. Async is execution. You write await fetchData() and feel in control. The engine is doing something very different. JavaScript runs on a single thread. It uses the call stack. It offloads work to Web APIs. It schedules callbacks in queues. Then the event loop decides what runs next. Microtasks run before macrotasks. Always... Look at this. console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Most developers guess wrong. Actual output is clear. "Start" -> "End" -> "Promise" -> "Timeout" No randomness. No magic. Just rules. Because: -> JS doesn’t care about your intuition -> It follows the event loop strictly If you do not know these rules, you are guessing. And guessing breaks systems. 🔥 Why This Matters If you don’t understand async: -> You cannot debug race conditions -> You cannot explain failures -> You cannot scale your thinking The language is not confusing. Your mental model is incomplete. Fix that. Start predicting execution before running code. Trace the stack. Track the queue. Respect the event loop. Pro Tip... Use Chrome DevTools to debug and step through async code That is how real developers work. Syntax is the entry. Understanding execution is the skill. #JavaScript #AsyncAwait #EventLoop #WebDevelopment #SoftwareEngineering

Most frontend bugs aren’t in your code… They’re in your data flow. . . I used to think bugs came from “wrong logic” or missing edge cases in components. But most of the time, the UI was doing exactly what I told it to do… The problem was what I was feeding into it. Data coming in too early (before it’s ready). State updates are happening in the wrong order. Multiple sources of truth are fighting each other. Props being passed without clear ownership And suddenly… A perfectly written component starts behaving unpredictably. . . What fixed it for me wasn’t rewriting components. It was: → Making data flow predictable → Keeping a single source of truth → Being intentional about when and where state updates. → Separating data logic from UI logic . . Clean components don’t save you If your data flow is messy. Frontend isn’t just about how things look… It’s about how data moves. . . What’s one bug you chased for hours…that turned out to be a data flow issue? . . #frontend #reactjs #webdevelopment #softwareengineering #coding #devlife #developerexperience #javascript