useState vs useReducer in React: Centralizing Complex State

Hidden React Fact #1 – The Diffing Algorithm Most people say: “React is fast because of the Virtual DOM.” That’s only half the truth. My learning: React’s real performance magic comes from its Diffing Algorithm. When state or props change, React: - Compares the previous Virtual DOM with the new Virtual DOM - Figures out what exactly changed - Updates only those specific DOM nodes Instead of re-rendering the entire UI, React performs minimal and precise updates. This is what keeps even large React applications fast and responsive. Hidden fact most developers miss: React does not deeply compare everything. It follows smart assumptions: - Same component type → DOM is reused - Different type → DOM is destroyed and rebuilt - key helps React track list items efficiently This small but powerful algorithm is one of the core reasons behind React’s performance. Sharing my learnings as I dig deeper into React, Next.js, and TypeScript. #ReactJS #DiffingAlgorithm #VirtualDOM #FrontendDevelopment #WebDevelopment #NextJS #TypeScript #JavaScript #ReactLearning #HiddenFacts #LearnInPublic #DeveloperJourney

React, Non-React, and tRPC (Framework Layer) React solved a problem. People turned it into a default. React earned its place. Complex stateful interfaces needed structure, and React delivered that at scale. But frameworks are not just technical choices. They are organizational ones. React works best when: • UI complexity is real • State changes are frequent • Teams can afford tooling, abstractions, and conventions It struggles when: • Pages are mostly server-driven • State is simple • Cognitive overhead outweighs UI complexity This is why non-React frameworks keep resurfacing. Svelte reduces runtime complexity by moving work to compile time. Vue favors pragmatism and approachability. HTMX pushes logic back to the server and reduces JavaScript entirely. Then there is tRPC. Type-safe APIs without REST ceremony. Frontend and backend share contracts by design. That feels incredible early on. In production, it introduces a new tradeoff. Tighter coupling can reduce bugs, or amplify them, depending on discipline. The pattern I keep seeing is this. Framework choice reflects how teams communicate, not just how code is written. Tomorrow, I want to zoom out again. What Rust brings to web development, and why it is not hype. When did a framework choice start shaping your organization more than your code? #React #WebFrameworks #SystemsThinking #EngineeringCulture

When working with React, one important concept behind the scenes is Diffing. Diffing is the algorithm React uses to compare two Virtual DOM trees the previous one and the new one to figure out what exactly changed. Diffing is a key step inside the reconciliation process. 𝗛𝗼𝘄 𝗱𝗶𝗳𝗳𝗶𝗻𝗴 𝘄𝗼𝗿𝗸𝘀 React makes a few important assumptions to keep comparisons fast:  • Different element types produce different trees    If a <div> is updated to a <section>, React replaces the entire subtree.  • Same element type then update attributes only    If the type stays the same, React updates only the changed props.  • Keys help identify list items    Keys allow React to match elements between renders instead of recreating them. Why diffing matters  • Comparing entire DOM trees is expensive  • Diffing uses heuristics (finding good enough solution) to keep comparisons O(n) instead of costly deep comparisons  • Enables fast UI updates even in large applications 𝗞𝗲𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Diffing is not about finding every possible difference. It’s about finding good enough differences efficiently. This design choice is what makes React scalable and performant. #ReactJS #Diffing #VirtualDOM #Reconciliation #FrontendDevelopment #JavaScript #ReactInternals #WebPerformance #TechEducation 

