React App Freezes with Infinite Re-renders

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

🚀 Understanding CORS (Cross-Origin Resource Sharing) Simplified for Developers If you’ve ever seen this error in your browser 👇 “No 'Access-Control-Allow-Origin' header is present…” Congrats — you’ve met CORS 😅 Let’s break it down in the simplest way 👇 🔹 What is CORS? CORS is a browser security feature that controls how your frontend and backend communicate when they are on different origins. 👉 Example: Frontend: http://localhost:3000 Backend: http://localhost:5000 Different ports = different origin → 🚫 blocked by default 🔹 Why does it exist? To protect users from malicious websites making unauthorized requests using their browser. 🔹 How does it work? When your frontend makes a request: Browser sends the request with origin info Server responds with permission headers Browser decides: allow ✅ or block ❌ 🔹 Common Fix (Node.js / Express) import cors from "cors"; app.use(cors({ origin: "http://localhost:3000" })); 🔹 Key Points to Remember ✔️ CORS is enforced by the browser ✔️ Backend must allow the origin ✔️ Postman/cURL don’t care about CORS ✔️ Never blindly use * in production 🔹 Pro Tip 💡 If you're working with React / Next.js + API, always configure CORS early — it saves hours of debugging. 💬 Have you faced CORS issues before? What was the hardest bug you solved? #WebDevelopment #JavaScript #ReactJS #NextJS #Backend #FullStack #CORS #Programming

Today I hit an issue where my React app(served via django) wouldn't even render index.html(entry point for react application) At first, it looked like a frontend problem,then I noticed styles weren't loading either. But the real issue was deeper. Console error "Mark cross-site cookies as Secure to allow setting them in cross-site contexts" Root cause:The browser was blocking authentication cookies due to modern security policies. SameSite = None - Required Secure = True - Required for cross-site cookies Because the cookie was blocked: -User session failed -Backend response broke -Index.html didn't properly render -Static assets(CSS/JS) didn't load Key takeaway: Not all issues are frontend problems.Sometimes its the browser enforcing security at the HTTP layer. This is why understanding fullstack(Browser <-> HTTP <-> Backend) matters #SoftwareEngineering #Debugging #LearnSomethingNew

🚀 React Quick Revision Here are some important React concepts explained in short 🔹 1) Which is the entry file in React? 👉 In most React apps, the entry file is index.js / main.jsx 👉 It is responsible for rendering the root component: ReactDOM.createRoot(document.getElementById("root")).render(<App />); 🔹 2) What is the datatype of useEffect second argument? 👉 It is an Array useEffect(() => {}, [dependency]); 👉 This array is called the dependency array and controls when the effect runs. 🔹 3) useState syntax explanation (arrow understanding) const [state, setState] = useState(initialValue); 👉 Breakdown: const → variable declaration [state, setState] → array destructuring useState() → hook function setState → function to update state 👉 Arrow meaning: setState is a function → used to update value 🔹 4) Difference between Tag and Component 👉 Tag (HTML Element): <div>Hello</div> Built-in HTML element Lowercase naming 👉 Component (React): <MyComponent /> Custom reusable function Always starts with uppercase Returns JSX #ReactJS #FrontendDeveloper #JavaScript #WebDevelopment #Learning

Most React apps I inherit are shipping 2–3x more JavaScript than they need to. Not because the developers were careless. Because the defaults only take you so far. Vite and Webpack do a lot automatically but "automatic" breaks down fast once a codebase grows past one person. Imports pile up. Lazy loading never gets added. Third-party libraries get pulled in whole when you needed one function. Two things I almost always find misconfigured: ↳ Tree Shaking — not broken, just quietly undermined One CommonJS module, one barrel file exporting everything, one dynamic require() and the bundler can't eliminate unused code anymore. It silently includes it all. I've opened bundles where a date formatting library takes up more space than the entire app logic. ↳ Code Splitting — set up once, never revisited The initial route split exists. But the dashboard, the settings panel, the admin section, they're all loading on page one for users who will never see them. That's real kilobytes hitting real users on real 4G connections. On a recent e-commerce project, fixing both dropped the initial JS payload from 680kb to 290kb. The client saw a measurable drop in bounce rate on mobile within two weeks. If you're running a web product and haven't looked at your bundle in a while, there's almost certainly weight in there that shouldn't be. I do a free bundle audit for new clients. I'll pull up your build output, identify exactly what's bloating it, and give you a prioritized fix list. No vague recommendations. DM me if you want one.

Most React developers use keys wrong in lists. And it silently breaks their app. 😅 This is what everyone does: // ❌ Using index as key {users.map((user, index) => ( <UserCard key={index} user={user} /> ))} Looks fine. Works fine. Until it doesn't. The problem: If you add/remove/reorder items — React uses the index to track components. Index changes → React thinks it's a different component → Wrong component gets updated → Bugs that are impossible to debug. 💀 Real example: // You have: [Alice, Bob, Charlie] // You delete Alice // Now: [Bob, Charlie] // Index 0 was Alice, now it's Bob // React reuses Alice's DOM node for Bob // State gets mixed up! // ✅ Always use unique ID as key {users.map((user) => ( <UserCard key={user.id} user={user} /> ))} Rule I follow: → Never use index as key if list can change → Always use unique stable ID → Only use index for static lists that never change This one mistake caused a 2 hour debugging session for me. 😅 Are you using index as key? Be honest! 👇 #ReactJS #JavaScript #Frontend #WebDevelopment #ReactTips #Debugging

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

