Avoid using index as key in React list

How Does React's useState Really Work? The useState hook is often the first thing a developer learns in modern React. It seems like magic: a simple function call that gives a normally stateless function a persistent memory. But how does it really work? How can a value persist between renders when the entire component function is being re-run? The answer is that React stores your component's state outside of the component itself. Let's pull back the curtain on this mechanism. A React functional component is, at its core, just a JavaScript function. In normal JavaScript, when a function finishes executing, its local variables are discarded. If React components followed this rule, they could never hold onto state. So, when you write const [count, setCount] = useState(0);, the count variable isn't a normal local variable. It's a value that React is managing on your component's behalf. For every component instance on the screen, React maintains an internal data structure. You can think of this as a private object for your compon https://lnkd.in/gCJPBRjT

Still writing all your logic inside your React components? I’ve been there, and it gets messy fast. My "aha" moment came when a component hit 400 lines. It was a tangled mess of `useState` and `useEffect` hooks for fetching data, handling form state, and managing a timer. The real problem? It was impossible to test or reuse any of it. 🧠 The solution was simple: custom hooks. By extracting logic into functions like `useUserData()` or `useFormInput()`, my components became lean, readable, and focused only on the 𝐕𝐈𝐄𝐖. It’s a pattern that feels like a superpower for clean code. ⚡️ If you’re repeating stateful logic, extract it. Your future self will thank you. What small change made a huge impact in your workflow? #ReactJS #FrontendDevelopment #DeveloperTips

Hey, you literally just described JavaScript Fatigue without knowing the name 😂 You said: “Every time I come back to a project, the framework changed. Hooks → Server Components → App Router → now this new thing? I just wanna build stuff, not relearn every 6 months.” That’s framework churn — the #1 symptom of JS Fatigue. It’s not you. It’s the ecosystem moving at warp speed. How fast? 2016: jQuery → Angular → React 2018: Create React App → Redux → Context API 2020: Hooks → Suspense → Concurrent Mode 2023: Server Components (beta) 2024: App Router becomes default in Next.js 2025: React Forget (compiler) in alpha, signals rising You blink → your stack is legacy. Core causes of JS Fatigue Tool overload: Webpack → Vite → Bun → Turbopack… pick one or die trying Config hell: 12 files just to change a port Dependency bloat: node_modules = 2 GB for “hello world” Tutorial drift: Every blog uses a different stack. Nothing works. Abstraction debt: Starters with 5k lines you don’t understand. 2025 update: Is JS Fatigue over? Better: Vite starts in 50 ms Next.js does SSR + SSG + edge in one folder Tailwind + shadcn = UI in minutes git push → live on edge Still real: Data flow across server/edge/client = new PhD Monorepos + pnpm + changesets = config 2.0 “Just learn signals” tweets every week Debugging across runtimes = nightmare Verdict: Tools got simpler. Concepts got deeper. How I fight JS Fatigue (and actually ship) 1. One stack, zero drama 2. Embrace “boring” 3. A blog doesn’t need islands, suspense, or compilers. 4. Learn principles, not trivia 5. Caching > framework version. Accessibility > hype. 6. Say no to FOMO Let others beta-test React Forget etc. I’ll ship. You’re not behind. You’re just done running. Wanna build something this weekend? Same stack. No churn. Just vibes and code. #WebDev #JavaScript #Frontend #DeveloperLife #NoMoreFatigue

Ever had a React component get stuck in an infinite re-render loop? It happened to me last week. I was debugging a simple data-fetching component, but my network tab was exploding with requests. 🔥 The culprit was a sneaky `useEffect` dependency. The hook’s dependency array included a function `fetchData` that was defined right inside the component body. On every single render, React was creating a 𝐧𝐞𝐰 instance of that function. This new reference would trigger the `useEffect` all over again. It’s a classic trap that's surprisingly easy to fall into. 🧠⚡ The fix was simple: wrapping the function in `useCallback` to memoize it. Have you struggled with this before? #ReactJS #FrontendDevelopment #DeveloperTips

You’ve built the perfect frontend. You hit the API... and boom 💥 — “Access to fetch at ‘xyz.com’ from origin ‘abc.com’ has been blocked by CORS policy.” Every dev’s first real “Welcome to backend” moment. 😅 So what’s this CORS thing anyway? 👇 CORS = Cross-Origin Resource Sharing It’s your browser’s security guard 🧱 It blocks requests if your frontend (Origin A) tries to talk to a backend (Origin B) that doesn’t explicitly allow it. Basically: 🗣️ “Frontend: Hey API, can I get the data?” 🔒 “API: Sorry, you’re not on the guest list.” ✅ Fix it right: – Allow specific origins on your backend (not * everywhere 🙃) – Use proper headers like Access-Control-Allow-Origin – Or set up a proxy for local dev So next time you see a CORS error… Don’t panic. Your browser’s just being the responsible adult. 🧠 #WebDevelopment #CORS #Frontend #Backend #APIs #JavaScript #Nodejs #DeveloperLife #CodingCommunity #TechHumor #SoftwareEngineering

