How to Use Props in React for Clean Code

⚛️ React Revision – Day 3 Every day, I pick a new UI design and rebuild it in React — not just to code something new, but to relearn the fundamentals through real projects. On Day 3, I worked on: 🎨 Converting a design into clean, reusable React components 🔁 Revising props drilling and component communication ⚡ Focusing on state management, reactivity, and folder structure Building UIs while revising React has been the most practical way to understand how design, logic, and code connect. You start thinking like a developer — not just following syntax, but building systems that make sense. 🎥 Here’s today’s quick progress video 👇 Let’s keep learning React, one project at a time 💻⚛️ #ReactJS #WebDevelopment #FrontendDevelopment #MERNStack #JavaScript #BuildingInPublic #LearningJourney #100DaysOfCode #UIDesign #ReactProjects #LearningInPublic

📋 Project Showcase: React To-Do List Application ⚛️ ✨ Key Features: ✏️ Dynamic task creation with validation ✏️ Inline editing and real-time completion tracking ✏️ Persistent storage using localStorage ✏️ Responsive design with Tailwind CSS ✏️ Robust error handling and accessibility-focused UI ✏️ Built with React Hooks (useState, useEffect, useRef) Through this project, I reinforced my understanding of core React concept — from component structure and props to efficient state and event handling. Always building, always learning.🎯 📂 GitHub Repository:https://lnkd.in/gnMTseZb #ReactJS #JavaScript #WebDev #FrontendDevelopment #MERNStack

Something clicked for me today while using composition in React. I used to think building components was just about splitting the UI — but composition showed me how powerful it is to combine small, reusable parts to create something flexible and scalable. Instead of relying on inheritance, React encourages composition — and that mindset shift makes everything simpler. You don’t just build components; you design systems that grow naturally. It’s one of those concepts that feels small until you really understand it — then it changes how you code. #React #FrontendDevelopment #WebDev #LearningInPublic #JavaScript #CodingJourney

I used to always hear people say “React’s key prop helps React tell elements apart.” I kind of understood it… but it always felt like a vague explanation. Then I thought about how we do things in plain JavaScript. When you dynamically render elements in the DOM, you usually have to give each one a unique id or data-id — so you can update or delete that specific element later. That’s basically what React is doing behind the scenes with the key prop. It uses key to know which list items match between renders, so it can update, move, or remove elements without re-creating everything. So this: {items.map(item => <li key={item.id}>{item.name}</li>)} is kind of the React equivalent of this: li.dataset.id = item.id; Once I connected it to how we handle things in pure JS, the whole “key” concept suddenly made perfect sense 😄 #javascript #reactjs #frontend #webdevelopment

The Silent Villain: Unoptimized Images You can write the cleanest React code ever but one 2MB image can ruin your entire Lighthouse score. Most performance issues don’t come from bad code… they come from assets we forget to optimize. Next.js gives us tools <Image />, automatic resizing, and modern formats like WebP/AVIF — but many devs still drag and drop raw, heavy files straight from Figma. Optimization isn’t about perfection it’s about respecting your user’s bandwidth and time. Because sometimes, the real bug isn’t in your code it’s in your images. How do you handle image optimization in your Next.js projects? #Nextjs #ReactJS #WebPerformance #FrontendOptimization #WebDevelopment #CleanCode #FrontendEngineer #PerformanceMatters #JavaScript #CodingTips #DeveloperMindset #WebDev

Efficiency & Modern Standards Centering a div used to be the subject of a thousand memes. But CSS has evolved, and so should our methods! While Flexbox is still a workhorse, the modern approach using CSS Grid is incredibly clean and efficient. Forget three lines of code. Now, you can achieve perfect horizontal and vertical centering with just one line on the parent container: "CSS place-items: center;" It's an instant win for code readability and maintainability. In modern frontend development with frameworks like React and Next.js, small efficiencies like this add up to a significant impact on your overall codebase. Stay current, write less, and ship faster. Follow Abir Mahmud for more modern CSS and clean code tips! #CSS #Frontend #WebDevelopment #ReactJS #NextJS #CleanCode #CodewithAbir

𝐒𝐭𝐚𝐭𝐞 𝐚𝐬 𝐚 𝐒𝐧𝐚𝐩𝐬𝐡𝐨𝐭: Most developers use useState every day… but very few truly understand what happens behind the scenes. React doesn’t simply “change a value.” There’s a deeper concept that makes React predictable and consistent. In React, state isn’t a live variable. Instead, on every render, React creates a snapshot of the state... and the entire UI is rendered from that snapshot. During a single render, the state never changes. If something updates → React generates a new snapshot → then re-renders the UI. Understanding this mindset makes React much clearer, more reliable, and easier to reason about. #WebDeveloper #React #Javascript #FrontEndDevelopment #WebDesign

I just finished building a fully custom pagination component for my current React project! 🚀 Instead of reaching for a library, I implemented the logic from scratch, which was a great exercise in core React principles. Key takeaways and skills demonstrated: Shared State Management: Handling the current page state in the parent component and passing the setter function (props.setCurrent) down to the pagination UI. Dynamic Rendering Logic: Implementing the unique requirement for the page array (arr) to only shift one by one when the user clicks past the visible edge (e.g., from page 9 to 10), rather than shifting in large blocks. Clean Array Manipulation: Using methods like slice() and the spread operator (...) to efficiently manage and update the visible page numbers. Check out the video below to see the seamless, shifting UI in action! #ReactJS #JavaScript #FrontendDevelopment #CustomComponents #StateManagement #CodingSkills

React portals are powerful for rendering elements outside the normal DOM tree — but they also reveal some interesting behavior around visibility. I recently noticed that React’s <Activity> component hides only direct portal children, not nested ones buried under other elements. So, while first-level portals respect visibility changes, deeper ones remain active — leading to subtle inconsistencies in complex UIs. It’s a small but telling example of how React’s rendering model handles ownership and visibility. React tracks portals by direct relationships, not full hierarchy — which makes perfect sense once you think about how reconciliation works under the hood. #React #FrontendEngineering #JavaScript #WebDevelopment #ReactInternals #Portals #softwaredeveloper #softwareengineer #mern #nodejs