React useEffect runs twice in development, exposing hidden side-effects and errors

useEffect is one of the most misunderstood hooks in React. It’s not for: • calculating derived values • syncing state with state • fixing re-render issues It is for: • data fetching • subscriptions • timers • syncing with browser or external systems If something can be calculated from existing state or props, it doesn’t belong in useEffect. The less effects you write, the more predictable your React code becomes. #react #frontend #javascript #webdev #cleanCode

How I Understood useCallback At first, useCallback felt useless. My code worked. So why add it? 🤷♂️ Then I learned one thing: 👉 Every render creates a new function. React doesn’t care about logic. It cares about references. useCallback simply tells React: “Please remember this function. Change it only when needed.” That’s it. I now use it mainly when: Passing functions to child components Avoiding unnecessary re-renders Lesson learned 👇 Understand the problem first. The hook will make sense automatically. Still learning. 🚀 #ReactJS #useCallback #FrontendDeveloper #LearningInPublic #Frontend #LearningInPublic #JavaScript #WebDevelopment #DeveloperJourney

𝐃𝐚𝐲 𝟒 𝐨𝐟 𝐮𝐧𝐟𝐨𝐥𝐝𝐢𝐧𝐠 𝟙𝟝 𝐦𝐚𝐣𝐨𝐫 𝐜𝐨𝐧𝐜𝐞𝐩𝐭𝐬 𝐨𝐟 𝐑𝐞𝐚𝐜𝐭 One of the main reasons we use React is that we don’t manually interact with the DOM. React manages updates efficiently on our behalf. Instead of directly re-rendering the real DOM, React uses the 𝐕𝐢𝐫𝐭𝐮𝐚𝐥 𝐃𝐎𝐌 for better performance. React provides special functions called 𝐇𝐨𝐨𝐤𝐬 that control component behavior and DOM interaction. One important hook is 𝐮𝐬𝐞𝐒𝐭𝐚𝐭𝐞. It is used to store and manage data (state) inside a component. When the state value changes, React automatically re-renders the component and updates only the necessary parts of the DOM. Learning one concept at a time to build a strong foundation in React. #ReactJS #WebDevelopment #LearningInPublic #ReactHooks #VirtualDOM #Frontend #JavaScript

"useEffect" is one of the most misunderstood hooks in React. Most beginners think it’s for “running code after render” but that mindset causes bugs and unnecessary re-renders. A better way to think about "useEffect" It synchronizes your component with something outside React. Good use cases: Fetching data from an API Subscribing to events Updating document.title Cleaning up listeners Rule of thumb: If your logic doesn’t interact with the outside world, it probably doesn’t belong in "useEffect". Understanding this early makes your React code cleaner, predictable, and easier to maintain. #React #WebDevelopment #Frontend #JavaScript #ReactHooks

A mistake I made while working with React. For a long time, I thought more state meant more control. That assumption caused issues later. Here’s what I noticed in real projects: - Components became harder to reason about - Unnecessary re-renders appeared - Debugging took longer than expected What changed my approach: - I questioned whether state was actually needed - I avoided storing derived values - I kept state close to where it’s used One simple rule helped me a lot. If state can be calculated, it probably shouldn’t be stored. How do you decide what truly belongs in state? #react #javascript #frontend #webdevelopment

Hot take (but true): React is not hard. JavaScript is. 👍If you don’t understand closures, useDebounce is just copy-paste magic. 👍If you don’t understand reference vs value, your useEffect dependencies will re-run forever and you’ll blame React.  👍If you don’t understand event loop & async behavior, useEffect, promises, and state updates will feel “random”. Most React performance issues are JavaScript knowledge gaps, not React problems. Frameworks don’t replace fundamentals. They amplify them. Learn JavaScript deeply first. React will suddenly feel… simple. #reactjs #javascript #frontend #softwareengineering #careeradvice

Hot take (but true): React is not hard. JavaScript is. 👍If you don’t understand closures, useDebounce is just copy-paste magic. 👍If you don’t understand reference vs value, your useEffect dependencies will re-run forever and you’ll blame React.  👍If you don’t understand event loop & async behavior, useEffect, promises, and state updates will feel “random”. Most React performance issues are JavaScript knowledge gaps, not React problems. Frameworks don’t replace fundamentals. They amplify them. Learn JavaScript deeply first. React will suddenly feel… simple. #reactjs #javascript #frontend #softwareengineering #careeradvice

Custom Hooks are one of those React features that can significantly enhance your codebase. If you find yourself duplicating the same useEffect, state, or API logic across components, it's a clear indication that you should create a custom hook. In just three simple steps, you can: • Extract reusable logic • Keep components clean • Improve readability and maintainability This approach scales effectively for real-world applications and simplifies testing and reasoning about your code. Pro tip: If your component is doing too much, it’s likely time for a hook. Save this for later and share it with someone learning React. #ReactJS #FrontendDevelopment #JavaScript #WebDev #ReactHooks #CleanCode #DevCommunity 

I’ve had bugs that didn’t throw errors. Didn’t break the UI. Didn’t show up in logs. They just… behaved wrong. Most of the time, the culprit wasn’t React, Next.js, or some library it was how async code was written. async/await makes JavaScript feel simple, but under the hood, things can quietly go wrong if you’re not careful. In this post, I’m sharing some async/await mistakes that cause hidden bugs the kind you only notice after users start reporting “weird behavior”. Curious which async bug has bitten you the hardest? Forgotten await? forEach with async? Something worse? 😅 Drop it in the comments 👇 #JavaScript #AsyncAwait #WebDevelopment #Frontend #Backend #CleanCode #BuildInPublic

💡 𝐑𝐞𝐚𝐜𝐭 𝐂𝐨𝐧𝐜𝐞𝐩𝐭 – 𝐏𝐫𝐨𝐩𝐬 ❓ Ever wondered how 𝐝𝐚𝐭𝐚 𝐟𝐥𝐨𝐰𝐬 between components in React? Today I learned about 𝐏𝐫𝐨𝐩𝐬, a core concept that makes React components reusable 🚀 🔹 Props are used to 𝐩𝐚𝐬𝐬 𝐝𝐚𝐭𝐚 𝐟𝐫𝐨𝐦 𝐩𝐚𝐫𝐞𝐧𝐭 𝐭𝐨 𝐜𝐡𝐢𝐥𝐝 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 🔹 They help build 𝐝𝐲𝐧𝐚𝐦𝐢𝐜 & 𝐫𝐞𝐮𝐬𝐚𝐛𝐥𝐞 𝐔𝐈 🔹 Props are 𝐫𝐞𝐚𝐝-𝐨𝐧𝐥𝐲  (cannot be modified by child component) In the attached example, name is passed as a 𝐩𝐫𝐨𝐩 from parent to child component 👇 What should I share next — useEffect with API call or custom hooks? 🤔 #ReactJS #JavaScript #Props #FrontendDevelopment #LearningInPublic #ReactDeveloper