Rahul Jha’s Post

This is subtle but causes real performance issues: ```js // New function reference every render — React remounts the child each time function ParentComponent() { function ChildComponent() { return <div>Child</div>; } return <ChildComponent />; } ``` Every time ParentComponent renders, React sees a brand new component definition. It unmounts and remounts the child — destroying its state and causing unnecessary DOM operations. The fix is simple — define components at the module level: ```js // Stable reference — React correctly reuses the component function ChildComponent() { return <div>Child</div>; } function ParentComponent() { return <ChildComponent />; } ``` This is one of those mistakes that's easy to make and hard to debug when you don't know what to look for. #ReactJS #JavaScript #Frontend #WebDevelopment

Rendering patterns in React and Next.js confused me for longer than I'd like to admit. It's not the difficulty, just that industry kept moving the goalposts. CSR was the future. Then SSR came back. Then static generation. Then server components. So I wrote the map I wish I'd had. The new blog covers: → Why CSR's waterfall problem is worse than most tutorials admit → What the hydration gap actually is (and the 3 things that go wrong inside it) → Why Next.js is effectively a code-split SPA despite doing server rendering → ISR's stale-while-revalidate model — and the silent failure nobody warns you about → What RSC actually sends to the browser (it's not HTML) → How to compose multiple strategies on a single page If you've ever nodded along to "just use SSR" without being fully sure why — this one's for you. [link in comments] #React #Nextjs #WebDevelopment #Frontend #JavaScript

🧠 React Doesn’t Update State Immediately (Even Inside the Same Function) Most people know state is async. But here’s the part many don’t realize 👇 Example const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); if (count === 0) { console.log("Still zero?"); } } You click the button. Expected: count = 1 But inside that function… 👉 count is still 0 🔍 Why? Because React doesn’t update state inside the current render cycle. It schedules the update and re-renders later. 🧠 The tricky part Even this won’t work: setCount(count + 1); setCount(count + 1); 👉 Final result = +1, not +2 ✅ Correct way setCount(prev => prev + 1); setCount(prev => prev + 1); Now React uses the latest value. 🎯 The Real Insight State inside a function is a snapshot, not a live value. 💥 Why this matters This causes: Unexpected conditions Wrong calculations Confusing bugs #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #WebDevelopment #CodingTips #LearningInPublic

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

HOT TAKE: "Next.js 15's server components? A love letter to full-stack devs or just a happy accident. Let’s break it down." Remember when client-side rendering was the go-to? Flashbacks of complex hydration issues, anyone? Enter Next.js 15, promising to make server components the new norm. Before you throw out that client-side hat, think about the trade-offs. Server components might make hydration a breeze, but what about interactivity? Not to mention, vibe coding just got a boost—sketch out an idea server-side, and boom, ready to go. But is it a game-changer or just hype? I'm curious: How are you tackling these changes in your projects? #WebDevelopment #TypeScript #Frontend #JavaScript

Your Next.js Module Federation setup builds without errors. Remotes appear to load. But components render blank. No errors in console. No stack traces. Nothing. The culprit? One missing environment variable: NEXT_PRIVATE_LOCAL_WEBPACK=true Here's what every Next.js MFE host needs: 1. NEXT_PRIVATE_LOCAL_WEBPACK=true — forces local webpack 5 instead of Next.js's bundled copy (no flag = silent Module Federation failure) 2. eager: false for ALL shared deps — eager: true causes SSR hydration mismatch errors 3. isServer ternary for Next.js remotes — picks /ssr/remoteEntry.js on server, /chunks/remoteEntry.js on client 4. output: 'standalone' — ~150MB Docker images instead of 500MB+ 5. ssr: false in next/dynamic — mandatory because remotes attach to window 6. enableImageLoaderFix: true — fixes next/image URLs from remote components 7. Node.js fallbacks (fs: false, stream: false, zlib: false) — browser build crashes without them The full guide walks through a complete production next.config.js with 18 code examples, covers React + Next.js mixed remotes, shared Redux singleton setup, PWA wrapper, and common mistakes. Read the full guide: https://lnkd.in/g6-EjNfE #MicroFrontend #NextJS #ReactJS #ModuleFederation #Webpack5 #WebDev #Frontend #JavaScript #TypeScript #Architecture #DesettiSrinu

💡 Mastering useEffect in React — Stop Guessing, Start Understanding If you’ve worked with React, you’ve probably used useEffect… and maybe struggled with it too. Here’s the simple way to think about it: 👉 useEffect lets you run side effects in your components That means anything that interacts outside the React render cycle: - API calls 🌐 - Subscriptions 🔔 - Timers ⏱️ - DOM manipulation 🧩 🔑 The 3 most important patterns: 1] Run once (on mount): useEffect(() => { console.log("Component mounted"); }, []); 2] Run when a dependency changes: useEffect(() => { console.log("Value changed"); }, [value]); 3] Cleanup (avoid memory leaks): useEffect(() => { const timer = setInterval(() => { console.log("Running..."); }, 1000); return () => clearInterval(timer); }, []); ⚠️ Common mistakes to avoid: Forgetting dependencies → leads to stale data bugs Adding unnecessary dependencies → causes infinite loops Ignoring cleanup → memory leaks & performance issues 🧠 Pro tip: If your useEffect feels complicated… it probably is. Try splitting it into smaller effects or rethinking your logic. ✨ useEffect isn’t hard — it’s just misunderstood. Once you get the mental model right, everything clicks. #React #JavaScript #WebDevelopment #Frontend

Another week, another lesson. Just wrapped up a Galaxy Generator for my Three.js sandbox. This build is all about particles and procedural generation. I used sine and cosine to calculate angles and bend straight lines into spiral arms, then applied power functions to naturally scatter the particles from a dense core to dispersed edges. To get the colors right, I used lerp to smoothly blend the hot inside with the cooler outside branches. I also wired up a control panel in the top right. You can mess with the particle count, branch structure, colors, and randomness to generate your own setup. Go tweak the settings and see what you can create here: https://lnkd.in/grJj9Azr #threejs #javascript #webgl #webdevelopment"

SSR vs RSC Think of online shopping: **SSR 🛒** You open a product page and get the fully prepared page from the server—but your browser still loads a lot of JavaScript to make it interactive. **RSC 📦** Only the necessary parts are sent to your browser, while heavy work stays on the server—making everything faster and lighter. 👉 SSR = full page, more JS 👉 RSC = less JS, smarter delivery #React #WebDevelopment #Frontend #JavaScript #NextJS #SoftwareEngineering #Programming #WebPerformance #TechExplained

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