Fixing CORS Policy Error in React App

I kept running into CORS errors while connecting my frontend to the backend… At first, it felt like a backend issue — but it wasn’t. Here’s what I understood 👇 CORS (Cross-Origin Resource Sharing) is a browser security mechanism. It restricts requests when the frontend and backend are on different origins (protocol, domain, or port). For example: Frontend → http://localhost:3000 Backend → http://localhost:5000 Even though both are “localhost”, they are treated as different origins. So the browser blocks the request ❌ 👉 Unless the server explicitly allows it using headers like: Access-Control-Allow-Origin 💡 Key Learnings: • CORS is enforced by the browser, not the backend • It exists to prevent unauthorized cross-origin access • Proper server configuration is required to allow requests • Understanding CORS makes debugging much easier Once I understood this, those “mysterious” errors finally made sense. Still learning and improving my backend fundamentals 🚀 #BackendDevelopment #CORS #WebDevelopment #NodeJS #JavaScript

React protects you by default, until you give the browser something to interpret. I was talking with a junior developer about XSS and sanitization in React. He was thinking along the usual lines: → React escapes user input → avoid dangerouslySetInnerHTML → sanitize user input when rendering HTML That alone doesn’t make the system secure. They only hold while the data stays in a safe context. And break the moment untrusted input reaches an interpreted context without strict control. → HTML (dangerouslySetInnerHTML) React stops escaping, and the browser parses it as markup → URLs (href, src) React passes it through, and the browser treats it as a navigation target → CSS (network-capable values like url(...)) React applies it, and the browser may trigger requests And at a broader level: → when data is used in a context without being validated for how it will be interpreted That’s the difference: → knowing how something works → understanding where it stops working In practice, I’ve seen systems with multiple protections in place. But the input layer was broken, making everything else irrelevant. What’s the last edge case you ran into while learning something new? #WebSecurity #FrontendDevelopment #SoftwareEngineering #ReactJS

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

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

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

⚛️ 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

🚨 **Common React Bug : Form Handling Issues (Controlled vs Uncontrolled Components)** One of the most frequent mistakes developers face in React is improper handling of form inputs. 👉 **The Problem** Inputs behave unexpectedly—values don’t update, or React throws warnings like: *"A component is changing an uncontrolled input to be controlled."* This usually happens when there’s confusion between **controlled** and **uncontrolled** components. --- 👉 **Example of the Issue** ```jsx function Form() { const [name, setName] = React.useState(); return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } ``` ⚠️ Problem: The initial state is `undefined`, making the input uncontrolled at first, then controlled later. --- 👉 **The Solution** Always initialize state properly: ```jsx function Form() { const [name, setName] = React.useState(""); return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } ``` Now the input is **controlled from the start**, and React handles it predictably. * Controlled = React manages the input state * Uncontrolled = DOM manages the input state * Don’t mix both in the same input #ReactJS #WebDevelopment #Frontend #JavaScript

The first time I hit a CORS error… I was so lost 😅 API works perfectly in Postman ✅ Same thing in browser → error ❌ I kept changing my code, even switched browsers… nothing worked. Then I realized — it’s not my code, it’s the browser. What is CORS? It’s just the browser being protective. If your frontend calls an API from another domain, the browser asks: “Hey… is this allowed?” If the server doesn’t say yes → blocked. Why Postman works? Because Postman doesn’t care about CORS 😄 Browsers do. Fix? Not in frontend. You need to allow it from the backend using headers. Once this clicked, CORS stopped feeling scary. If you’re stuck on this right now… yeah, we’ve all been there 😄 #CORS #WebDev #Frontend #Backend #APIs #JavaScript #Debugging #DevLife

“We just added login…” - and a week later we refactored half of the frontend. Ran into a very familiar situation recently. Backend “slightly” changed: now a user is not just a token, but also a context — company, branch, role, permissions. Sounds reasonable. In reality, your frontend starts behaving like a teenager: random 403s “no permissions” here “context not selected” there and sometimes… it works (no idea why) We had two options: 👉 patch it with if-statements 👉 hardcode a few checks 👉 “we’ll fix it later” And end up with: a fragile mess no one wants to touch Instead, we did something boring but right: enabled cookie sessions (withCredentials) introduced a proper flow after login (login → context → work) moved permissions to context (not login) normalized API responses implemented real logout (not just “delete token and pray”) Here’s the funny part: 👉 nothing changed visually 👉 users didn’t notice anything But under the hood: one user can belong to multiple companies roles differ per branch backend actually enforces access frontend stops guessing and starts following rules Big takeaway: the most important changes are the ones users never see And yeah, the classic: “Let’s just ship the feature, we’ll fix it later” No 🙂 Sometimes you need to lay the rails first, otherwise the train will move… just not where you expect. P.S. If your frontend starts acting weird after “small backend changes” - it’s probably not a bug. It’s architecture reminding you it exists 🙂 https://hahazen.com/ #frontend #webdevelopment #softwareengineering #javascript #reactjs #nextjs #api #backend #fullstack #webdev #architecture #systemdesign #rbac #authentication #authorization #cookies #session #apiintegration

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