Error Boundaries in React: Prevent White Screens of Death

🗓️ Day 6 of 30 — Dynamic Routes & Params in Next.js Most real apps don't have fixed pages only. You need pages like: /blog/how-to-learn-nextjs /product/123 /user/zeeshan That's where Dynamic Routes come in. 📁 How it works in App Router: Instead of a fixed filename, you wrap it in square brackets: app/ └── blog/ └── [slug]/ └── page.tsx Now /blog/anything will match this route. 🎯 📦 Accessing the param: export default function BlogPost({ params, }: { params: { slug: string }; }) { return <h1>Post: {params.slug}</h1>; } Next.js automatically injects params — no extra setup needed. 🔁 What about multiple dynamic segments? app/shop/[category]/[productId]/page.tsx // params = { category: "shoes", productId: "42" } You can nest as many as you need. ⚡ Bonus — generateStaticParams: Want to pre-render dynamic pages at build time (for performance)? export async function generateStaticParams() { return [ { slug: "nextjs-basics" }, { slug: "dynamic-routes" }, ]; } This tells Next.js: "Hey, build these pages ahead of time." No waiting. Blazing fast. 🔥 💡 Key Takeaway: Dynamic routes let you build flexible, scalable pages without hardcoding every URL. One file → infinite pages. That's the power of Next.js. 📌 Follow for Day 7 tomorrow! What topic should I cover next? Drop it in the comments 👇 #NextJS #React #WebDevelopment #30DaysOfNextJS #Frontend #JavaScript #LearningInPublic

I wasted months building slow Next.js apps… Until I realized these 7 mistakes 👇 If you're using Next.js, this might save you a lot of time (and frustration): ❌ 1. Fetching everything on the client → Your app becomes slow + bad for SEO ✅ Fix: Use Server Components or getServerSideProps ❌ 2. Adding "use client" everywhere → You lose the power of server rendering ✅ Fix: Keep components server-first, only use client when needed ❌ 3. Using <img> instead of next/image → Poor performance & no optimization ✅ Fix: Always use built-in image optimization ❌ 4. Ignoring caching → Your app reloads data unnecessarily ✅ Fix: Use ISR or caching strategies ❌ 5. Huge bundle sizes → Slower load times = worse UX ✅ Fix: Use dynamic imports (next/dynamic) ❌ 6. Messy folder structure → Hard to scale projects ✅ Fix: Organize like a pro (app/, components/, lib/) ❌ 7. Not using API routes → Missing full-stack power ✅ Fix: Use Next.js as backend when possible 💡 Most developers don’t have a “skill problem” They have an architecture problem Fix these, and your apps will instantly feel faster and more professional. If you're working with Next.js — which mistake have you made before? Let’s learn together 👇 #NextJS #WebDevelopment #React #JavaScript #Frontend #Developers #Programming

🚀 Is Your React App Slowing Down? It Might Be Your Bundle Size One silent performance killer in React apps is a large JavaScript bundle. The bigger your bundle, the longer it takes to: Load ⏳ Parse 🧠 Execute ⚙️ And users? They feel it immediately. 💡 The Fix: Code Splitting + Lazy Loading Instead of shipping your entire app at once… 👉 Load only what the user needs, when they need it. 🧩 Code Splitting Break your app into smaller chunks. Each route or feature becomes its own bundle instead of one massive file. ⚡ Lazy Loading with React.lazy Load components on demand: const CityList = React.lazy(() => import("./CityList")); 🎯 Use with Suspense <Suspense fallback={<Spinner />}> <CityList /> </Suspense> 👉 Now your component loads only when needed, not upfront. 🛣️ Route-Based Splitting (Best Practice) Perfect for pages: const Home = React.lazy(() => import("./pages/Home")); const Product = React.lazy(() => import("./pages/Product")); Users only download the page they visit 👇 Not your entire app. 🔥 Why This Matters ✅ Faster initial load time ✅ Better performance on low-end devices ✅ Improved user experience ✅ Lower data usage 🧠 Pro Tip Don’t lazy load everything. 👉 Lazy load: Pages Heavy components (charts, maps, editors) 👉 Don’t lazy load: Small reusable components (buttons, inputs) 🧩 Final Thought Performance isn’t just about writing code… It’s about when your code loads. Ship less. Load smarter. Scale better. #React #WebPerformance #Frontend #JavaScript #CodeSplitting #LazyLoading #SoftwareEngineering

𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝𝐢𝐧𝐠 𝐥𝐚𝐲𝐨𝐮𝐭.𝐭𝐬𝐱 𝐢𝐧 𝐍𝐞𝐱𝐭.𝐣𝐬 Every page in your app has a navbar. Every page has a footer. Maybe a sidebar too. In React you wrap every single page manually with these shared elements. It works. But every time you add a new page you have to remember to wrap it again. 𝘕𝘦𝘹𝘵.𝘫𝘴 𝘴𝘰𝘭𝘷𝘦𝘴 𝘵𝘩𝘪𝘴 𝘸𝘪𝘵𝘩 𝘰𝘯𝘦 𝘧𝘪𝘭𝘦 — 𝘭𝘢𝘺𝘰𝘶𝘵.𝘵𝘴𝘹 ───────────────────── 𝐇𝐨𝐰 𝐢𝐭 𝐰𝐨𝐫𝐤𝐬: Everything you put inside layout.tsx automatically wraps every page inside that folder. Your navbar goes in layout.tsx once. Your footer goes in layout.tsx once. Every page gets them automatically. 𝘕𝘰 𝘳𝘦𝘱𝘦𝘢𝘵𝘪𝘯𝘨 𝘺𝘰𝘶𝘳𝘴𝘦𝘭𝘧. 𝘕𝘰 𝘮𝘢𝘯𝘶𝘢𝘭 𝘸𝘳𝘢𝘱𝘱𝘪𝘯𝘨. ───────────────────── 𝐈𝐭 𝐠𝐞𝐭𝐬 𝐛𝐞𝐭𝐭𝐞𝐫. You can have different layouts for different sections of your app. app/  layout.tsx → navbar + footer for every page  dashboard/   layout.tsx → sidebar for dashboard only   page.tsx When a user visits /dashboard they get: → Global navbar from root layout → Dashboard sidebar from dashboard layout → Page content from page.tsx 𝘛𝘩𝘳𝘦𝘦 𝘭𝘢𝘺𝘦𝘳𝘴. 𝘡𝘦𝘳𝘰 𝘳𝘦𝘱𝘦𝘵𝘪𝘵𝘪𝘰𝘯. ───────────────────── 𝐇𝐞𝐫𝐞 𝐢𝐬 𝐬𝐨𝐦𝐞𝐭𝐡𝐢𝐧𝐠 𝐭𝐡𝐚𝐭 𝐦𝐚𝐤𝐞𝐬 𝐚 𝐛𝐢𝐠 𝐝𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐜𝐞: Layouts do not re-render when you navigate between pages. In React when you move between pages everything re-renders from scratch. In Next.js the layout stays exactly where it is. Only the page content changes. → Smoother navigation → Better performance → No unnecessary re-renders 𝘛𝘩𝘪𝘴 𝘪𝘴 𝘸𝘩𝘺 𝘕𝘦𝘹𝘵.𝘫𝘴 𝘢𝘱𝘱𝘴 𝘧𝘦𝘦𝘭 𝘴𝘰 𝘧𝘢𝘴𝘵 𝘵𝘰 𝘯𝘢𝘷𝘪𝘨𝘢𝘵𝘦. Simple way to remember it: page.tsx → what changes per route layout.tsx → what stays the same across routes 𝘕𝘦𝘹𝘵 𝘱𝘰𝘴𝘵 → Server vs Client Components — the biggest perspective change when moving from React to Next.js. Have you ever accidentally repeated a navbar across 10 pages? 👇 #nextjs #reactjs #webdevelopment #frontenddevelopment #javascript

Your React App is Slow… and You Might Be the Reason Most developers use useMemo and React.memo but very few actually understand when NOT to use them ⚠️ I recently debugged a performance issue in a React dashboard. Everything looked optimized — but still, the UI was lagging. The reason? 👉 Memoization was used… but used wrongly. ⚡ Let’s break it down simply: 🔹 useMemo — Caches Calculations Use it when you have expensive computations Example: const filteredData = useMemo(() => { return data.filter(item => item.active); }, [data]); ✔ Prevents unnecessary recalculations ❌ Useless for cheap operations 🔹 React.memo — Stops Re-renders Wrap your component to avoid re-render when props don’t change const Card = React.memo(({ item }) => { return <div>{item.name}</div>; }); ✔ Great for large lists / heavy UI ❌ Useless if props change every render 🔥 The Real Problem Most people do this: Wrap everything in React.memo Add useMemo everywhere Hope performance improves 👉 Result: More complexity, same performance (sometimes worse) 💡 What Actually Works ✔ Use useMemo only for heavy calculations ✔ Use React.memo only when re-renders are costly ✔ Avoid passing new object/array references every render ✔ Measure performance before optimizing 🧠 The Mindset Shift Optimization is not about adding hooks It’s about removing unnecessary work 🚀 Final Takeaway Don’t optimize blindly. First understand: Why is it re-rendering? Is it actually slow? Then use the right tool. 👇 Curious — have you ever faced unnecessary re-renders in your app? #ReactJS #FrontendDevelopment #JavaScript #WebPerformance #ReactHooks #SoftwareEngineering #CleanCode #DevTips