Ever wondered why sometimes React just… ignores your state update? No error. No re-render. Just silence. The answer usually comes down to one sneaky word: "mutation". In React, to mutate means to change data directly in memory. Like this 👇 arr.push(4); It works in plain JavaScript — but in React, that tiny change can break how your component updates. Why? Because React doesn’t watch your data. It watches references. When you mutate state directly, React compares old and new references and thinks: “Nothing changed.” So it skips the re-render altogether. The fix is simple — but powerful: Create a new copy of your data instead of changing the original. ✅ Correct way: setItems([...items, 4]); Now React sees a brand-new reference → and updates the UI instantly. Here’s the fun twist: If you’ve used React Query, you’ve probably seen mutate() there too. But that one’s completely different — it means send data to the server (like POST or PUT). Same name. Totally different meaning. 😅 💡 Rule of thumb: If it’s React state → never mutate directly. If it’s React Query → go ahead and mutate(). What’s one React “gotcha” you wish you’d learned earlier? #ReactJS #WebDevelopment #Frontend #JavaScript #ReactQuery #CodingTips #LearnReact

🚀 Node.js Tip You Probably Haven’t Seen in Production Yet Many devs still talk about fetch() or ESM support, but one of the biggest hidden gems in Node.js v20+ is the experimental Permission Model. 🔐 What is it? It lets you control exactly what your Node process can access — like files, child processes, or worker threads. You can now “sandbox” your app from the inside. Example use case: You can restrict access to specific directories or APIs using flags such as: --allow-fs-read --allow-fs-write --allow-child-process And inside your code, you can check permissions like this: process.permission.has('fs.write', '/tmp/') If the permission isn’t granted, you can block that action safely. ✨ Why this matters - Increases runtime security - Prevents malicious or accidental file writes - Great for multi-tenant apps or plugin-based systems - Reduces attack surface in production ⚙️ How to try it 1️⃣ Upgrade to Node 20 or later 2️⃣ Run your app with: node --experimental-permission --allow-fs-read=./data index.js 3️⃣ Use process.permission.has(...) to check access in your code 💡 It’s still experimental, but this is the direction Node.js is heading — towards safer, permission-aware environments. Have you tried the Permission Model yet? What’s your take on it? #NodeJS #JavaScript #BackendDevelopment #WebSecurity

💭 Thinking in React: Local vs Global State Managing state efficiently is one of the most important parts of building scalable React applications. In this post, I’ve broken down the thought process behind deciding when to use local state and when to go global — along with a simple decision flow. 🔹 Local State – Used for component-specific data (like form inputs, modals, or toggles). 🔹 Global State – Used when multiple components need to share or synchronize data (like user authentication, theme, or cart data). Understanding this difference helps keep your code clean, maintainable, and performant. Check out the slides to see how you can think in React more strategically while managing state. 🚀 #ReactJS #WebDevelopment #Frontend #JavaScript #ReactState #StateManagement #LearningInPublic

In React, the difference between controlled and uncontrolled components defines how you handle form data. In controlled components, React state drives the form input meaning, what you type is synced with a state variable. In uncontrolled components, the DOM keeps the data, and you access it via useRef. Controlled gives you predictability, validation, and control. Uncontrolled is simpler, less boilerplate, but harder to track and test. If you’re building anything beyond a basic form, controlled is usually the way to go. Have you ever mixed both in the same form? #react #frontend #javascript #webdevelopment

🚀 React 19.2 just made forms feel… modern. One of the coolest new things is built-in form actions. Now you can handle form submissions without useState, useEffect, or tons of boilerplate. That means: ✅ less code ✅ fewer bugs ✅ cleaner async logic Here’s the vibe 👇 <form action={async (formData) => { const res = await fetch('/api/send', { method: 'POST', body: formData, }) }}> <input name="email" placeholder="Enter your email" /> <button type="submit">Subscribe</button> </form> That’s it — no state, no handlers, no custom hooks. React automatically handles submission, loading, and even errors — while keeping the UI responsive. In 2025, this feels like React finally catching up with how we actually build products — fast, declarative, and server-first. #React #Frontend #JavaScript #Nextjs #WebDevelopment #React19