React State Updates: Asynchronous Behavior

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 15/30 I changed the state… but the input field didn’t update 😐 <input defaultValue={name} /> `defaultValue` only sets the initial value. After that, the DOM controls the input — not React. So even when state changed, UI didn’t. Fix 👇 <input value={name} onChange={e => setName(e.target.value)} /> Now React state controls the input. In React: Uncontrolled input → unpredictable Controlled input → reliable Day 16 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 6/30 My React component rendered… nothing 😐 No error. No crash. Just empty UI. Code looked correct: fruits.map((fruit) => { <p>{fruit}</p> }) The mistake: I used `{}` but forgot `return`. Arrow functions with `{}` require an explicit return. React received “undefined”, so nothing was rendered. Fix 👇 fruits.map((fruit) => ( <p>{fruit}</p> )) Small brackets. Big difference. Day 7 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 10/30 I increased state twice… but it only updated once 😐 setCount(count + 1) setCount(count + 1) I expected +2 I got +1 Because React batches state updates. Both lines used the same OLD value of `count`. Fix 👇 setCount(prev => prev + 1) Functional updates always receive the latest state. This is very important in: counters, carts, likes, and real-time UI. Day 11 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 7/30 I typed inside an input… clicked “Add new item”… and the text moved to another field 😳 The bug? key={index} I used array index as React key. React does not track elements. React tracks keys. When list order changes, React reuses DOM nodes, so your input becomes a different item. Fix 👇 key={item.id} Stable key = stable UI. React warnings are not decoration… they are future bugs. Day 8 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 9/30 I built a form in React… and used: document.getElementById("name").value It worked. But later validation broke, reset didn’t work, and UI went out of sync 😐 Because React was not controlling the input. The DOM was. Correct way 👇 Use controlled input with state. <input value={name} onChange={e => setName(e.target.value)} /> In React: State should control UI not the DOM. This is why React forms become predictable and easier to debug. Day 10 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

⚡ Hot take: Most React devs over-use useCallback and useMemo. They're optimization tools — not default patterns. UseCallback: Memoizes a function reference. UseMemo: Memoizes a computed value. ✅ USE them when: • Passing callbacks to child components wrapped in React.memo • Expensive calculations (filtering 10k+ items) • Dependency arrays in useEffect ❌ AVOID them when: • The component re-renders anyway • The computation is cheap • You're just adding complexity for no gain Every memoization has a cost — memory + comparison overhead. Profile first. Optimize second. Always. #React #ReactJS #Frontend #JavaScript #WebDevelopment

📚 React Learning — State & useState Today I revised the concept of state and the useState hook in React. State acts as a component’s memory that stores dynamic data. Using useState, we can manage and update this data, and whenever the state changes, React automatically re-renders the component to reflect the updated UI. Strengthening the fundamentals step by step. #ReactJS #FrontendLearning #JavaScript #ReactConcepts #100DaysOfCode

Actually second “correct” example most of times is also a mistake. Using index as key is only fine when the array doesn’t change, is never reordered, filtered or its items don’t get deleted. It’s better to use unique IDs for such case.

Recently worked on improving a React UI by optimizing component rendering and state management. Learned how important proper state structure is when dealing with dynamic forms and lists. Tech used: React, Redux, JavaScript.

Day 20/60 ✅: React, Logic, and 4:30 AM Starts. ☕ Up at 4:30 for the Arsenal game, then straight into the code. Today was a recovery day after yesterday's struggle, so I kept it focused: 1. React Deep Dive: Understanding the component flow (top to bottom). 2. JS Logic: Revisiting If/Else statements. 3. Application: Crushing a few JS Challenge tests. A pretty good, productive day. Consistency is key. #JavaScript #ReactJS #Coding #WebDev #60daysofcode