CORS for Developers: Understanding Access-Control-Allow-Origin

I struggled with this React concept more than I expected… 👇 👉 Why are my API calls running twice? ⚙️ What you’ll notice You open your network tab and suddenly see this: api/me → called twice api/roles → called twice api/permissions → called twice Just like in the screenshot 👇 Same request, duplicated… again and again. ⚙️ What’s actually happening In React (development mode), if your app is wrapped in Strict Mode, React will run effects twice on purpose. useEffect(() => { fetch("/api/users") .then(res => res.json()) .then(setUsers); }, []); Even though it looks like it should run once… it doesn’t (in dev). 🧠 What’s going on under the hood React basically does a quick cycle: mount → unmount → remount Why? To catch hidden side effects To check if cleanup is handled properly To make sure your logic doesn’t break on re-renders So if your API call runs twice, React is just making sure your code can handle it. 💡 The important part This only happens in development Production behaves normally (runs once) Your side effects should be safe to run multiple times 🚀 Final thought If your network tab looks “noisy” like the screenshot, it’s not React being broken — it’s React being careful. And once you understand this, debugging becomes a lot less confusing. #React #Frontend #JavaScript #WebDevelopment #ReactJS #SoftwareEngineering

Interviewer: Your frontend is on localhost:3000 and backend is on localhost:8000. You open the browser console and see this: ❌ Access to XMLHttpRequest blocked by CORS policy What is this error and how do you fix it? What’s actually going on: Your browser is the bodyguard. 🛡️ It sees your frontend (port 3000) trying to talk to your backend (port 8000) and says “these are two different origins, I’m not allowing this without permission.” That’s CORS. Cross-Origin Resource Sharing. The browser isn’t being dramatic. It’s protecting your users. 3 ways to fix it: 1️⃣ Proxy — quickest fix for development Add to vite.config.js: server: { proxy: { '/api': 'http://localhost:8000' }} Browser now thinks everything is one origin. CORS never triggers. 2️⃣ Backend CORS middleware — the proper fix app.use(cors({ origin: 'http://localhost:3000' })) Your backend now gives written permission. Guard is happy. ✅ 3️⃣ Manual headers — when you need full control res.header('Access-Control-Allow-Origin', 'http://localhost:3000') res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE') The rules you must never break: ✅ Development → use proxy ✅ Production → whitelist specific origins only ❌ Never use origin: '*' in production — you’re leaving the bank vault open ❌ Never use a Chrome CORS extension as a “fix” — you’re just blindfolding the guard One line to remember forever: CORS is the browser asking for permission. Your backend grants it. Your proxy fakes it. Every senior developer has a CORS horror story. What was yours? 👇 #ReactJS #JavaScript #Frontend #WebDevelopment #CORS #DeveloperLife #InterviewPrep

You think this React code will increment the counter to 2? Maga Look again.👇🐘🐘🐘 function App() { const [count, setCount] = useState(0); const handleClick = () => { setTimeout(() => { setCount(count + 1); }, 1000); setCount(count + 1); }; return ( <> <p>{count}</p> <button onClick={handleClick}>Click</button> </> ); } Most developers say: 👉 “First +1 immediately, then +1 after 1 second → final = 2” ❌ Wrong 🧠 What actually happens setCount(count + 1) → updates to 1 setTimeout callback runs later… But it uses stale count = 0 (closure!) 👉 So it sets 1 again 🎯 Final Result Count = 1, not 2 🚨 The real problem This is not a React bug This is a JavaScript closure + event loop problem Functions capture old state Async callbacks don’t magically get updated values React state is snapshot-based, not live ✅ Fix setCount(prev => prev + 1); ✔ Always use functional updates when state depends on previous value ✔ Works correctly with async (timeouts, promises, events) 💡 Takeaway If your mental model is: 👉 “state updates automatically everywhere” You’ll ship bugs. If your mental model is: 👉 “state is captured at execution time” You’ll write predictable systems. This is the difference between writing code that works… and code that scales in production. USE prev maga 😍 setCount(prev => prev + 1); 🐘🐘🐘 #ReactJS #JavaScript #Frontend #WebDevelopment #Debugging #EventLoop

