React setState asynchronous update process explained

Why does your 'ref' return 'null' the moment you wrap your input in a custom component? It is one of those React quirks that trips up even experienced developers. By default, refs do not behave like props. They are treated as special instances that stop at the component boundary to protect encapsulation. This is exactly why we need 'forwardRef'. It acts as a bridge that allows a parent component to reach through a child and grab a direct handle on an internal DOM node. The most practical application is building a reusable UI library. If you create a custom 'Input' or 'Button' component, your parent component might need to call '.focus()' or '.scrollIntoView()'. Without 'forwardRef', your parent is just holding a reference to a React internal object, not the actual HTML element. Another real-world scenario involves Higher-Order Components (HOCs). If you wrap a component with a 'withAnalytics' or 'withTheme' wrapper, that wrapper will 'swallow' the ref by default. By using 'forwardRef' in your HOC implementation, you ensure the reference passes through the wrapper and lands on the component that actually needs it. It is about making your abstractions transparent and ensuring that the parent component maintains the control it expects over the physical DOM. Using this pattern sparingly is key. It is an escape hatch for those moments where declarative state isn't enough to manage physical browser behavior. It keeps your component interfaces clean while providing the necessary access for specialized UI interactions. #ReactJS #SoftwareEngineering #Frontend #WebDevelopment #Javascript #CodingTips #CodingBestPractices

React recap: 𝗨𝘀𝗶𝗻𝗴 𝗶𝗻𝗱𝗲𝘅 𝗮𝘀 𝗮 𝘂𝗻𝗶𝗾𝘂𝗲 𝗜𝗗 𝘄𝗮𝘀 𝗺𝘆 𝗯𝗶𝗴𝗴𝗲𝘀𝘁 𝗺𝗶𝘀𝘁𝗮𝗸𝗲 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁. At first, it felt harmless. items.map((item, index) => ( <Component key={index} /> )) Everything worked… until it didn’t. Here’s what I learned the hard way: • When the list changes (add/remove/reorder), React gets confused • Components don’t re-render correctly • State sticks to the wrong items (this one is scary) • Bugs appear that make zero sense at first I spent hours debugging something that wasn’t even obvious. The real problem? Index is not a stable identity. So what should we do instead? ✔️ Use a unique ID from your data (database ID, UUID, etc.) ✔️ Generate stable IDs (not on every render) ✔️ Think of keys as identity, not position Bad: key={index} Good: key={item.id} Simple change. Massive difference. One small mistake can quietly break your entire UI logic. If you're using index as key — fix it before it fixes you. #React #Frontend #WebDevelopment #JavaScript #CodingLessons

React 19's `useActionState` hook is the simplest way to cut form boilerplate in half. If you're still writing React 18-style form handlers with separate `useState` calls for loading, errors, and results — this hook consolidates all of that into one line. Key points: 🔹 **One hook replaces three `useState` calls** — `useActionState` returns `[state, dispatch, isPending]` in a single call 🔹 **No `e.preventDefault()` needed** — wire the action to `<form action={formAction}>` and React handles the rest 🔹 **Automatic pending state** — `isPending` is managed by React, no manual `setIsPending(true/false)` 🔹 **Works with Server Functions** — seamless integration with React Server Components 🔹 **Multiple independent actions** — use multiple `useActionState` calls in one component, each managing its own state Before (React 18): ```jsx const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [result, setResult] = useState(null); // handleSubmit with try/catch/finally ``` After (React 19): ```jsx const [state, formAction, isPending] = useActionState( async (prev, formData) => { // Your async logic return { success: true }; }, initialState ); ``` The hook is stable in React 19 and ready for production. Full deep dive with code examples here: https://lnkd.in/eHMp_Z-X What's your experience been? Have you migrated to `useActionState` yet? #react #javascript #webdevelopment #frontend #react19

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

1,200 lines of form code deleted from a production dashboard — and the forms actually work better now.   That's what happens when you swap React Hook Form for React 19's built-in Actions + useActionState on the right kind of project.   Here's the thing most tutorials won't tell you: this isn't a blanket "RHF is dead" story. It's a "know when to use what" story.   → Simple CRUD forms (login, contact, settings)? useActionState + useOptimistic handles it natively. No extra deps, no bundle cost, instant optimistic UI out of the box.   → Complex dynamic forms (nested arrays, conditional fields, 50+ field wizards)? React Hook Form still wins. React 19 has no built-in validation beyond HTML attributes — and managing deeply nested field arrays without RHF is pain you don't need.   → The middle ground is where it gets interesting. Forms with 5–15 fields and basic Zod validation? You can go either way. We leaned native and didn't look back.   The real unlock isn't "drop the library." It's that React's form primitives finally work well enough that you can evaluate each form on its own complexity instead of reaching for RHF by default on every project.   Three questions before you refactor: 1. Do any of your forms have dynamic field arrays? 2. Are you using RHF's validation resolver pattern heavily? 3. Is your form state shared across multiple components?   If you answered "no" to all three, you might be carrying a dependency you don't need.   What's your team's take still all-in on React Hook Form, or have you started migrating simpler forms to Actions?   #ReactJS #FrontendDevelopment #WebDev #JavaScript #React19 #FormHandling #DeveloperProductivity