🚀 Your React app might be re-rendering more than you think… and hurting performance. While working on large-scale applications, I kept running into unnecessary re-renders that slowed things down. Here’s a simple fix that made a big difference 👇 🔻 Without Optimization Every time the parent re-renders, the child re-renders too ❌ const Child = ({ onClick }) => { console.log("Child re-rendered"); return <button onClick={onClick}>Click Me</button>; }; function Parent() { const handleClick = () => { console.log("Clicked"); }; return <Child onClick={handleClick} />; } 🔻 Optimized Version import React, { useCallback } from "react"; const Child = React.memo(({ onClick }) => { console.log("Child re-rendered"); return <button onClick={onClick}>Click Me</button>; }); function Parent() { const handleClick = useCallback(() => { console.log("Clicked"); }, []); return <Child onClick={handleClick} />; } ✅ Child now re-renders only when props actually change ✅ Prevents unnecessary updates ✅ Improves performance in large component trees 💡 Key Insight: In React, functions are re-created on every render → which can trigger unwanted re-renders. Have you faced this issue in your projects? How do you handle performance optimization in React? 👇 hashtag #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #WebDevelopment #SoftwareEngineering

A single unhandled JavaScript error can unmount your entire React app — leaving users with a blank screen. Error Boundaries catch errors in the component tree and show a fallback UI instead: ```js class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.error(error, info); // Log to Sentry, etc. } render() { if (this.state.hasError) { return <h2>Something went wrong. Please refresh the page.</h2>; } return this.props.children; } } // Usage <ErrorBoundary> <Dashboard /> </ErrorBoundary> ``` Wrap major sections independently — sidebar, main content, widgets — so one failure doesn't take everything down. This is one of the simplest things you can do to make a React app feel production-ready. #ReactJS #JavaScript #Frontend #WebDevelopment

Ever wondered how apps handle scroll events, button spam, or rapid user actions efficiently? 🤔 That’s where Throttling in JavaScript comes in. 💡 Throttling ensures that a function executes at a controlled rate, no matter how many times an event is triggered. Instead of running a function hundreds of times (like during scrolling), throttling limits execution to once every fixed interval — making your app much more efficient ⚡ 📌 Why it matters: Improves performance Prevents unnecessary function calls Enhances user experience 🚀 Common use cases: Scroll events Window resizing Mouse movements API calls on frequent triggers 🧠 Key takeaway: Throttling is about limiting execution frequency, not delaying it (that’s debounce 😉). Currently exploring more performance optimization techniques to build smoother and scalable web apps. #javascript #webdevelopment #frontend #reactjs #performance #coding

🚀 Stop re-rendering your entire React app — here's why it's hurting you. One of the most common mistakes I see in React codebases is placing state too high in the component tree. When state lives at the top, every tiny update triggers a cascade of re-renders — even for components that don't care about that change. Here's what I do instead: ✅ Co-locate state — keep state as close to where it's used as possible. ✅ Use React.memo wisely — memoize components that receive stable props. ✅ Split context — separate frequently changing data from static config. ✅ Reach for useMemo & useCallback — but only when profiling confirms it helps. The result? A snappier UI, cleaner architecture, and fewer mysterious bugs. The React team built these tools for a reason — it's just about knowing when and where to apply them. 💬 What's your go-to trick for keeping React apps performant? Drop it in the comments — I'd love to learn from you! #React #WebDevelopment #Frontend #JavaScript #SoftwareEngineering

🪝: Our app was slow. Users were complaining. Here's the 5 things that fixed it (and the 1 thing that almost made it worse). Performance optimisation is one of those things that sounds abstract until you have actual users complaining. Here's what I've done in real projects that actually moved the needle: 1. CODE SPLITTING with React.lazy() → Don't load the whole app on first visit → Lazy load routes and heavy components → Real impact: cut initial load time by ~40% on a large project 2. MEMOISATION — but only where it matters → React.memo() for components that receive the same props often → useMemo() for expensive calculations → useCallback() for functions passed as props → WARNING: Over-memoising adds overhead. Profile first, optimise second. 3. OPTIMISED RENDER CYCLES → Identify what's causing unnecessary re-renders (React DevTools Profiler is your best friend) → Move state as close to where it's used as possible → Avoid storing derived data in state — calculate it 4. IMAGE OPTIMISATION → Lazy load images below the fold → Use appropriate formats (WebP where possible) → Set explicit width/height to avoid layout shifts 5. BUNDLE ANALYSIS → Use webpack-bundle-analyzer or Vite's rollup-plugin-visualizer → You'll be shocked what's in your bundle sometimes The thing that almost made it worse? Premature memoisation everywhere. We wrapped every component in React.memo before profiling. It actually slowed things down. MEASURE. THEN OPTIMISE. What's your go-to performance trick? #ReactJS #PerformanceOptimisation #FrontendDev #JavaScript #WebPerformance #CodeSplitting #ReactHooks