Understanding React HOC: Enhancing Components with Extra Capabilities

Your React component is leaking memory and you have no idea. I just read about this pattern in the docs. I realized I was fighting the React lifecycle for months 😅 The problem? Race conditions from uncleared async requests. When you fetch data on state change: - User changes profile 10 times in 1 minute - 10 API requests fire - Only the LAST response updates state - Previous 9 complete but state is already changed - Memory leak + stale data Most devs skip cleanup. Most tutorials show incomplete examples. Result? Wasted requests, stale data, memory leaks. #React #JavaScript #Performance #WebDevelopment

🚨 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

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

One React trick that saved me hours last week: Instead of useState + useEffect to fetch data, try a custom hook. Before: 15 lines of messy fetch logic inside the component. After: One line — const { data, loading } = useProfile(userId) Clean. Reusable. Testable. This is the kind of thing that separates junior from mid-level React devs. Are you using custom hooks in your projects? Share your favorite one. #ReactJS #WebDevelopment #JavaScript #FrontendDeveloper #CodeTips

🚀 Day 1 of Backend Journey — Serving Static Files in Express.js Today I learned how to serve static files like HTML, CSS, JavaScript, and images using Express.js. 📁✨ 🔹 Key Learnings: - What static files are and why they matter - Using "express.static()" middleware - Organizing assets inside a public folder - Linking static files with EJS templates 💡 Insight: Serving static files efficiently improves performance and reduces server load, making applications faster and more scalable. 📌 Every small concept is a step toward becoming a better backend developer! #BackendDevelopment #NodeJS #ExpressJS #WebDevelopment #LearningJourney #100DaysOfCode

🛡️ Day 9 of 30 — Middleware in Next.js Most devs don't touch middleware until they need it. That's a mistake. It's one of the most powerful features in Next.js. What is Middleware? Middleware runs before a request is completed — at the edge, before your page or API route even loads. You can use it to: ✅ Redirect unauthenticated users ✅ Rewrite URLs dynamically ✅ Set/read cookies & headers ✅ Protect routes globally The basics: // middleware.ts (root of your project) import { NextResponse } from 'next/server' import type { NextRequest } from 'next/server' export function middleware(request: NextRequest) { const token = request.cookies.get('token') if (!token) { return NextResponse.redirect(new URL('/login', request.url)) } return NextResponse.next() } export const config = { matcher: ['/dashboard/:path*', '/profile/:path*'], } Key things to know: 🔹 File must be named middleware.ts at the project root 🔹 matcher controls which routes it runs on — be specific! 🔹 Runs on the Edge Runtime — no Node.js APIs like fs 🔹 Use NextResponse.redirect(), .rewrite(), or .next() Pro tip: Don't put heavy logic in middleware. Keep it fast — it runs on every matched request. Auth guards, A/B testing, locale redirects — middleware handles all of it before the page loads. 🚀 What are you using middleware for in your projects? Drop it below 👇 #30DaysOfNextJS #NextJS #WebDevelopment #LearningInPublic #Frontend #JavaScript #React #Pakistan

🔥 Stale Closure in React — A Common Bug You Must Know Ever faced a situation where your state is not updating correctly inside setTimeout / setInterval / useEffect? 🤯 👉 That’s called a Stale Closure --- 💡 What is happening? A function captures the old value of state and keeps using it even after updates. --- ❌ Example (Buggy Code): import { useState, useEffect } from "react"; function Counter() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); // ❌ Always logs 0 (stale value) }, 1000); }, []); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); } 👉 Why? Because the closure captured "count = 0" when the effect first ran. --- ✅ Fix (Correct Approach): useEffect(() => { const id = setInterval(() => { setCount(prev => prev + 1); // ✅ always latest value }, 1000); return () => clearInterval(id); }, []); --- 🎯 Key Takeaway: Closures + async code (setTimeout, setInterval, event listeners) = ⚠️ potential stale state bugs --- 💬 Interview One-liner: “Stale closure happens when a function uses outdated state due to how closures capture variables.” --- 🚀 Mastering this concept = fewer bugs + stronger React fundamentals #ReactJS #JavaScript #Frontend #InterviewPrep #Closures #WebDevelopment

I was repeating the same logic in every component… and it started getting messy 😅 Yes, seriously. For a long time, I was doing this in React: useEffect(() => { fetchData(); }, []); const [data, setData] = useState(); const [loading, setLoading] = useState(false); Same pattern… in multiple components ❌ ⚠️ This caused: • Code duplication • Hard-to-maintain components • Bigger, messy files 💡 Then I changed my approach: Instead of repeating logic everywhere, 👉 I created a custom hook 🧠 Example: useFetch(url) Handles: • API call • Loading state • Error handling ✅ Result: • Cleaner components • Reusable logic • Easier maintenance 🔥 What I learned: If you’re repeating the same logic… you’re probably missing a custom hook. #ReactJS #FrontendDeveloper #JavaScript #CodingTips #WebDevelopment

🚀 My Bug Tracker project is now live. I built this full stack application using ASP.NET Core Web API for the backend and React + TypeScript for the frontend, and it is now deployed and working in production. It includes JWT authentication, protected routes, CRUD operations for projects and issues, filtering, search, pagination, and a responsive UI for both desktop and mobile. 🔗 Live Demo: https://lnkd.in/enRSkrQX 🔗 Backend Repository: https://lnkd.in/eBjD295S 🔗 Frontend Repository: https://lnkd.in/e66nk76i 🔗 Backend API: https://lnkd.in/ebTfyaGx This project helped me reinforce both practical backend concepts and the process of taking an application from development to deployment. Now that it is live, my next focus is on interview preparation and strengthening the fundamentals behind the stack I used. #SoftwareDevelopment #BackendDevelopment #CSharp #DotNet #ReactJS #PostgreSQL #TypeScript #JuniorDeveloper #LearningInPublic