My form was getting harder to manage… as it grew 😅 Yes, seriously. At first, everything was simple. But as inputs increased, handling state became messy. 💡 I was doing this: const [value, setValue] = useState(""); <input value={value} onChange={(e) => setValue(e.target.value)} /> 👉 Controlled input ⚠️ Problem: • Too many states • More re-renders • Hard to manage large forms 💡 Then I explored another approach: 👉 Uncontrolled components 🧠 Example: const inputRef = useRef(); 👉 Access value when needed 💡 Difference: Controlled → React manages state Uncontrolled → DOM manages state ✅ Result: • Better flexibility • Cleaner logic (for some cases) • Easier form handling 🔥 What I learned: Not every input needs to be controlled. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

⚛️ React Concept: useState Explained with Real Examples The "useState" hook allows you to add state management to functional components. It helps you store and update data that changes over time — like user input, counters, or UI state. Basic syntax: const [state, setState] = useState(initialValue); 🔹 "state" → current value 🔹 "setState" → function to update the value 📌 Common use cases: • Counter functionality • Form inputs • Toggle UI (show/hide) 📌 Best Practice: Always update state using the setter function and avoid directly mutating state. #reactjs #frontenddevelopment #javascript #webdevelopment #softwareengineering

Most React performance issues don’t come from heavy components. They come from Context API used the wrong way. Many developers create one large context like this: User + Theme + Settings + Permissions + Notifications Looks clean. Feels scalable. But every time one value changes, all consuming components re-render. Even components that don’t use the updated value. That means: Theme changed → User components re-render User updated → Settings components re-render This creates silent performance problems in large applications. Why? Because React checks the Provider value by reference, not by which field changed. New object reference = Re-render. How to fix it: ✔ Split contexts by concern ✔ Use useMemo() for provider values ✔ Use useCallback() for functions ✔ Use selector patterns for larger applications Context API is powerful, but bad context design creates expensive re-renders. Good performance starts with good state architecture. Don’t just use Context. Use it wisely. #ReactJS #ContextAPI #JavaScript #FrontendDevelopment #PerformanceOptimization #WebDevelopment #ReactDeveloper #SoftwareEngineering

Your Webpack config builds fine. You deploy 11 micro frontends. One remote loads — the rest crash with "Invalid hook call." The problem isn't your components. It's React loading twice. Module Federation shares JavaScript modules at runtime — but only if you configure shared dependencies correctly. Without singleton: true, each MFE bundles its own React. Two React instances = two hook state trees = instant crash. Here's what actually changes between local and production configs: 1. Remote URLs: https://localhost:4002/remoteEntry.js (local) vs /products/remoteEntry.js (production) 2. publicPath: Full URL with port locally, relative path in production — mismatch = 404 on every chunk 3. splitChunks: Disabled locally (false), enabled in production with vendor code splitting 4. The bootstrap pattern: index.js must call import("./bootstrap") — skip this and shared deps fail before they negotiate 5. remoteEntry.js is NOT your bundle — it's a ~5KB manifest that registers window.Products for on-demand loading 6. singleton + requiredVersion: First-loaded version wins, requiredVersion only warns — keep all MFEs on the same version I wrote a complete guide covering host config, remote config, all exposed modules, shared dependency negotiation, how remoteEntry.js actually works, and the 5 most common errors with exact fixes. Read the full guide: https://lnkd.in/gqznGXHz #WebpackModuleFederation #MicroFrontend #ReactJS #Webpack5 #ModuleFederation #WebDev #FrontendArchitecture #JavaScript #Monorepo #WebpackConfig #SrinuDesetti

🔥 Stale Closure in React — A Common Bug You Must Know Ever faced a situation where your state is not updating correctly inside setTimeout / setInterval / useEffect? 🤯 👉 That’s called a Stale Closure --- 💡 What is happening? A function captures the old value of state and keeps using it even after updates. --- ❌ Example (Buggy Code): import { useState, useEffect } from "react"; function Counter() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); // ❌ Always logs 0 (stale value) }, 1000); }, []); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } 👉 Why? Because the closure captured "count = 0" when the effect first ran. --- ✅ Fix (Correct Approach): useEffect(() => { const id = setInterval(() => { setCount(prev => prev + 1); // ✅ always latest value }, 1000); return () => clearInterval(id); }, []); --- 🎯 Key Takeaway: Closures + async code (setTimeout, setInterval, event listeners) = ⚠️ potential stale state bugs --- 💬 Interview One-liner: “Stale closure happens when a function uses outdated state due to how closures capture variables.” --- 🚀 Mastering this concept = fewer bugs + stronger React fundamentals #ReactJS #JavaScript #Frontend #InterviewPrep #Closures #WebDevelopment