Here's how I would approach performance debugging in React. When something feels slow, the first thing I would open is the network tab. Because before forming any opinion, I want to see what’s actually being sent to the browser. - How much is loading. - What’s blocking the page. - What’s there that probably shouldn’t be. That’s usually where the obvious stuff shows up. For example, locale files for regions nobody uses. Modules loading upfront for routes the user hasn’t even visited yet etc. Once I have a rough picture, I would run Lighthouse. Not for the score, but to have a baseline I can track. Then comes the bundle analyser. It tells me which packages are heavy. Are there any duplicate packages I can get rid of? What could be lazy loaded but isn’t? If the load looks fine but the app still feels slow, I would open React DevTools Profiler. It can help with checking if any components are re-rendering when it shouldn’t. The order matters more than the tools. Most performance problems I’ve seen aren’t complicated. They’re just unmeasured. #React #Frontend #WebPerformance #JavaScript #TypeScript

🚨 JavaScript Memory Leaks — The Silent Performance Killer Ever had your app slow down over time… without any obvious reason? Chances are, you’re dealing with a memory leak. Let’s break it down 👇 🧠 What is a Memory Leak? A memory leak happens when your application keeps holding references to objects that are no longer needed, preventing JavaScript’s garbage collector from cleaning them up. Think of it like: 👉 Renting rooms in a hotel… but never checking out. ⸻ 🔥 Common Causes of Memory Leaks in JavaScript 1️⃣ Global Variables name = "Tanmay"; // Oops, accidentally global These stay in memory for the entire lifecycle of your app. ⸻ 2️⃣ Forgotten Timers & Intervals setInterval(() => { console.log("Running..."); }, 1000); If not cleared, they keep running forever. ⸻ 3️⃣ Detached DOM Elements let element = document.getElementById("btn"); document.body.removeChild(element); // Still referenced → not garbage collected ⸻ 4️⃣ Closures Holding References function outer() { let largeData = new Array(1000000).fill("🔥"); return function inner() { console.log("Still holding largeData"); }; } Closures can unintentionally “trap” memory. ⸻ 5️⃣ Event Listeners Not Removed window.addEventListener("resize", handleResize); If not removed, they stick around even when not needed. ⸻ ⚡ Why It Matters? • Slower performance 🐢 • Increased memory usage 📈 • Crashes in long-running apps 💥 ⸻ 🛠️ How to Prevent Memory Leaks ✔ Use let / const (avoid accidental globals) ✔ Clear timers → clearInterval, clearTimeout ✔ Remove event listeners when done ✔ Nullify unused references ✔ Use tools like Chrome DevTools → Memory tab ⸻ 💡 Pro Tip (Easy Memory Hook): 👉 “If something is STILL REFERENCED, it’s STILL IN MEMORY.” ⸻ As developers, we often optimize algorithms… But ignoring memory is like fixing speed on a car with a leaking fuel tank. 💬 Have you ever debugged a tricky memory leak? Share your story! #JavaScript #WebDevelopment #Frontend #Performance #CodingTips #SoftwareEngineering

Day 22: Error Boundaries in React In real-world applications, errors can happen anytime. A single error in one component can crash the entire UI. To handle this properly, React provides: Error Boundaries 📌 What are Error Boundaries? Error Boundaries are React components that catch JavaScript errors in their child component tree and display a fallback UI instead of crashing the whole app. ✅ Prevents complete app crash ✅ Displays fallback UI ✅ Improves user experience 📌 What Error Boundaries can catch? ✔ Errors in rendering ✔ Errors in lifecycle methods ✔ Errors in constructors of child components 📌 What Error Boundaries cannot catch? ❌ Errors inside event handlers ❌ Errors in async code (setTimeout, promises) ❌ Errors in server-side rendering 📌 Example of an Error Boundary import React from "react"; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, info) { console.log("Error:", error); console.log("Info:", info); } render() { if (this.state.hasError) { return <h2>Something went wrong!</h2>; } return this.props.children; } } export default ErrorBoundary; 📌 How to use it? import ErrorBoundary from "./ErrorBoundary"; import App from "./App"; function Main() { return ( <ErrorBoundary> <App /> </ErrorBoundary> ); } Now, if any child component crashes, the app will show: 👉 "Something went wrong!" 📌 Why Error Boundaries are important? 🔥 Used in production apps 🔥 Prevents blank screens 🔥 Helps debugging errors #ReactJS #ErrorBoundary #FrontendDevelopment #JavaScript #WebDevelopment #CodingJourney #LearnInPublic