useEffect is the most abused hook in React. Here's what to use instead. I've reviewed hundreds of React codebases. useEffect is in the wrong place in about 60% of them. Not because developers are careless. Because nobody explained when NOT to use it. Here are the cases I see constantly — and what actually belongs there: // ❌ Case 1: Deriving state useEffect(() => { setFullName(`${firstName} ${lastName}`) }, [firstName, lastName]) // ✅ Just compute it const fullName = `${firstName} ${lastName}` No state. No effect. No re-render bug. // ❌ Case 2: Fetching data on mount (with App Router) useEffect(() => { fetch('/api/user').then(...) }, []) // ✅ Use a Server Component or TanStack Query // Data fetching is not a side effect in modern React // ❌ Case 3: Syncing two pieces of state useEffect(() => { if (selectedId) setDetails(getDetails(selectedId)) }, [selectedId]) // ✅ Derive during render const details = selectedId ? getDetails(selectedId) : null The React team has said explicitly: if you're using useEffect to sync state with other state, you probably have one piece of state too many. useEffect is for: → Connecting to external systems (WebSocket, third-party libraries, browser APIs) → Setting up subscriptions → Manual DOM manipulation That's mostly it. If you're using useEffect for anything that feels like when X changes, update Y, there's almost certainly a cleaner way. What's the strangest useEffect usage you've come across? #React #JavaScript #TypeScript #FrontendDevelopment #WebDevelopment

Most React devs know when to use useLayoutEffect. Almost none can explain why it behaves differently. The answer lives inside the commit phase. React's update cycle has two big stages: render (reconcile, diff, no DOM writes) and commit (apply changes, run effects). Commit itself splits into 3 sub-phases: → Before Mutation — read DOM snapshots before anything changes → Mutation — insert, update, remove DOM nodes → Layout — refs attached, useLayoutEffect fires here, synchronously useEffect never runs in the Layout pass. During reconciliation, React builds an Effect List — fiber nodes tagged with pending work. Fibers marked HookLayout flush during the Layout sub-phase. Fibers marked HookPassive get handed to the scheduler and run after the browser paints. React docs put it directly: "React guarantees that the code inside useLayoutEffect and any state updates scheduled inside it will be processed before the browser repaints the screen." Classic case where this matters: tooltip positioning. With useEffect, users catch a flicker — the tooltip renders in the wrong spot, then jumps. With useLayoutEffect, both renders complete before any pixel changes on screen. The tradeoff: useLayoutEffect blocks paint. Use it only when you need to measure or mutate the DOM before the user sees the frame. Data fetching, subscriptions, analytics — those belong in useEffect. One gotcha: useLayoutEffect is a no-op in SSR. React will warn you. Guard with typeof window !== 'undefined' or default to useEffect in universal code. #frontend #reactjs #javascript #typescript #frontenddevelopment #softwareengineering #webdevelopment

Stop spamming "use client" everywhere in Next.js — it's silently killing your React Server Components. 👇 Most Next.js devs are accidentally turning off React Server Components — and don't even know it. The moment you add "use client" to a parent component, every child inside it becomes a client component too. No async data fetching. No streaming. No zero-JS HTML. Just a bigger JS bundle landing in your user's browser. ❌ Why it hurts Adding "use client" to a parent component converts the entire subtree into a client bundle. Every child component, every import — all sent to the browser. You lose async data fetching, streaming, and zero-JS rendering on the server. Most devs add it to silence hydration errors without understanding the blast radius. ✅ The right mental model Push "use client" as deep as possible — to the leaf component that actually needs state or browser APIs (onClick, useState, useEffect). Keep pages and layouts as Server Components. This way Next.js can stream HTML fast, skip JS for static parts, and still hydrate only the interactive pieces. I've seen this on almost every App Router codebase — "use client" at the top of the page, layout, or a shared wrapper. One line, silently destroying the entire RSC architecture. The fix? Push "use client" to the leaf — the single component that actually uses useState, onClick, or a browser API. Keep everything above it on the server. Golden rule: "use client" is a boundary, not a decorator. Place it at the edge, not the root. #NextJS #ReactJS #WebDevelopment #JavaScript #TypeScript #ReactServerComponents #AppRouter #FrontendDeveloper #SoftwareEngineer #Programming #CleanCode #100DaysOfCode #WebDev #NextJS14 #React19 #ServerComponents #JSPerformance #FrontendArchitecture #CodeQuality #TechTips

