Understanding React Server Components & Flight Protocol

𝗦𝗺𝗮𝗹𝗹 𝗪𝗶𝗻, 𝗕𝗶𝗴 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴, 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗥𝗼𝘂𝘁𝗶𝗻𝗴 𝗚𝗼𝘁𝗰𝗵𝗮 Today I was working on an email navigation feature, the kind where you click through a list and the URL updates to reflect the selected item. The data was already fetched. No need to reload the page. I just wanted to update the URL silently. Simple, right? 𝗔𝘁𝘁𝗲𝗺𝗽𝘁 (𝗮𝘀 𝗺𝗲𝗻𝘁𝗶𝗼𝗻𝗲𝗱 𝗶𝗻 𝗻𝗲𝘅𝘁 𝗷𝘀 𝗱𝗼𝗰𝘀): window.history.replaceState(null, '', newPath); Didn't work. 𝗪𝗵𝗮𝘁 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝗲𝗱: window.history.replaceState( { ...window.history.state, as: newPath, url: newPath }, '', newPath, ); 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆: Sometimes the fix is one line. Finding that one line? That's the real work.😆 #NextJs #WebDevelopment #Frontend #JavaScript #React #TIL #SoftwareEngineering

I just committed the last JavaScript code for AuthKit. After debugging today, I don’t think I’ll be writing any more JS for v1.0.0. Feels good getting to this point. Over the past few days I’ve been building AuthKit — a modular authentication toolkit for Laravel. The goal is simple: move authentication beyond basic scaffolding into a structured and testable architecture. Instead of authentication logic living inside controllers, AuthKit structures flows through dedicated actions that return DTO result objects, which are then resolved into either API responses or web redirects. This keeps authentication logic clean, reusable, and much easier to test. The core backend architecture and frontend runtime are now complete. If you'd like to experiment with it early, you can clone the repository and test it locally (it's not yet on Packagist). One small caveat for now: the default styling layer isn’t finished, so you’ll need to provide your own CSS while testing. Planning to release v1.0.0 next week. Repo: https://lnkd.in/eztMKU-z Would love feedback from Laravel developers. #Laravel #PHP #OpenSource #SoftwareEngineering #WebDevelopment

## What actually happens when you call an API in React? They call an API… and don’t realize it’s running multiple times. I made the same mistake. At first, I thought: “Just fetch data inside the component and display it.” But React doesn’t work like that. Every time your component re-renders, your API call can run again. And again. And again. That means: • Unnecessary network requests • Slower performance • Confusing bugs The fix? useEffect(). It controls when your API runs — not just how. Here’s the actual flow: Component renders useEffect triggers API call is made Data returns State updates Component re-renders (once, correctly) My biggest realization: React isn’t just about writing code — It’s about understanding the lifecycle behind it. If you ignore that, small mistakes become big problems. #reactjs #javascript #webdevelopment

🚀 The Event Loop: Browser vs. Node.js 🌐 Ever wondered how JavaScript stays "fast" despite being single-threaded? The secret sauce is the Event Loop. But depending on where your code runs, the Event Loop wears different hats. 🎩 Here is a quick breakdown of how it works on the Client-side vs. the Server-side: 🖥️ 1. JavaScript in the Browser (Client-Side) In the browser, the Event Loop is all about User Experience. The Goal: Keep the UI responsive. How it works: When a user clicks, scrolls, or fetches data, these actions are added to a task queue. The Flow: The Event Loop constantly checks if the Call Stack is empty. If it is, it pushes the next task from the queue to the stack. This ensures that heavy tasks don't "freeze" the screen while rendering. ⚙️ 2. Node.js (Server-Side) In Node.js, the Event Loop is the backbone of High-Concurrency servers. The Goal: Handle thousands of simultaneous requests without blocking. The Heavy Lifters: For "blocking" tasks like File System (FS) or Database operations, the Event Loop offloads the work to Worker Threads (via the Libuv library). The Callback Cycle: 1. The Event Loop registers a callback for an operation. 2. It hands the task to a worker thread. 3. Once the worker is done, it sends the result back to the queue. 4. The Event Loop picks it up and executes the final callback to send the response. 💡 The Bottom Line Whether you are building a snappy UI or a scalable backend, understanding the Event Loop is the difference between a laggy app and a high-performance system. #JavaScript #NodeJS #WebDevelopment #Programming #SoftwareEngineering #TechTips #react #express #next

