Mohamed Sharfiras’ Post

🚨 Why key Is So Important in React Lists (Not Just a Warning!) Most developers know what keys are… but very few understand why they actually matter 👀 🧠 What React Really Does Behind the Scenes When a list changes, React tries to be smart and fast. Instead of re-rendering everything, it: 👉 Compares old list vs new list 👉 Updates only what changed This process is called reconciliation. ❌ Problem: No Key (or Wrong Key) items.map(item => <Item />) React gets confused: Which item moved? Which one was removed? Which one stayed the same? Result ❌ 👉 Wrong UI updates 👉 Input values jump 👉 Animations break 👉 Bugs that are hard to debug Solution: Unique key items.map(item => ( <Item key={item.id} /> )) 🎯 Why keys matter ✔ Helps React identify each item uniquely ✔ Tracks items even when order changes ✔ Updates only the correct component ✔ Prevents unexpected UI behavior 🚫Why index as key is risky items.map((item, index) => ( <Item key={index} /> )) If you: Add items Remove items Reorder items React may reuse the wrong component 😬 📌 Index keys are okay only for static lists that never change. 🧩 Simple analogy Think of keys like Aadhar numbers 🪪 Names can repeat, positions can change — but the ID always stays the same. 🧠 One-line takeaway 👉 Keys help React track items correctly and prevent wrong UI updates. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactTips #CleanCode #DevHackMondays #TechSimplified

#WebDevSaturdays [React Insight #2] ⚛️🧠 Most developers learn about 𝗸𝗲𝘆 through a warning message. Add one so React can track list items. Done. But keys are not just hints. they define component identity. When React renders, it compares previous and next trees. If two elements share the same key, React assumes they represent the same instance. State is preserved. Effects remain mounted. DOM nodes stay in place. Change the key, and React treats it as a completely different component. The old one unmounts. a new one mounts. This behavior is powerful when used intentionally. For example, resetting a form after submission can be done instantly by changing its key. No manual state clearing needed. But accidental key changes can cause confusing bugs. Inputs lose focus. animations restart. scroll positions reset. Where developers get surprised. 1️⃣ Using array indexes as keys in dynamic lists. 2️⃣ Deriving keys from values that change often. 3️⃣ Recreating keys inside render functions. React does not preserve components. 𝘪𝘵 𝘱𝘳𝘦𝘴𝘦𝘳𝘷𝘦𝘴 𝘪𝘥𝘦𝘯𝘵𝘪𝘵𝘪𝘦𝘴. perceived updates depend on stable identity, not rerenders. Next time state disappears unexpectedly, ask yourself. did React rerender. or did it remount. #React #WebDev #Frontend #JavaScript #DevTips

21 Days 21 web dev procject Day 6 of Building in Public 🚀 live demo : https://lnkd.in/gYuw98q9 Today I focused on improving the UI and fixing issues in my React project. Worked on component structure, responsive layout, and debugging some annoying build errors. Things I learned today: • Proper component separation makes debugging easier • Small UI fixes can dramatically improve user experience • Build errors usually come from simple mistakes (wrong imports, wrong paths) Slow progress is still progress. #buildinpublic #webdevelopment #reactjs #javascript #100daysofcode

I often see developers wrap components with React.memo expecting magic improvements. But memoization only works when props are stable. If you pass a new object, array, or function on every render, React sees a new reference and re-renders anyway. Example in the screenshot below The real fix is not “wrap everything with memo”. It’s: • Stable references • Controlled state boundaries • Smaller components • Clean architecture Performance problems usually start with structure, not React itself. Optimize intentionally. Not blindly. #ReactJS #FrontendDevelopment #JavaScript #WebPerformance #SoftwareEngineering #CleanCode #FullStackDeveloper

Most frontend bugs are not actually “bugs”. They’re decisions we made in a hurry. I learned this the hard way while working on a role-based dashboard. We kept adding components. Then more conditions. Then more props. And suddenly… One small change broke three different modules. That’s when I realised: Good frontend isn’t about writing more code. It’s about writing less — but structuring it better. Now I think differently: • Features over random folders • Clear separation between UI & API logic • Optimizing re-renders before adding more state • Designing loading & error states intentionally Frontend isn’t just screens. It’s system thinking. Still learning. Still refining. #ReactJS #FrontendDeveloper #JavaScript #BuildInPublic