⚛️ Why React State Doesn’t Update Instantly (And Why That’s a Good Thing) If you’ve ever written this and felt confused 👇 setCount(count + 1); console.log(count); // old value You’re not doing anything wrong. This is expected React behavior. 📌 Why React Doesn’t Update State Immediately React updates state asynchronously on purpose: • To batch multiple updates together • To reduce unnecessary re-renders • To keep the UI fast and predictable React controls when a component re-renders — not the line of code that calls setState. 🧠 What Actually Happens Internally 1️⃣ setCount() schedules a state update 2️⃣ React batches all pending updates 3️⃣ The component re-renders 4️⃣ The new state becomes available in the next render That’s why console.log still shows the previous value. ✅ The Correct Pattern (Very Important) When your next state depends on the previous one, always use a functional update: setCount(prev => prev + 1); This guarantees correctness, even with batching and async updates. 🔁 Real-World Example (Interview Favorite) setCount(count + 1); setCount(count + 1); // Result: +1 ❌ setCount(prev => prev + 1); setCount(prev => prev + 1); // Result: +2 ✅ React doesn’t re-read count between updates. Functional updates solve this by using the latest value React has. 🎯 Key Takeaway React state isn’t broken — it’s designed this way for performance. Once you understand this: ✔ bugs disappear ✔ interview answers improve ✔ async UI logic makes sense 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content. #ReactJS #JavaScript #FrontendDevelopment #ReactState #ReactHooks #WebDevelopment #FrontendInterview

React in a nutshell: State changes. UI updates. Everything else is optimization. Here’s the simple model behind all the complexity 👇 You write components that describe UI. Those components: • Receive data (props) • Manage their own data (state) When state or props change: → React re-renders the component → Compares changes with the Virtual DOM → Updates only what actually changed in the browser JSX is just the syntax for describing that UI state. Not HTML. Not templates. A snapshot of “this is what the UI should look like right now.” Hooks exist for one reason: To manage state and side effects in a predictable way. If you remember nothing else, remember this: • UI is a function of state • State flows down • Events flow up • Side effects are explicit When React feels hard, it’s usually because: – State lives in the wrong place – Effects are doing too much – Components are modeling logic instead of UI Once the mental model clicks, React stops feeling like magic and starts feeling boring — in a good way. What’s the simplest explanation of React you give to others? #ReactJS #WebDevelopment #Frontend #JavaScript #React19 #PerformanceOptimization #Coding #TechTrends #React #FrontendDevelopment #WebDevelopment #SoftwareEngineering #DevCommunity #Programming #TechCareers

Day 16 – JavaScript Challenge Built a Star Rating component using React, focusing on user interaction and state-driven UI updates. This project helped me understand how dynamic components respond to user actions in real time. What I implemented: *Interactive star rating system *Hover and click-based UI behavior *State management using React hooks *Reusable and scalable component design Step by step, these projects are strengthening my React fundamentals and confidence in building real-world UI components. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #ReactHooks #UIComponents #100DaysOfCode #DeveloperJourney

🚀 Day 52/100 – React Components | Functional Components Functional components are the foundation of modern React development. They promote cleaner code, better reusability, and seamless integration with hooks, making UI logic easier to manage and scale. By composing interfaces from small, focused components and passing data through props and children, applications become more flexible and maintainable. Thoughtful component organization further improves readability and long-term project structure. Key highlights: Creating functional components with clean syntax Component composition using reusable building blocks Using props and children for flexible rendering Organizing components for scalable project structure 💡 Pro Tip: Break your UI into small, reusable components early—scaling becomes much easier as the project grows. #Day52 #100DaysOfCode #FullStackDevelopment #ReactJS #JavaScript #FunctionalComponents #WebDevelopment #FrontendDevelopment #DeveloperJourney

One important performance concept in React is Batch Update. Batch updating means React groups multiple state updates into a single render, instead of re-rendering the UI after every individual update. 𝗪𝗵𝘆 𝗯𝗮𝘁𝗰𝗵𝗶𝗻𝗴 𝗶𝘀 𝗻𝗲𝗲𝗱𝗲𝗱 Updating the DOM is expensive. If React re-rendered after every setState call, even small interactions would feel slow. Batch updates solve this by:  • Collecting multiple state changes  • Triggering one reconciliation + one render  • Updating the DOM only once 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: setCount(count + 1); setTotal(total + 1); Here, Without batching, 2 renders and with batching, only one render 𝗞𝗲𝘆 𝘁𝗮𝗸𝗲𝗮𝘄𝗮𝘆 Batch updates are a core optimization strategy that helps React scale efficiently and understanding batching helps you write predictable, high-performance React code. #ReactJS #BatchUpdates #WebPerformance #FrontendDevelopment #JavaScript #ReactInternals #SoftwareEngineering #TechEducation

