React Components: Passing Props for Dynamic Data Sharing

Why does useEffect run twice in React 18? 🤔 - If you’re seeing your API calls execute twice in development, don’t panic. - In React 18, when using StrictMode, React intentionally mounts, unmounts, and re-mounts components to detect side effects and missing cleanup logic. - This happens only in development — not in production builds. - React is stress-testing your components to ensure they are future-ready for concurrent rendering. Key takeaway: - If your useEffect runs twice, your app isn’t broken — React is helping you catch potential bugs early. Development Mode (StrictMode ON) 1️⃣ Mount Component    ↓ 2️⃣ Run useEffect    ↓ 3️⃣ Cleanup useEffect    ↓ 4️⃣ Re-Mount Component    ↓ 5️⃣ Run useEffect Again Coding: useEffect(() => {  console.log("Effect ran");  return () => {   console.log("Cleanup ran");  }; }, []); output Effect ran Cleanup ran Effect ran #ReactJS #Hooks #FrontendDevelopment #JavaScript #WebDevelopment

Your React app is loading pages users will never visit That admin panel? Loaded. That settings page? Loaded. That rarely-used chart library? Loaded. All on the first page load. All slowing down your initial bundle. Fix it in 2 lines: That's it. React.lazy + Suspense. Dashboard now loads only when someone actually navigates to /dashboard. Your main bundle gets smaller. First paint gets faster. Where to use it: → Route-level components (biggest wins) → Heavy modals that rarely open → Below-the-fold content → Anything with large dependencies (chart libs, editors, maps) Where NOT to use it: → Small components (overhead not worth it) → Above-the-fold critical content → Components that always render Pro tip: Add a named chunk for debugging: lazy(() => import(/* webpackChunkName: "dashboard" */ './Dashboard')) Now your network tab shows "dashboard.js" instead of "chunk-3fa2b.js" I've cut initial bundle size by 40% on projects just by lazy loading routes. Zero functionality change. Just moved one line. Easy win. #react #javascript #frontend #webdev #reactjs #programming #webdevelopment #typescript #performance #webperf

Just completed a React Mini Project – Counter App as part of my Web Development Series. This project focuses on the core fundamentals of React: • Managing state using useState • Handling user events • Implementing increment, decrement, and reset logic • Using conditional rendering • Adding basic validation and UI feedback Instead of using advanced shortcuts, I intentionally kept the logic beginner-friendly so new developers can clearly understand how React works behind the scenes. Small projects like this build strong foundations. If you're learning React, I highly recommend building this on your own and experimenting with improvements. The full tutorial and source code are available. Link in the comments 👇 #react #reactjs #webdevelopment #frontenddevelopment #javascript #coding #learnreact #miniproject #beginners

A few years ago I lost hours debugging what I was convinced was a React issue. State was behaving strangely. Something was mutating somewhere I was not touching. I checked reducers. I checked effects. I even questioned React’s rendering. 𝘐𝘵 𝘸𝘢𝘴 𝘯𝘰𝘵 𝘙𝘦𝘢𝘤𝘵. 𝗜𝘁 𝘄𝗮𝘀 𝗮 𝘀𝗵𝗮𝗹𝗹𝗼𝘄 𝗰𝗼𝗽𝘆. I had used the 𝘴𝘱𝘳𝘦𝘢𝘥 𝘰𝘱𝘦𝘳𝘢𝘵𝘰𝘳 thinking I cloned the object. Technically I did. But only the first layer. One nested object was still pointing to the same reference. So when another part of the app updated it, my “new” state changed too. That was the moment shallow vs deep copy stopped being a theory and became very practical. 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗰𝗼𝗽𝘆 𝗴𝗶𝘃𝗲𝘀 𝘆𝗼𝘂 𝗮 𝗻𝗲𝘄 𝗼𝘂𝘁𝗲𝗿 𝗼𝗯𝗷𝗲𝗰𝘁. 𝗗𝗲𝗲𝗽 𝗰𝗼𝗽𝘆 𝗴𝗶𝘃𝗲𝘀 𝘆𝗼𝘂 𝗶𝗻𝗱𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝗲. In small projects, this rarely hurts. In larger systems, this is where subtle bugs begin. Over time I have learned to ask one simple question before cloning: - Do I want shared behavior or true isolation? That one question has saved me more debugging hours than any library ever has. How do you usually approach cloning in production React apps? #JavaScript #FrontendDevelopment #ReactJS #SoftwareEngineering #CleanCode #SeniorDeveloper

