Mastering useState in React for Predictable Code

One of the biggest mistakes I made early in React: 👉 Overusing useEffect. After working with React for 3 years, I realized: Most useEffect usage is unnecessary. Here’s when you should NOT use useEffect 👇 ❌ 1. Deriving state from props If you can calculate it directly during render, don’t store it in state. Bad: const [fullName, setFullName] = useState("") useEffect(() => { setFullName(firstName + " " + lastName) }, [firstName, lastName]) Better: const fullName = firstName + " " + lastName ❌ 2. Handling simple calculations React re-renders already — no need for effects. ❌ 3. Updating state based on another state This often leads to unnecessary re-renders or bugs. ✅ When should you use useEffect? API calls Subscriptions (e.g., WebSocket) DOM side effects 💡 Rule I follow now: “If it can be calculated during render, don’t use useEffect.” This one shift made my code: ✔ Simpler ✔ Easier to debug ✔ More performant React is powerful — but only when used correctly. What’s one mistake you used to make in React? #React #FrontendDevelopment #JavaScript #CleanCode #WebDev

Why does React say: "Don't call hooks conditionally"? 🤔 Let’s break it down simply. React doesn’t track hooks by name. It tracks them by order. Every render, React just walks through hooks like this: 1st hook → 2nd hook → 3rd hook That’s it. No labels. No IDs. Just position. Now imagine this 👇 if (condition) { useEffect(() => { // do something }); } 👉 First render: Hook1 → Hook2 → Hook3 👉 Next render (condition = false): Hook1 → Hook3 Now React gets confused 😵 It expects Hook2… but suddenly sees Hook3. This breaks the internal hook mapping — and boom 💥 unexpected bugs or crashes. 👉 The rule exists because hooks must run in the same order on every render. That’s why: ❌ No hooks inside conditions ❌ No hooks inside loops ❌ No hooks inside nested functions 👉 Always call hooks at the top level. Once you understand this, React hooks feel much less “magical” and more predictable. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearnInPublic

🚨 Small React mistake… big headache 👇 I used to write code like this without even thinking: if (condition) return null; useEffect(() => { // logic }, []); It looks completely fine, right? I thought the same ❌ Then suddenly this error shows up: 👉 "Rendered fewer hooks than expected" Took me some time to realize what was actually wrong. React expects hooks to run in the same order every single render. But in this case: • First render → component returns early → useEffect doesn’t run • Next render → useEffect runs And boom 💥 React gets confused because the order changed. The fix is simple (but easy to forget): useEffect(() => { // logic }, []); if (condition) return null; Now hooks always run first, no matter what 👍 💡 Lesson learned: Never put hooks after a condition or inside it. Always keep them at the top. Have you ever hit this error? It’s one of those bugs that looks small but wastes a lot of time 😅 #react #nextjs #javascript #frontend #webdev

I made React slower trying to optimize it. Wrapped everything in useMemo. Added useCallback everywhere. Felt productive. Performance got worse. Here's what I didn't understand about re-renders 👇 4 things that trigger a re-render: > State change > Prop change > Parent re-renders (even if YOUR props didn't change) > Context update That third one is responsible of unnecessary re-renders I've seen in real codebases. The fix isn't memorizing APIs. It's this order: 1. Profile first Open React DevTools Profiler. Find the actual problem. Takes 2 minutes. 2. Wrap the right components in React.memo Not all of them. Only components that are expensive AND receive stable props. 3. Stabilise your functions with useCallback Without it - new function reference every render --> child always re-renders. Doesn't matter if you have React.memo. 4. useMemo for heavy calculations only Not for "this array map looks expensive." Only when Profiler proves it. The rule I follow now: Don't optimise what you haven't measured. One change in the right place beats 10 changes in the wrong ones. What's the most unnecessary useMemo you've ever written? 😄 #React #JavaScript #Frontend #WebDev

🧵 Most React devs use useState and useEffect every day — but have no idea what actually happens between setState() and the browser painting the screen. Yes, I know this is a common topic — but I've never seen it explained visually end-to-end in one place. I spent time going deep into the famous React Fiber architecture doc (12.8k stars on GitHub) and broke it all down into one simple carousel. Here's the full React Core pipeline — explained visually 👇 What's inside: ⚡ Why old React used to freeze the browser 🌳 What Virtual DOM actually is (hint: just plain JS objects) 🧵 How Fiber became React's custom call stack 🔍 How the Reconciler diffs trees to find changes ✅ Why the Commit phase can never be interrupted The #1 confusion I see: People think Virtual DOM = Fiber. They're completely different things. → Virtual DOM = a lightweight JS description of your UI → Fiber = the engine that processes that description → Reconciler = the diff algorithm living inside Fiber → Commit = the only moment React actually touches the real DOM Once this clicks, Concurrent Mode, Suspense, and useTransition all make sense. If this helped you, save it for your next React Core interview 🔖 Drop a comment — what part of React internals confused you the most? #ReactJS #JavaScript #WebDev #Frontend #ReactFiber #ReactCore #Programming #SoftwareEngineering #100DaysOfCode #DevCommunity

most React developers have too many useEffects. i did too. until i read this rule and couldn't unsee it: if you're using useEffect to sync state with another state you don't need useEffect. here's what i mean. (the pattern 1 .. i see everywhere) but pattern 2 give same result . no effect. no extra render cycle. useEffect is for syncing React with something outside React. - fetching data from an API - setting up a subscription - manually touching the DOM not for calculating values you could just... calculate. every unnecessary useEffect is a hidden render cycle your users pay for. before you write useEffect ask one question: am i syncing with something outside React, or am i just doing math? if it's math delete the effect. #reactjs #typescript #webdevelopment #buildinpublic #javascript

If your React component has isLoading, isError, isEmpty and isSuccess as separate props, you have a problem. I have written this exact code. More than once. It starts small. You add isLoading to show a spinner. Then isError for the error state. Then isEmpty because the empty state needs its own UI. Then isSuccess for the confirmation screen. Now you have four boolean props. And they fight each other. What happens when isLoading and isError are both true? Which one wins? Nobody knows. The component does not know either. You just hope the parent passes the right combination. This is Boolean Prop Hell. And it is sitting in most React codebases right now. Booleans feel simple but they hide impossible states. 4 boolean props = 16 possible combinations. Your component can only handle maybe 4 of them. The other 12 are bugs waiting to happen. Replace all of them with a single status prop. One value. One source of truth. No impossible combinations. The component always knows exactly what to render. This is how every serious component library handles it. There is a reason for that. When you find yourself adding another boolean prop, stop for a second. Ask: is this a new state or just a variation of an existing one? Most of the time you do not need a new prop. You need a better status model. Before and after in the screenshot below 👇 #ReactJS #Frontend #WebDev #JavaScript

🤔 useMemo and useCallback confuse almost every React developer. Here’s the clearest way to think about it 👇 🧠 Core idea: → useMemo = cache a VALUE → useCallback = cache a FUNCTION REFERENCE 💻 Example: // useMemo — don't recalculate unless deps change const total = useMemo(() => cart.reduce((sum, item) => sum + item.price, 0), [cart] ); // useCallback — don't recreate unless deps change const handleClick = useCallback(() => { doSomething(id); }, [id]); 🎯 When to use useCallback: When you pass a function to a React.memo’d child Without it 👇 ➡️ A new function is created every render ➡️ React.memo becomes useless ⚠️ Common mistake: Wrapping everything in useMemo / useCallback “just in case” 💡 Reality check: Both hooks have a cost Use them only when: ✔️ You’ve identified a real performance issue ✔️ You’ve actually measured it 📌 Rule: Premature optimization ≠ good engineering #ReactJS #Hooks #JavaScript #FrontendDev

Topic: React Batching – Why Multiple setState Calls Don’t Always Re-render ⚡ React Batching – Multiple setState Calls, One Render (But Not Always) Ever written this and expected 2 re-renders? 👇 setCount(c => c + 1); setCount(c => c + 1); But React only re-renders once 🤯 Why? 👉 Batching 🔹 What is Batching? React groups multiple state updates and processes them in a single render cycle. 🔹 Why It Matters ✔ Better performance ✔ Fewer unnecessary renders ✔ Smoother UI updates 🔹 Before React 18 😓 Batching worked only in: 👉 Event handlers Not in: ❌ setTimeout ❌ Promises 🔹 After React 18+ 🚀 Automatic batching works almost everywhere: ✔ setTimeout ✔ async/await ✔ API calls 🔹 Example setTimeout(() => { setA(1); setB(2); }); 👉 Still only one render in modern React 💡 Important Note If you need immediate update: flushSync(() => setCount(1)); 📌 Golden Rule React tries to do more work in fewer renders. 💬 Did batching ever confuse you while debugging state updates? #React #ReactJS #StateManagement #FrontendDevelopment #JavaScript #WebDevelopment #DeveloperLife

Most React developers know this rule: “Don’t call hooks inside loops or conditions.” But far fewer understand why. React doesn’t track hooks by variable name or location. It tracks them purely by call order during render. So internally, it’s closer to this mental model: • First useState → slot 0 • Second useState → slot 1 • Third useState → slot 2 Each hook call is mapped based on its position in the sequence. Now imagine this: if (isLoggedIn) { useState(...) } On one render the hook is called, on another it’s not. That shifts the entire sequence. React will still read: • “2nd hook → slot 1” But now it’s actually reading the wrong state. I built a minimal useState implementation (attached) to demonstrate this. You’ll notice: • Hooks are stored in an array • Each call consumes the next index • The index resets on every render • Everything depends on consistent ordering That’s the real rule: It’s not about avoiding conditions It’s about keeping hook calls in the same order every render Once that order changes, state association breaks. #React #JavaScript #Frontend #SoftwareEngineering