Most developers don’t fully understand the global object in JavaScript… And honestly, I was one of them. In the browser, we use window. In Node.js, we use global. In web workers, we use self. Different environments… different ways to access the same thing. It felt messy. Then I came across something interesting: globalThis A single, standard way to access the global object — no matter where your JavaScript runs. console.log(globalThis); That’s it. No more guessing: "Am I in browser?" "Is this Node?" "Should I use window or global?" But here’s the real question… Why was this needed? Because JavaScript was never designed to run everywhere. But today, it does — browsers, servers, workers, everywhere. So globalThis is like a bridge that unifies all environments. Simple example: globalThis.appName = "Learning JS"; console.log(globalThis.appName); Works everywhere. No conditions. No hacks. My takeaway: Good JavaScript is not about memorizing features. It’s about understanding why they exist. And globalThis is a perfect example of that. Have you ever faced issues with window vs global? Would love to hear your experience. #JavaScript #NamasteJavaScript #NamasteDev #Frontend #WebDevelopment #Learning

⚛️ React Tip: When Should You Use useCallback? While working on React applications, one common performance issue developers face is unnecessary component re-renders. One hook that often comes up in this discussion is useCallback. But many developers (including me earlier) either overuse it or use it incorrectly. So here’s a simple way to understand it. 🔹 What does useCallback do? `useCallback` memoizes a function. This means React will reuse the same function instance unless its dependencies change. Example 👇 const handleClick = useCallback(() => { console.log("Button clicked"); }, []); Without `useCallback`, a new function is created every time the component re-renders. Most of the time this isn’t a problem. But it becomes important when passing functions to memoized child components. 🔹 Example scenario Imagine a parent component passing a function as a prop to a child component wrapped with `React.memo`. If the function reference changes on every render, the child component will also re-render unnecessarily. Using `useCallback` helps keep the function reference stable, preventing those extra renders. 🔹 When should you actually use it? ✅ When passing callbacks to memoized components ✅ When the function is a dependency in another hook ✅ When optimizing large component trees ⚠️ When NOT to use it: • For every function in your component • When there is no performance issue • Just because someone said it improves performance 💡 One important lesson I’ve learned: Optimization should be intentional, not automatic. React already does a lot of work under the hood. Use hooks like `useCallback` only when they actually solve a problem. Curious to hear from other developers 👇 Do you use `useCallback` often, or do you prefer optimizing only after profiling? #reactjs #frontenddevelopment #javascript #webdevelopment #reacthooks #softwareengineering #coding

8 JavaScript Mistakes That Make Your Web Apps Slow and Unstable ⚠️ Small mistakes in JavaScript can cause performance issues, memory leaks, security risks, and poor scalability. Here are some common issues I see in many projects 👇 ❌ Not declaring variables properly ❌ Blocking the event loop ❌ Using too many global variables ❌ Weak type checking (== instead of ===) ❌ Poor error handling ❌ Using eval() ❌ Not cleaning up Hooks ❌ Improper routing structure Professional developers usually fix these by 👇 ✅ Using let and const correctly ✅ Writing non-blocking async code ✅ Avoiding global scope pollution ✅ Using strict comparisons ✅ Implementing proper error handling ✅ Avoiding dangerous functions like eval() ✅ Cleaning up side effects in Hooks ✅ Using structured routing The difference between average and great developers is often these small best practices. Which mistake do you see the most in projects? 1️⃣ Global variables everywhere 2️⃣ Blocking event loop 3️⃣ Bad routing structure 4️⃣ Memory leaks from hooks #javascript #webdevelopment #programming #frontenddeveloper #codingtips #softwaredevelopment #webdev #developercommunity #javascriptdeveloper #programminglife

⚛️ You can finally delete <Context.Provider> 👇 For years, the Context API introduced a small but persistent redundancy. We defined a Context object, yet we couldn’t render it directly—we had to access the .Provider property every single time. ⚛️ React 19 removes this requirement. ❌ The Old Way: UserContext.Provider It often felt like an implementation detail leaking into JSX. Forget .Provider, and your app might silently fail or behave unexpectedly. ✅ The Modern Way: <UserContext> The Context object itself is now a valid React component. Just render it directly. Why this matters ❓ 📉 Less Noise — Cleaner JSX, especially with deeply nested providers 🧠 More Intuitive — Matches how we think: “wrap this in UserContext” 💡 Note: Note: <Context.Consumer> is also largely dead in favor of the use hook or useContext. Starting in React 19, you can render <SomeContext> as a provider. In older versions of React, use <SomeContext.Provider>. #React #JavaScript #WebDevelopment #Frontend #React19