Sometimes, handwritten notes explain concepts better than any tutorial. I’ve compiled and revised my React handwritten notes, starting from absolute fundamentals and gradually moving toward real-world, production-ready concepts, including: • Why React is a library (not a framework) • React vs plain JavaScript DOM manipulation • React.createElement() vs JSX • Props, attributes, and children • How React renders and replaces the DOM • Why JSX simplifies development • Bundlers (Parcel, Webpack) and why they matter • package.json, package-lock.json, and node_modules • NPM, dependencies, and transitive dependencies • Hot Module Reloading (HMR) • Development vs production builds • Tree shaking, minification, and optimization • Browser compatibility with browserslist • How React apps become production-ready These notes helped me understand what actually happens behind the scenes in a React app, not just how to write code. Sharing this as part of my React learning and interview preparation journey. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #InterviewPreparation #LearningJourney #ReactNotes

React has a LOT of moving parts. So I built a complete visual mindmap to make sense of it all. 🧠 Not just components and hooks — this covers the full picture: ⚡ Data Flow | 📁 File Structure | 🌍 .env Setup | ⚙️ Vite Config | 🔄 Change Scenarios From index.html all the way through to your UI layer — every layer explained, every connection mapped. Whether you're just starting out or need a refresher on how a production React app is actually structured, I hope this helps you see the big picture. Check it out 🔗https://lnkd.in/gX-7Eg4y #React #Vite #FrontendDeveloper #WebDev #ReactArchitecture #JavaScript #VibeCoder

The "Event" You Use in React isn't Real. 😲⚛️ If you log an event object `console.log(e)` in a React handler, you might notice something strange. It disappears or looks different than a standard browser event. That's because you aren't dealing with the DOM. You are dealing with a 𝐒𝐲𝐧𝐭𝐡𝐞𝐭𝐢𝐜 𝐄𝐯𝐞𝐧𝐭. 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐡𝐚𝐩𝐩𝐞𝐧𝐢𝐧𝐠? Browsers (Chrome, Safari, Firefox) all handle events slightly differently. React doesn't want you to worry about those quirks. So, React created a 𝐰𝐫𝐚𝐩𝐩𝐞𝐫 called `SyntheticEvent`. 𝐖𝐡𝐲 𝐝𝐨𝐞𝐬 𝐭𝐡𝐢𝐬 𝐦𝐚𝐭𝐭𝐞𝐫? 1. 𝐂𝐨𝐧𝐬𝐢𝐬𝐭𝐞𝐧𝐜𝐲: It guarantees that your event code works identically on every browser. 2. 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞: React pools these events to save memory (though this behavior changed slightly in React 17, the wrapper concept remains). 3. 𝐅𝐚𝐦𝐢𝐥𝐢𝐚𝐫𝐢𝐭𝐲: It mimics the native API perfectly. You still use `e.preventDefault()` and `e.stopPropagation()` exactly like you're used to. 𝐓𝐡𝐞 "𝐄𝐬𝐜𝐚𝐩𝐞 𝐇𝐚𝐭𝐜𝐡": Need the 𝑎𝑐𝑡𝑢𝑎𝑙 raw DOM event for a third-party library? You can always access it via: `e.nativeEvent`. Check out the visual guide below! 👇 Have you ever had to use `e.nativeEvent` to fix a bug, or has the Synthetic Event always been enough? #ReactJS #FrontendDevelopment #WebDev #JavaScript #CodingInterviews #BrowserCompatibility

