React State Behaves Like a Snapshot

you called setState twice. expected +2. got +1. both calls read the same stale count from the current render. they don't compound. they both say "set to 1." welcome to React. why it breaks: state updates don't happen immediately. they're scheduled. so count is still 0 inside your function no matter how many times you call setState. both calls read 0. both set to 1. result: 1. the Fix: use functional updates. each call gets the previous result and builds on it. The code : #reactjs #javascript #webdevelopment #buildinpublic #typescript

⚛️ React Components Explained In React, everything is built using components. There are two types: • Functional Components – simple, modern, and use Hooks • Class Components – older, more complex, and less used today 👉 Today, developers prefer Functional Components for clean and scalable code. Are you using functional components in your projects? #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #Coding

just published part 2 of my React internals series , this one covers what actually happens when you call setState and how does re-rendering works. part 1 (initial render): https://lnkd.in/dycpqavw part 2 (re-render): https://lnkd.in/d4tWTwmk #react #javascript #frontend #webdev

⚡ Part 6 of 10: React performance conversations often start too early. Someone sees a rerender and immediately reaches for memoization. But sometimes the real issue is simpler than that. Bad state shape. Too much work inside render. Unclear data flow. A component tree that grew without much intention. I’m not against optimization. I just think the better starting point is: What actually feels slow? Where’s the bottleneck? What problem are we solving? A lot of React code gets more complicated in the name of performance without actually getting better. Have you ever seen “performance optimization” make a codebase worse? #React #ReactPerformance #FrontendPerformance #JavaScript #TypeScript #SoftwareEngineering #WebPerformance

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? In React, 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀 𝗱𝗲𝗳𝗶𝗻𝗲𝗱 𝗶𝗻𝘀𝗶𝗱𝗲 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗿𝗲𝗰𝗿𝗲𝗮𝘁𝗲𝗱 𝗼𝗻 𝗲𝘃𝗲𝗿𝘆 𝗿𝗲𝗻𝗱𝗲𝗿. This means passing them as props can trigger unnecessary re-renders in child components. 🔧 𝗕𝗲𝘀𝘁 𝗽𝗿𝗮𝗰𝘁𝗶𝗰𝗲: - Use "useCallback" to memoize functions when passing them down - Only do this when necessary (e.g., with "React.memo" or dependency arrays) Not every function needs memoization—but knowing when it matters is key. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #PerformanceOptimization #SoftwareEngineering #CodingTips #FullstackDeveloper

How to prevent unnecessary re-renders in React ⚛️ After understanding why components re-render, the next step is learning how to control unnecessary ones. ⸻ 🔹 React.memo It helps prevent a component from re-rendering when its props haven’t changed. ⸻ 💡 Why it matters: Unnecessary re-renders can affect performance, especially in larger or complex components. ⸻ 🧠 Simple understanding: Same props → no re-render Changed props → re-render ⸻ ⚠️ Important: React.memo is useful, but should be used only when needed. ⸻ Small optimizations can make a big difference ⚡ #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #Performance #LearningInPublic

Stop nesting your async calls in React! 🛑 Using async/await within a clean useEffect structure (or a custom hook) keeps your code readable, maintainable, and much easier to debug. What's your biggest React pet peeve? 👇 #ReactJS #CleanCode #JavaScript #softwaredevelopment #React

One React topic that gets messy fast: forms. Not because inputs are hard. Because real-world forms are. Validation, async errors, dynamic fields, reusable logic: that’s where clean React patterns matter. I broke it down here 👇 https://lnkd.in/dFWB3Phc #reactjs #frontenddevelopment #javascript #webdevelopment #softwareengineering #buildinpublic

React performance is not just about fast code — it's about preventing unnecessary re-renders. Many developers focus on building features, but understanding why components re-render is what improves real application performance. Here’s a simple breakdown of: ✔ Why components re-render ✔ Common mistakes causing unnecessary renders ✔ How useMemo, useCallback, and React.memo help Small optimizations create big impact in production systems. What’s your favorite React performance optimization technique? #ReactJS #JavaScript #FrontendDevelopment #WebPerformance #SoftwareEngineering #ReactDeveloper #TechLeadership

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