Small mistakes cause big problems in React development

I spent 3 hours fixing a React bug yesterday. The issue wasn’t complex. My approach was. Earlier, whenever something broke in my app, I used to: ❌ randomly change code ❌ refresh again and again ❌ search Stack Overflow immediately Now I follow a simple process: ✅ check component re-renders ✅ inspect props and state flow ✅ verify API response structure ✅ use console logs step-by-step And honestly, debugging became much faster. One thing I’m learning as a developer: Writing code is important. But understanding why code breaks is what actually improves your skills. Curious to know — what’s the toughest bug you fixed recently? #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #FullStackDeveloper #MERN

🚨 Why is useEffect firing twice in React? (Every React developer hits this at least once 👀) You write a simple useEffect(): useEffect(() => { console.log("API Called"); }, []); Expected: ✅ Runs once when component mounts Reality in development: ❌ Runs twice At first, it feels like a bug. But it’s actually React helping you. Here’s why: In React 18, Strict Mode intentionally runs effects twice in development to detect: • Side effects that aren’t properly cleaned up • Unsafe component behavior • Bugs that may appear in production later Think of it like a stress test for your code. Example: Without cleanup: API calls may duplicate Event listeners may stack Timers may keep running Better approach: ✔ Add cleanup functions ✔ Make effects idempotent ✔ Avoid unnecessary side effects Example: useEffect(() => { const timer = setInterval(() => { console.log("Running..."); }, 1000); return () => clearInterval(timer); }, []); Important: This double execution happens only in development mode, not production. So next time useEffect fires twice, don’t panic. React is exposing hidden issues before users do. 📌 Part 1 of my React series Next: Dependency Array Explained Simply ⚛️ https://inhamtools.com/ https://lnkd.in/daSAPzAX #ReactJS #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering

A few days ago, I launched a #SnakeGame using React.js. 🐍 🎮 Today, I want to share why I relied on the useEffect hook and a few bugs that challenged me during the process. ✅ Using useEffect effectively I used an empty dependency array: useEffect(() => { ... }, []), which runs once when the component mounts—perfect for initializing the game logic. I also returned a cleanup function to remove event listeners using removeEventListener, ensuring there are no duplicate triggers or memory leaks. ✅ Using dependency arrays wisely Along with the empty dependency array, I also used specific dependencies like: useEffect(() => { ... }, [paused, togglePause]) Here, paused is a state, and togglePause is a function/handler. This ensures the effect runs only when needed, keeping performance optimized. ✅ Multiple useEffect instead of one Instead of putting everything into a single useEffect, I divided the logic into multiple hooks (game loop, keyboard control, pause state, etc.). This made the code more organized, easier to debug, and prevented unnecessary re-renders. ✅ Deployment challenges (real struggle 😅) After deploying on GitHub, the game worked, but media files didn’t behave as expected. Relative paths like ./file.mp3 didn’t work properly, so I updated them to match the base URL (e.g., /snake-game/...). For audio, browsers block autoplay without user interaction. So the sound only works after interacting with the game (like restarting). I’ll improve this interaction in the next iteration. Every small bug taught me something new. And that’s the best part of building. 🚀 Happy Coding 🎀💻 #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingJourney #LearnInPublic #BuildInPublic #GitHubProjects #ReactHooks #Debugging #SoftwareDevelopment

Props vs State in React Most beginners get confused between Props and State in React. At first, both seem similar because both store data. But the real difference is simple: * Props = Data received from another component * State = Data managed inside the component Example: function Parent() { return <Child name="Durgesh" />; } function Child(props) { return <h1>{props.name}</h1>; } Here, `name` is a prop because it comes from the Parent component. Now look at State: const [count, setCount] = useState(0); Here, `count` is managed inside the same component. Quick Difference 👇 • Props are read-only • State can be updated • Props come from parent to child • State belongs to the component itself Think like this: Props = Things you receive State = Things you control Once you understand this difference, React becomes much easier. What confused you more when learning React — Props or State? #react #javascript #frontend #webdevelopment #reactjs #coding

Most React devs use hooks daily… But a lot of us are using them wrong (or at least inefficiently). Here are 5 React Hooks you're probably misusing 👇 1. useEffect: Doing too much If your useEffect looks like a mini backend service… that’s a red flag. 👉 Keep it focused: one responsibility per effect. 👉 Avoid unnecessary dependencies (or missing ones 😬). 2. useState: Over-fragmenting state Multiple useState calls for tightly related data = messy logic. 👉 Consider grouping related state into one object 👉 Or use useReducer for complex flows 3. useMemo: Premature optimization Not everything needs memoization. 👉 If your calculation is cheap, skip it 👉 Overusing useMemo can hurt readability more than it helps performance 4. useCallback: Blind usage Wrapping every function in useCallback ≠ optimization 👉 Only use it when passing functions to memoized components 👉 Otherwise, you're just adding complexity 5. useRef: Misunderstood power It’s not just for DOM access 👉 Great for persisting values without re-renders 👉 Perfect for timers, previous values, or mutable variables 💡 Rule of thumb: If you can’t clearly explain why you're using a hook… you probably don’t need it. What’s a hook mistake you’ve made (or still make)? 😄 #React #WebDevelopment #Frontend #JavaScript #Programming #CodingTips