Stop over-optimizing your React apps. 🛑 We’ve all been there: adding useMemo to every variable because we think we’re being "performance-conscious." But here is the hard truth: Optimization has a cost. Every time you use useMemo, you’re asking React to allocate memory and perform a dependency check. If you’re using it for basic math or primitive values, the overhead of the hook is actually more "expensive" than the calculation itself. When to actually hit the memo button: ✅ Heavy Lifting: Complex data filtering or sorting. ✅ Referential Integrity: Keeping objects stable for useEffect dependencies. ✅ Pure Components: When passing props to a React.memo child. When to let it go: ❌ Simple string concatenations. ❌ Primitive values (booleans, numbers). ❌ Components that rarely re-render anyway. Let’s write cleaner🚀 #ReactJS #WebDevelopment #FrontendEngineering #Javascript #ProgrammingTips #ReactPerformance

Why is there a random '0' on my screen?!" The classic React trap. 🪤⚛️ If you have built React apps for a while, you have probably seen a stray `0` randomly floating in your UI. This happens when we misuse conditional rendering! Keeping JSX clean means using inline expressions, but you have to choose the right tool for the job: 1️⃣𝐓𝐡𝐞 "𝐄𝐢𝐭𝐡𝐞𝐫/𝐎𝐫" (𝐓𝐞𝐫𝐧𝐚𝐫𝐲 𝐎𝐩𝐞𝐫𝐚𝐭𝐨𝐫 `? :`) 🔀 Use this when you need to choose between two different components. 𝐸𝑥𝑎𝑚𝑝𝑙𝑒: `{isLoggedIn ? <Dashboard /> : <LoginForm />}` It is basically a clean `if-else` statement right inside your UI. 2️⃣𝐓𝐡𝐞 "𝐎𝐧𝐥𝐲 𝐈𝐟" (𝐋𝐨𝐠𝐢𝐜𝐚𝐥 𝐀𝐍𝐃 `&&`) 🚪 Use this when you want to render something 𝑜𝑛𝑙𝑦 if a condition is met. If it's false, render nothing. 𝐸𝑥𝑎𝑚𝑝𝑙𝑒: `{isLoading && <Spinner />}` ⚠️ 𝐓𝐡𝐞 𝐂𝐨𝐦𝐦𝐨𝐧 𝐏𝐢𝐭𝐟𝐚𝐥𝐥 (𝐓𝐡𝐞 𝐃𝐫𝐞𝐚𝐝𝐞𝐝 '𝟎'): In JavaScript, `0` is falsy. But in React, if you put a number in JSX, React renders it! ❌ `cart.length && <CheckoutButton />` ➔ If length is 0, your UI literally prints "0". ✅ `cart.length > 0 && <CheckoutButton />` ➔ Forces a boolean check. Renders nothing if false. Swipe through the infographic below to see the visual breakdown! 👇 Be honest, how many times has the "length &&" bug caught you off guard? #ReactJS #FrontendDevelopment #WebDev #JavaScript #CleanCode #SoftwareEngineering #CodingTips

Day 13 - 30 Days of 30 Projects challenge— HTML Previewer App with Next.js 🚀 As part of my 30 Days of 30 Projects challenge, I’ve built a HTML Previewer App using Next.js (App Router), TypeScript, Tailwind CSS, and shadcn/ui. ✨ What this app does: Write HTML in a textarea Instantly see the rendered preview Responsive & clean UI Built with modern Next.js practices This project helped me strengthen my understanding of: Client vs Server Components Dynamic HTML rendering Tailwind + shadcn integration Debugging real-world npm & dependency issues 💪 🔗 Live Demo: 👉 (https://lnkd.in/ddqC9mCh) Excited to keep pushing forward and learning by building 🚀 Feedback is always welcome! Asharib Ali #Day13 #30DaysOfCode #30Projects #NextJS #ReactJS #FrontendDevelopment #TailwindCSS #TypeScript #WebDevelopment #LearningByBuilding #DeveloperJourney #Coding #100DaysOfCode #FullStack #JavaScript #Frontend #WebDev #CodeNewbie #BuildInPublic