In modern frontend setups like React + Vite, there’s one fundamental thing to be aware of, 𝗧𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝗻𝗲𝘃𝗲𝗿 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝘀 𝗥𝗲𝗮𝗰𝘁. 𝗜𝘁 𝗼𝗻𝗹𝘆 𝘂𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁, 𝗖𝗦𝗦, 𝗮𝗻𝗱 𝗛𝗧𝗠𝗟. Everything we write in React components, hooks, imports has to be processed and bundled before the browser can execute it. This is where bundlers come into the picture. Tools like 𝙑𝙞𝙩𝙚, 𝙒𝙚𝙗𝙥𝙖𝙘𝙠, 𝙍𝙤𝙡𝙡𝙪𝙥, 𝙋𝙖𝙧𝙘𝙚𝙡 all solve the same core problem: • 𝘤𝘰𝘯𝘷𝘦𝘳𝘵 𝘮𝘰𝘥𝘦𝘳𝘯 𝘑𝘚 𝘢𝘯𝘥 𝘑𝘚𝘟 𝘪𝘯𝘵𝘰 𝘣𝘳𝘰𝘸𝘴𝘦𝘳-𝘧𝘳𝘪𝘦𝘯𝘥𝘭𝘺 𝘤𝘰𝘥𝘦  • 𝘩𝘢𝘯𝘥𝘭𝘦 𝘮𝘰𝘥𝘶𝘭𝘦 𝘪𝘮𝘱𝘰𝘳𝘵𝘴 𝘢𝘯𝘥 𝘥𝘦𝘱𝘦𝘯𝘥𝘦𝘯𝘤𝘪𝘦𝘴  • 𝘰𝘱𝘵𝘪𝘮𝘪𝘻𝘦 𝘢𝘴𝘴𝘦𝘵𝘴 𝘧𝘰𝘳 𝘱𝘦𝘳𝘧𝘰𝘳𝘮𝘢𝘯𝘤𝘦  • 𝘱𝘳𝘦𝘱𝘢𝘳𝘦 𝘢 𝘱𝘳𝘰𝘥𝘶𝘤𝘵𝘪𝘰𝘯-𝘳𝘦𝘢𝘥𝘺 𝘣𝘶𝘯𝘥𝘭𝘦 Vite feels faster during development because of how it serves modules, while tools like Webpack focus more on bundling everything together before serving. Once I understood this, a lot of things started making sense: • 𝘸𝘩𝘺 𝘥𝘦𝘷 𝘢𝘯𝘥 𝘱𝘳𝘰𝘥𝘶𝘤𝘵𝘪𝘰𝘯 𝘣𝘦𝘩𝘢𝘷𝘦 𝘥𝘪𝘧𝘧𝘦𝘳𝘦𝘯𝘵𝘭𝘺  • 𝘸𝘩𝘺 𝘣𝘶𝘪𝘭𝘥 𝘵𝘰𝘰𝘭𝘴 𝘢𝘳𝘦 𝘶𝘯𝘢𝘷𝘰𝘪𝘥𝘢𝘣𝘭𝘦  • 𝘸𝘩𝘺 𝘵𝘩𝘦 𝘣𝘳𝘰𝘸𝘴𝘦𝘳 𝘯𝘦𝘷𝘦𝘳 𝘴𝘦𝘦𝘴 “𝘙𝘦𝘢𝘤𝘵 𝘤𝘰𝘥𝘦” React builds the UI. 𝗕𝘂𝗻𝗱𝗹𝗲𝗿𝘀 𝗽𝗿𝗲𝗽𝗮𝗿𝗲 𝗶𝘁 𝗳𝗼𝗿 𝘁𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿. #ReactJS #Vite #Webpack #FrontendDeveloper #WebDevelopment #JavaScript #FrontendEngineering #Html #Css #ReactDeveloper #React #AI