I Thought This Was Easy ! Date: 9/4/2026 Today, I tried another React.js project: Transfer List. When I saw it for the first time, I realized this is too easy—only a game with array, and state updates. 😎 But? When I tried it, I got stuck ! 🤣 🤣 The first two functionalities—moving all items from the left box to the right box and vice versa—I made easily. 😊 But moving only checked items was the most challenging part of this project.🤔 Disabling buttons based on conditions (most time-consuming). After making this project, what I learned: 👉 Improved logical thinking about states. 👉 I learned why the Double-Bang operator is important. 👉 Strong command of filtering. And from what I know, these are the weak areas where improvement is required: 👉 Controlled Components 👉 I always use useState; I need to practice useReducer more. Github Repo - https://lnkd.in/gK9cqYxm #ReactJS #WebDevelopment #CodingJourney #JavaScript #CodeNewbie

React Hooks changed the way I write React forever. 🎣 Before hooks, I was juggling class components, lifecycle methods, and `this` bindings just to manage basic state. Then `useState` and `useEffect` walked in and said "relax, we got you." 😄 A few things I love about hooks: → `useState` — dead simple state management, no class needed → `useEffect` — handle side effects cleanly in one place → `useCallback` & `useMemo` — performance wins without the headache → Custom hooks — extract and reuse logic like a pro The best part? Your components become smaller, more readable, and actually fun to write. If you're still on class components, I genuinely encourage you to make the switch. The learning curve is worth it — I promise. 🙌 What's your favourite hook? Drop it in the comments! 👇 #ReactJS #React #WebDevelopment #Frontend #JavaScript #ReactHooks #Programming #SoftwareEngineering

When I first picked up React, I thought: 👉 “It’s just a library for building UI… shouldn’t be that complicated.” Then came the reality check... Suddenly I wasn’t just learning React — I was dealing with routing, state management, styling frameworks, testing tools, build tools… and it felt like the list would never end. React itself is pretty simple to understand. But the ecosystem around it? That’s where things start to feel overwhelming. ✨ What I’ve learned from this: You don’t need to learn everything together. Start with the basics → get comfortable building small projects → and only bring in new tools when you actually need them. That shift in approach makes learning way more manageable (and enjoyable). 💬 For those who’ve been through this - What was the first tool you explored after getting comfortable with React? #ReactJS #JavaScript #WebDevelopment #Frontend #Programming #CodingLife #Developers #ReactEcosystem #NextJS #TypeScript #TailwindCSS #SoftwareEngineering

setState does not work as you expect Do you think setState works like this: setCount(1) console.log(count) // should be 1, right? Wrong. It's still 0 (or the prev value). And if you don't understand WHY... You'll spend hours debugging something that isn't even a bug. This is Post 6 of the series: 𝗥𝗲𝗮𝗰𝘁 𝗨𝗻𝗱𝗲𝗿 𝘁𝗵𝗲 𝗛𝗼𝗼𝗱 Where I explain what React is actually doing behind the scenes. Here's what's actually happening 👇 setState doesn't update state. It queues a request to React. React then decides WHEN to process it. Not your code. React. That's why the value after setState is still the old one... because the component hasn't re-rendered yet. Now here's where it gets interesting. Call setState 3 times in one click? You'd expect 3 re-renders. React does it in 1. That's called Batching React's built-in performance superpower. It groups all your updates, processes them together, and re-renders once. But batching also leads to one of the most confusing bugs beginners face: setCount(count + 1) setCount(count + 1) // Expected: 2 // Actual: 1 😐 Both calls read the SAME stale snapshot of count. So React queues the same value twice. How to fix this? setCount(c => c + 1) setCount(c => c + 1) // Now it's: 2 ✅ Functional updates always get the latest queued value, not the stale snapshot. One tiny change in how you write setState. Massive impact on how your app behaves. Follow Farhaan Shaikh if you want to understand React more deeply. 👉 Read the previous post: Using index as key is dangerous in list: https://lnkd.in/dPQyScAT #ReactJS #JavaScript #WebDevelopment #Frontend #BuildInPublic #LearnInPublic #ReactUnderTheHood #FrontendDeveloper #Programming #TechStudent

🧠 The bug wasn’t in my code… It was in my assumption. I spent 2 hours debugging a UI issue where a list wasn’t updating correctly. The logic looked fine. The API response was correct. State was updating. So what was wrong? 👇 👉 I was using the array index as the key in a dynamic list. At first, everything worked. But the moment I added/removes items… things broke in weird ways. 💥 Items re-rendered incorrectly 💥 State got mixed up between components 💥 UI started behaving unpredictably 💡 Lesson learned: Keys in React are not just for removing warnings. They are how React tracks identity. Using index as a key = telling React: "Yeah, these items might change… but pretend they didn’t." 🛠️ Better approach: Always use a unique and stable id from your data. 🧠 Simple way to think: React uses keys like names in a classroom. If everyone has the same name (or changing names), things get chaotic. 🔥 Takeaways: • Avoid index as key (especially in dynamic lists) • Stable identity = predictable UI • Many “random bugs” come from small decisions like this 💬 Have you ever faced a weird UI bug that turned out to be something small? #ReactJS #FrontendDevelopment #JavaScript #WebDev #CodingMistakes