I used to think the 𝗸𝗲𝘆 𝗽𝗿𝗼𝗽 was just there to remove a warning. Add something 𝘂𝗻𝗶𝗾𝘂𝗲. Warning gone. Done. But key isn’t about 𝘄𝗮𝗿𝗻𝗶𝗻𝗴𝘀. It’s about 𝗶𝗱𝗲𝗻𝘁𝗶𝘁𝘆. When a list updates, React tries to match 𝗼𝗹𝗱 𝗶𝘁𝗲𝗺𝘀 with new ones. key is how it decides what’s the same and 𝘄𝗵𝗮𝘁 𝗶𝘀𝗻’𝘁. If the key isn’t stable, React reuses the 𝘄𝗿𝗼𝗻𝗴 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 instance. That’s when: Inputs keep the wrong 𝘃𝗮𝗹𝘂𝗲. State jumps between 𝗿𝗼𝘄𝘀. UI behaves strangely after 𝗿𝗲𝗼𝗿𝗱𝗲𝗿𝗶𝗻𝗴. It’s not a 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 trick. It’s about 𝗰𝗼𝗿𝗿𝗲𝗰𝘁𝗻𝗲𝘀𝘀. Small prop. Big impact. #React #FrontendEngineering #JavaScript

I used to put everything inside useEffect… Until one broken component changed how I think about React. 👀 When I first learned React, useEffect felt like a superpower. Something changed? → useEffect. Need to update a value? → useEffect. Something not working? → Add another dependency. It worked… until it really didn't. One day I was debugging a small component. Nothing complex on the surface. But it had: → Multiple effects fighting each other → Derived state stored AND recalculated → Unexpected re-renders on every tick → Dependency warnings I kept ignoring I sat back and asked: "Why is a 50-line component this painful?" The answer hit me hard. 💡 I was using useEffect as a catch-all. And it was silently making everything harder. Here's the mental model that changed everything: 01. Value computable from props or state? → Calculate it during render. Don't store it again. 02. Logic triggered by a button click? → Put it in the event handler. Not an effect. 03. Just filtering or transforming data? → Do it inline. Render is free. useEffect exists for one purpose — syncing with things outside React: ✦ API calls ✦ Subscriptions ✦ Timers ✦ DOM manipulation ✦ External libraries / WebSockets That's it. The list is short intentionally. The moment I started respecting that boundary… My components became: ✅ Cleaner to read ✅ Easier to debug ✅ More predictable ✅ Faster to ship Sometimes writing better React means writing less useEffect. The best refactor I ever did was deleting three effects — and replacing them with nothing at all. Have you ever refactored a component and removed half your effects? Drop your "aha moment" below 👇 I'd love to read it. #React #ReactJS #JavaScript #FrontendDevelopment #CleanCode #WebDevelopment #SoftwareEngineering #LearningJourney

🎭 𝗔 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗱𝗿𝗮𝗺𝗮 𝗶𝗻 𝘁𝘄𝗼 𝗮𝗰𝘁𝘀 𝗔𝗰𝘁 𝟭: 𝗕𝗲𝗳𝗼𝗿𝗲 𝟮𝟬𝟭𝟯 A client asks: “Can we move this button slightly to the left?” The developer smiles. Inside? Panic. One small UI change meant touching HTML, CSS, JavaScript, and sometimes destiny. The page refreshed. The layout broke. Someone whispered, “It worked yesterday.” Debugging involved console logs, coffee, and hope. 𝗔𝗰𝘁 𝟮: 𝗔𝗳𝘁𝗲𝗿 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀 (𝗛𝗲𝗹𝗹𝗼 𝟮𝟬𝟮𝟲) Same request. Same button. The developer opens a component. Updates the state. Refreshes… nothing breaks. The UI updates instantly. The button behaves. Confidence returns. What changed? Not the browser. Not the users. Just the way we think about UI. React didn’t just give us components. It gave frontend developers emotional stability. From DOM chaos to component calm. Curtain closes. Applause from the UI. 👏 #ReactJS #WebDevHumor #FrontendLife #JavaScript #TechStories

🚀 React Re-renders Why does a component re-render even when props look the same? React re-renders when reference changes, not value. If you pass new objects/functions every render, React treats them as new. Example: Passing `{ user }` where `user` is recreated each render will trigger child updates. In dashboards with 100+ rows, this causes lag. Fix: Memoize values and avoid inline object creation. #ReactJS #FrontendEngineering #JavaScript

React Component Lifecycle simplified. Every component goes through three main phases: 1️⃣ Mounting – Component is inserted into the DOM. 2️⃣ Updating – Props or state changes trigger re-render. 3️⃣ Unmounting – Component is removed and cleanup runs. In functional components, useEffect replaces lifecycle methods and gives fine-grained control through dependency arrays. The most common production mistake? Forgetting cleanup logic. Clear lifecycle understanding = predictable UI + better performance. #reactjs #frontenddevelopment #javascript #softwareengineering #codewithsoumya