Ever wondered how Node.js works behind the scenes? 🤔 In my latest blog, I broke down Node.js internals in a simple way — focusing on the 3 core components: 🔹 V8 Engine (executes JS & manages memory) 🔹 Libuv (handles async tasks & event loop) 🔹 Bindings (connects V8 with system-level operations) Understanding this flow really changes how you look at things like fs.readFile() or setTimeout() 💡 👉 Read the full blog here: https://lnkd.in/g-AbBCiy I’d really appreciate your thoughts, feedback, or any experiences you’ve had while working with event propagation 😊 Hitesh Choudhary | Piyush Garg | Akash Kadlag #JavaScript #WebDevelopment #Blog #NodeJs #Cohort2026 #LearnInPublic #libuv #v8

JavaScript Closures are confusing… until they’re not ⚡ Most developers memorize the definition but struggle to actually understand it. Let’s simplify it 👇 💡 What is a closure? A closure is when a function 👉 remembers variables from its outer scope even after that scope is finished 🧠 Example: function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const fn = outer(); fn(); // 1 fn(); // 2 fn(); // 3 ⚡ Why this works: inner() still has access to count even after outer() has executed 🔥 Where closures are used: • Data hiding • State management • Event handlers • Custom hooks in React #JavaScript #FrontendDeveloper #ReactJS #CodingTips #WebDevelopment

Ever wonder how your modern ES6+ React code actually runs on older browsers? 🤔 It’s not magic—it’s Babel. ⚙️ I recently wrote a deep dive into how this transpiler acts as the backbone of the React ecosystem, ensuring our code stays clean while remaining universally compatible. If you’ve ever used an arrow function or a spread operator, you’re relying on this "secret engine" every single day. 🚀 In my latest blog post, I break down: 🔹 The "Under the Hood" Mechanics – What’s actually happening during transpilation. 🔹 React’s Best Friend – Why Babel is indispensable for modern UI development. 🔹 The Compatibility Bridge – How it translates cutting-edge syntax into something every browser understands. 🌉 Understanding your tools is the first step toward mastering your craft. I'd love to hear your thoughts on the role of transpilers in the comments! #ReactJS #BabelJS #JavaScript #WebDevelopment #CodingLife #SoftwareEngineering #TechBlog 👇 Read the full deep dive here:

🚨 I used index as key in React… …and spent HOURS debugging something that made no sense. Everything looked fine at first. Until I: → deleted an item → reordered the list 💥 Suddenly: ❌ Wrong data was displayed ❌ UI behaved randomly ❌ Bugs I couldn’t explain I kept checking my logic. Turns out… the bug wasn’t my logic. 👉 It was THIS: {data.map((item, index) => ( <div key={index}>{item.name}</div> ))}💡 Problem: React uses keys to track identity. When you use index: → identity = position ❌ → not the actual item So when the list changes… React gets confused 😵 ✅ Fix: {data.map((item) => ( <div key={item.id}>{item.name}</div> ))}👉 Stable key = stable UI 💡 Lesson: If your UI feels “random”… check your keys before your logic. Follow me for more such tips ✍️ 👨💻 #ReactJS #Frontend #JavaScript #SoftwareEngineering

🚀 Debugging JWT Auth — A Small Mistake That Cost Me Hours Today I ran into a classic authentication issue while working with NestJS + Next.js — and it’s a good reminder of how small misunderstandings can break the whole flow. 🔍 The Problem After login, I noticed that my localStorage was saving: token: "string" Instead of an actual JWT like: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... ⚠️ Clearly something was off. 🧠 The Root Cause My backend response looked like this: { "success": true, "data": { ...userDetails }, "token": "REAL_JWT_TOKEN" } But in my frontend, I made this mistake: const userData = res.data.data; localStorage.setItem("token", userData.token); // ❌ wrong 👉 The token wasn’t inside data — it was at the root level. ✅ The Fix const userData = res.data.data; const token = res.data.token; localStorage.setItem("token", token); localStorage.setItem("userData", JSON.stringify(userData)); 🔥 Debug smarter, not harder. #WebDevelopment #NestJS #NextJS #JWT #Authentication #Debugging #FullStack #JavaScript

The React pattern that eliminated 80% of my useEffect calls Most useEffect calls are just bad data derivation. Here is the derived state pattern that cleaned up years of accumulated complexity in my React components. Full breakdown (6 min read) → https://lnkd.in/gsS5RKC4 #ReactJS #Frontend #JavaScript #TypeScript #WebDev #UIEngineering