Mastering React Routing with React Router

Most Next.js developers are still using Pages Router in 2026. Here's why that's a mistake. 🧵 When Next.js released the App Router I ignored it for months. "Too complex. Pages Router works fine." Then I built a production app with App Router... And I never went back. The real difference? Pages Router: ❌ No Server Components ❌ Slower data fetching ❌ Being phased out slowly App Router: ✅ Server Components by default ✅ Fetch data directly in components ✅ Built-in layouts ✅ The future of Next.js If you're starting a new project in 2026 there's only one right answer. App Router. Every time. Are you still on Pages Router? Tell me why 👇 #NextJS #ReactJS #WebDevelopment #FullStackDeveloper #TypeScript #JavaScript #Frontend #100DaysOfCode #BuildInPublic #LahoreTech

Most Next.js developers are still using Pages Router in 2026. Here's why that's a mistake. 🧵 When Next.js released the App Router I ignored it for months. "Too complex. Pages Router works fine." Then I built a production app with App Router... And I never went back. The real difference? Pages Router: ❌ No Server Components ❌ Slower data fetching ❌ Being phased out slowly App Router: ✅ Server Components by default ✅ Fetch data directly in components ✅ Built-in layouts ✅ The future of Next.js If you're starting a new project in 2026 there's only one right answer. App Router. Every time. Are you still on Pages Router? Tell me why 👇 #NextJS #ReactJS #WebDevelopment #FullStackDeveloper #TypeScript #JavaScript #Frontend #100DaysOfCode #BuildInPublic #LahoreTech

Most React devs are still making users wait for the server. 🙄 I was too. Until I found `useOptimistic` in React 19. **What changed:** → UI updates the moment user clicks → No spinner, no waiting, no freeze → If server fails - React auto rolls back to previous state → Zero extra code for error handling This is exactly how Instagram, X, and LinkedIn build their like buttons. The difference between a "good app" and a "feels native" app is this one pattern. `useOptimistic` ships with React 19. No extra install. If you're still on the old pattern - try this today. Drop a 🔥 if this was new to you! What pattern do you use for instant UI feedback? Let me know 👇 #React19 #ReactJS #useOptimistic #Frontend #WebDevelopment #JavaScript #FullStackDeveloper

🗂️ Does your app load 10,000 items at once? That's a performance disaster waiting to happen. Learn how pagination works, why it matters, and build a real React component from scratch — step by step. 🚀 Full guide is live on hamidrazadev.com — link in bio! #webdev #reactjs #javascript #frontenddevelopment #programminglife #developerlife #hamidrazadev

⚡ React Performance Optimization Tip Your React app is slow? This might be the reason 👇 Unnecessary re-renders. Solution → React.memo const Child = React.memo(({data}) => { console.log("render") return {data} }) Now component only re-renders when props change. 💡 Use when: • Large list rendering • Heavy components • Performance issues Small optimization → Big performance gain 🚀 I'm sharing daily React tips while preparing for new opportunities. Follow for more React learning. #reactjs #performance #frontenddeveloper #mernstack #javascript

🔥 Are you using React 19 to its full potential—or just scratching the surface? With every new release, React evolves. But how do you keep up and truly master the latest features, best practices, and real-world patterns? Our latest blog breaks down the essentials of React 19 so you can confidently build cleaner, faster, and future-ready apps. Ready to level up your React game? Discover what most developers miss👇 https://lnkd.in/dmZmEM5b #React #WebDevelopment #JavaScript

🚀 Excited to share my latest React project — Theme Toggle App using Context API In this project, I implemented a Light & Dark Theme Switcher using React Context, making the theme state available across the entire application. ✨ Key Features: • Default app starts in Light Theme • Click on theme icon to switch between Light / Dark Mode • Theme icon updates dynamically based on current mode • Global state management using Context API • Smooth UI update across all routes • Invalid URLs automatically redirect to Not Found Page 🛠 Tech Stack: React.js | Context API | CSS | React Router This project helped me understand how to manage global state efficiently and build a better user experience with theme customization. 🔗 GitHub Repository:https://lnkd.in/gJsC7i65 🌐 Live Demo:https://lnkd.in/gtSwdemt #ReactJS #ContextAPI #WebDevelopment #FrontendDevelopment #JavaScript #UIDesign #CodingJourney #SoftwareDeveloper

In React, you can show or hide components based on conditions 3 ways to do it....  1. 𝗶𝗳/𝗲𝗹𝘀𝗲 if (isLoggedIn) return <Dashboard /> else return <Login /> 2. 𝗧𝗲𝗿𝗻𝗮𝗿𝘆 𝗼𝗽𝗲𝗿𝗮𝘁𝗼𝗿 {isLoggedIn ? <Dashboard /> : <Login />} 3. && 𝗼𝗽𝗲𝗿𝗮𝘁𝗼𝗿 {isLoggedIn && <Dashboard />} Use && when you only want to show something and have nothing to show otherwise. Use ternary operator when you have two options. This is how every login/logout, loading spinner, and error message works in a React app #reactjs #webdevelopment #javascript #MERN

🧵 Day 14 of 40 — React System Design Series Every React auth system needs one thing to hold it all together: An AuthContext that the whole app trusts. Today I built it properly — the complete production pattern: → isLoading starts as true (the one line that prevents the login flash) → getMe() on mount — session survives page refreshes → useCallback on login/logout — no unnecessary re-renders → isAuthenticated boolean — clean API for consumers → How it connects to the Login page, Navbar, and ProtectedRoute Full breakdown with TypeScript + React Router v6 👇 https://lnkd.in/gC7Xxxxu #ReactJS #SystemDesign #Auth #Frontend #LearningInPublic

🚀 Built a React App Using useReducer ⚛️ I recently built a "React Quiz" app to strengthen my understanding of state management in React. 🧠 Key learnings: Managing complex state with useReducer Handling async data (loading questions from a mock API) Managing loading, error, and ready states ⚡ Answer selection & smooth navigation between questions Tracking progress 📊 Completing & restarting the quiz 🔁 Implementing a countdown timer using useEffect ⏱️ 💡 This project helped me understand when to use useReducer over useState for more structured and scalable state logic. 🔗 GitHub Repo: https://lnkd.in/g8VeyXhi Feedback is welcome 🙌 #React #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #LearningByBuilding