React 19 Resource Loading with preload() and preinit()

💡 CSR vs SSR — Why this actually matters (real bug I faced in React) Recently, I encountered a small but interesting issue while working on a React project. I was using window.innerHeight to fix a scroll-related bug (triggering logic when the user scrolls down). It worked perfectly in my app… Until I realized something important 👇 👉 This logic would break in Server-Side Rendering (SSR). That made me revisit a fundamental concept: CSR vs SSR 🔹 What is Client-Side Rendering (CSR)? 👉 In CSR, the browser builds the UI How it works: Browser requests a page Server sends a minimal HTML file JavaScript loads React renders the entire UI in the browser Server → HTML (empty) + JS Browser → builds full UI 👉 This is why React apps (CRA/Vite) are called Single Page Applications (SPA) Environment: Runs inside browser 🌐 window, document are available ✅ Pros: Smooth navigation (no reloads) Great for dashboards, internal apps Cons: Slower initial load SEO is weaker 🔹 What is Server-Side Rendering (SSR)? 👉 In SSR, the server builds the UI first How it works: Browser requests a page Server runs React code Generates full HTML Sends ready UI to browser Browser displays instantly React hydrates (adds interactivity) Server → ready HTML Browser → shows immediately → hydration Environment: First run happens on server 🖥️ No browser APIs (window, document) ❌ After hydration → browser takes over ✅ Pros: Faster first load Better SEO Content visible immediately Cons: More complex setup Requires server/framework (like Next.js) ⚠️ The real issue I faced I used: window.innerHeight 👉 Works perfectly in CSR ❌ Breaks in SSR with error: window is not defined ✅ The fix Make sure browser-specific logic runs only on client side: (hydration) useEffect(() => { // safe to use window here }, []); 🎯 Key takeaway Not all JavaScript runs in the browser. Always know where your code executes — server or client. 🚀 Why this matters Prevents production bugs Essential for SEO-based apps (e-commerce, blogs) Important when using frameworks like Next.js Helps you write scalable, reliable code Understanding this small difference can save hours of debugging and make you a better developer. #React #JavaScript #Frontend #WebDevelopment #SSR #CSR #NextJS

🚨 Stop guessing. Start seeing your frontend errors. If you're building modern web apps and still relying on "console.log" for debugging in production… you're flying blind. That’s where Sentry comes in. Here’s a quick breakdown of how to configure Sentry in a frontend app (React example) and why it’s a game-changer 👇 --- 🔧 1. Install Sentry npm install @sentry/react @sentry/tracing --- ⚙️ 2. Initialize Sentry Add this in your entry file ("index.js" or "main.jsx"): import * as Sentry from "@sentry/react"; Sentry.init({ dsn: "YOUR_DSN_URL", integrations: [], tracesSampleRate: 1.0, // Adjust in production }); --- 🧠 3. Capture Errors Automatically Sentry automatically tracks: - Uncaught exceptions - React component errors - API failures (with tracing enabled) You can also manually log errors: Sentry.captureException(error); --- 📊 4. Use Error Boundaries (React) Wrap your app to catch UI crashes gracefully: <Sentry.ErrorBoundary fallback={"Something went wrong"}> <App /> </Sentry.ErrorBoundary> --- 🚀 5. Enable Performance Monitoring Track slow API calls, page loads, and bottlenecks: import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ integrations: [new BrowserTracing()], tracesSampleRate: 1.0, }); --- 🎯 Why Sentry? - Real-time error tracking - Full stack trace + user context - Session replay (see what users did before crash) - Alerts on Slack/Email --- 💡 Pro Tip: Always reduce "tracesSampleRate" in production (e.g., 0.2 or lower) to avoid noise and cost issues. --- In production, bugs don’t come with stack traces in your console. They come from users — frustrated ones. Sentry helps you catch them before they escalate. --- Have you integrated Sentry into your projects yet? What’s been your experience? #Frontend #React #JavaScript #Debugging #Sentry #WebDevelopment #Performance

𝐍𝐞𝐱𝐭.𝐣𝐬 𝐀𝐩𝐩 𝐑𝐨𝐮𝐭𝐞𝐫: 𝐀𝐫𝐞 𝐲𝐨𝐮 𝐨𝐯𝐞𝐫-𝐮𝐬𝐢𝐧𝐠 𝐂𝐥𝐢𝐞𝐧𝐭 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬? In modern web development, 'Performance' is the only currency that matters. With the shift to the Next.js App Router, the way we think about components has fundamentally changed. One of the biggest mistakes I see (and have learned from) is the tendency to sprinkle 'use client' everywhere. If everything is a Client Component, you're missing out on the core power of Next.js. 𝐖𝐡𝐲 𝐒𝐞𝐫𝐯𝐞𝐫 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐬𝐡𝐨𝐮𝐥𝐝 𝐛𝐞 𝐲𝐨𝐮𝐫 𝐃𝐞𝐟𝐚𝐮𝐥𝐭: 🔹 𝐙𝐞𝐫𝐨 𝐁𝐮𝐧𝐝𝐥𝐞 𝐒𝐢𝐳𝐞: Server components stay on the server. They don't send extra JavaScript to the client, making your pages blazing fast. 🔹 𝐃𝐢𝐫𝐞𝐜𝐭 𝐃𝐚𝐭𝐚𝐛𝐚𝐬𝐞 𝐀𝐜𝐜𝐞𝐬𝐬: You can fetch data directly inside your component without needing a separate API layer or useEffect hooks. 🔹 𝐁𝐞𝐭𝐭𝐞𝐫 𝐒𝐄𝐎: Content is rendered on the server, meaning search engines see your full HTML instantly. 𝐖𝐡𝐞𝐧 𝐝𝐨 𝐈 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐮𝐬𝐞 𝐂𝐥𝐢𝐞𝐧𝐭 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬? Only when you need interactivity: ✅ Event listeners (onClick, onChange) ✅ Using State or Effects (useState, useEffect) ✅ Browser-only APIs (like window or localStorage) 𝐓𝐡𝐞 𝐆𝐨𝐥𝐝𝐞𝐧 𝐑𝐮𝐥𝐞: Keep your Client Components at the 'leaves' of your component tree. Fetch data in the Server Component and pass it down. Architecture is about making choices that balance developer experience with user performance. What’s your strategy for managing the Server/Client boundary? Let’s talk architecture in the comments! 👇 #Nextjs #ReactJS #WebArchitecture #FullStackDeveloper #SoftwareEngineering #PerformanceOptimization

Your frontend stack is probably more outdated than you think (and it’s slowing you down). This update might quietly fix your entire workflow without you rewriting everything from scratch. route-bridge v0.0.4 is out, aligned with modern Next.js and Tailwind workflows. A focused release improving the frontend stack, developer experience, and overall project structure. What’s new Next.js App Router migration - Moved from Pages Router to App Router - Introduced `app/layout.tsx` and `app/page.tsx` - Removed legacy page-based structure Tailwind CSS v4 integration - Added modern utility-first styling setup - Configured via `postcss.config.mjs` - Replaced inline styles with Tailwind utilities Core upgrades - Next.js 14 → 15.3.1 - React 18 → 19.1.0 Cleaner architecture - Generated client moved to `src/generated/client.ts` - Added `@/*` path aliasing - Updated config and generation workflows - Migrated to `next.config.ts` (ESM) If you're on an older version, regenerating your project will bring everything up to date. What is route-bridge? A contract-driven tool that lets you define backend routes once (Express or Flask) and use them as fully typed functions in your frontend. No manual API wiring, no type drift. Try it out - npx create-route-bridge-app - pip install flask-route-bridge 📦 npm: https://lnkd.in/gDE3qUhS 📦 PyPI: https://lnkd.in/gWnVKp-y ⭐ GitHub: https://lnkd.in/gAUCn6AX If you find it useful, a GitHub star really helps support the project. Feedback and contributions are always welcome. #OpenSource #NextJS #React #TailwindCSS #TypeScript #Flask #WebDevelopment

⚛️ React vs ⚡ Next.js — This isn’t a comparison, it’s a design decision. Most discussions stay at “library vs framework.” The real difference shows up in **how your application behaves under real-world constraints**. 🔍 **Execution Model** React → Runs entirely on the client by default Next.js → Blends server + client rendering (SSR, SSG, streaming) ⚙️ **Rendering Strategy** React → You decide everything (CSR-first) Next.js → Rendering is a first-class concern (route-level decisions) 📦 **Architecture** React → You assemble the stack (routing, data fetching, optimization) Next.js → Opinionated defaults reduce decision overhead 🚀 **Performance** React → Depends on implementation quality Next.js → Built-in optimizations (code splitting, image handling, caching) 🌐 **Data Flow** React → Fetch on client, manage loading states Next.js → Fetch closer to the server, reduce client work 🧠 **What actually matters** * Where does your code execute? * When does data load? * What reaches the browser first? 💡 **Practical lens** If your app is interaction-heavy and controlled → React fits naturally If your app needs fast delivery, SEO, and predictable structure → Next.js aligns better There’s no “better tool” here — only better alignment between **problem, constraints, and execution model**. #ReactJS #NextJS #FrontendArchitecture #WebPerformance #JavaScript

Why does your page refresh the moment you hit submit? It is the browser's old-school behavior. In the pre-SPA era, browsers were designed to reload and send data to a server after a form submission. But in React, we handle that logic ourselves using state and APIs. This is where 'event.preventDefault()' comes in. By calling it in your 'onSubmit' handler, you tell the browser to stop that default reload. It allows your JavaScript to process the data, show a loading spinner, or update the UI without the user ever losing their place. It is the key to keeping your application feeling like a fast, seamless experience. It is not just for forms. You might use it on anchor tags to stop navigation when a link acts as a button, or on 'onContextMenu' to replace the standard right-click menu with a custom one. It is all about taking full ownership of the user experience and ensuring the browser doesn't step on your toes. #ReactJS #WebDevelopment #SoftwareEngineering #Javascript #Frontend #CodingTips

𝐓𝐡𝐢𝐧𝐤𝐢𝐧𝐠 `React.memo` 𝐦𝐚𝐤𝐞𝐬 𝐲𝐨𝐮𝐫 𝐜𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐩𝐞𝐫𝐟𝐞𝐜𝐭𝐥𝐲 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐭? 𝐓𝐡𝐢𝐧𝐤 𝐚𝐠𝐚𝐢𝐧. Many of us reach for `React.memo` to prevent unnecessary re-renders in child components. And it works wonders... most of the time. But here's the catch: `React.memo` performs a shallow comparison of props. If you're passing object, array, or function props, even if their internal values haven't changed, a new reference is created on every parent re-render. This new reference makes `React.memo` think the prop has changed, leading to an unwanted re-render of your memoized child component. ```javascript // Parent component re-renders: const data = { id: 1, name: 'Item' }; // New object reference! <MemoizedChild item={data} /> // Or with a function: const handleClick = () => console.log('clicked'); // New function reference! <MemoizedChild onClick={handleClick} /> ``` The solution? Pair `React.memo` with `useCallback` for functions and `useMemo` for objects/arrays. ```javascript // In Parent component: const memoizedData = useMemo(() => ({ id: 1, name: 'Item' }), []); const memoizedHandleClick = useCallback(() => console.log('clicked'), []); <MemoizedChild item={memoizedData} onClick={memoizedHandleClick} /> ``` This ensures your props maintain the same reference across renders, allowing `React.memo` to truly shine. It's a small detail, but crucial for optimizing complex applications. How aggressively do you memoize in your React apps? Share your go-to strategies! #React #ReactJS #FrontendDevelopment #WebPerformance #JavaScript

Search bars look simple… until you build one 😅 I added a search feature to my e-commerce project, but no matter what I typed, nothing showed. The UI worked. The input has been updated. But the results? Empty. The issue? I hadn’t connected the search input properly to my filtering logic. So I was typing… but nothing was actually being searched. Lesson: UI ≠ functionality. Just because something looks right doesn’t mean it’s working underneath. #FrontendDevelopment #ReactJS #BuildInPublic #JavaScript

📘 How React Re-renders Work (and How to Avoid Unnecessary Re-renders) 🔹 What is a Re-render? A re-render happens when React updates a component and reflects changes in the UI. This usually occurs when: ✔ State changes (useState) ✔ Props change ✔ Parent component re-renders 🔹Example const [count, setCount] = useState(0); <button onClick={() => setCount(count + 1)}>   Click Me </button> 👉 Every time count updates → component re-renders 🔹 Important When a component re-renders: 👉 All its child components also re-render (by default) Even if their data hasn’t changed ⚠️ 🔹 Real Problem Unnecessary re-renders can: ❌ Slow down performance ❌ Cause lag in large applications ❌ Trigger unwanted API calls 🔹 How to Avoid Unnecessary Re-renders ✅ 1. Use React.memo export default React.memo(MyComponent); Prevents re-render if props haven’t changed. ✅ 2. Use useCallback for functions const handleClick = useCallback(() => {   doSomething(); }, []); Prevents function recreation on every render. ✅ 3. Use useMemo for expensive calculations const result = useMemo(() => computeValue(data), [data]); Avoids recalculating values unnecessarily. ✅ 4. Keep State Minimal Only store what is necessary. Too much state = more re-renders. 🔹 Real-World Insight In large apps (dashboards, tables, filters): 👉 Poor render optimization can impact user experience heavily. Small optimizations here make a big difference. 👉 Re-renders are not bad—but unnecessary re-renders are. #ReactJS #FrontendDevelopment #Performance #JavaScript #WebDevelopment

12 Powerful Techniques to Optimize Your React Application 🔥 1. Image Optimization Use modern formats like WebP, compress images, and serve responsive sizes ⚡ 2. Route-Based Lazy Loading Load pages only when needed using React.lazy and Suspense 🧩 3. Component Lazy Loading Avoid loading heavy components upfront 🧠 4. useMemo Memoize expensive calculations 🛑 5. React.memo Prevent unnecessary re-renders 🔁 6. useCallback Avoid recreating functions on every render 🧹 7. useEffect Cleanup Prevent memory leaks and manage side effects properly ⏱️ 8. Throttling & Debouncing Optimize API calls and event handlers 📦 9. Fragments Reduce unnecessary DOM nodes ⚡ 10. useTransition Keep UI smooth during state updates 🧵 11. Web Workers Handle heavy computations in the background 🌐 12. Caching with React Query Reduce API calls and improve user experience 💡 Apply these techniques to take your React apps from average → production-grade performance 👉 Save this post for later 👉 Repost with your developer friends 👉 Follow Mohit Kumar for more content like this #ReactJS #WebDevelopment #Frontend #JavaScript #Performance #CodingTips #ReactDeveloper #MERN #Tech #MohitDecodes