Understanding Props in React: A Key to Reusability

𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐢𝐬 𝐍𝐨𝐭 𝐟𝐨𝐫 𝐄𝐯𝐞𝐫𝐲𝐭𝐡𝐢𝐧𝐠 // ❌ Misuse useEffect(() => { setTotal(items.reduce((sum, i) => sum + i.price, 0)); }, [items]); // ✅ Better const total = useMemo( () => items.reduce((sum, i) => sum + i.price, 0), [items] ); useEffect is meant for side effects like fetching data or DOM manipulation, not for calculations. If you use it for everything, you risk unnecessary re-renders and confusing logic flow. Use useMemo to compute derived values efficiently. It keeps your components clean and ensures React does only what’s needed, nothing more. #ReactHooks #NextJS #ReactBestPractices #WebDevelopment #FrontendEngineer #PerformanceOptimization #JavaScript

🚀 Mastering the JavaScript Intersection Observer API! One of the most powerful yet underutilized APIs in modern web development is the Intersection Observer. Here's why it's a game-changer: ✨ Key Benefits: • Lazy load images efficiently without blocking the main thread • Trigger animations when elements enter the viewport • Implement infinite scroll with minimal performance impact • Track element visibility with extreme precision 💡 Real-World Use Cases: 📸 E-commerce sites loading product images on demand 🎬 Portfolio sites triggering animations as you scroll 📚 News feeds implementing endless scrolling ⚡ Performance optimization by reducing initial load time 🔧 The best part? No more scroll event listeners with countless redraws. Intersection Observer handles everything efficiently! #WebDevelopment #JavaScript #Frontend #Performance #Coding

I used to mix up when to use v-if and when to use v-show 😅 Then this simple understanding helped: v-if → Adds/Removes the element from the DOM v-show → Just hides/show with CSS So now my rule: ✅ Use v-if when something should appear conditionally and not often ✅ Use v-show when you toggle visibility frequently (like dropdowns, tabs, filters) This small clarity made my UI more efficient and predictable. Sometimes the simplest concept saves the most time 😄 #VueJS #Frontend #WebDevelopment #JavaScript #LearningByDoing

🎯 A Little Story About JavaScript Events While working on a UI feature recently, I was thinking about how neatly JavaScript handles user interactions — especially through event flow. Imagine this 👇 You click a button inside a card component. The click first triggers on the button... but somehow, the parent card also reacts. That’s not magic — that’s Event Bubbling in action. In bubbling, the event starts at the target element and travels up through all its ancestors until it reaches the top of the DOM. There’s also the opposite path — Event Capturing — where the event moves down from the root to the target. You can enable this phase using: element.addEventListener("click", handler, true); And sometimes, you just want that click to stay right where it happened — no parents involved. That’s when event.stopPropagation() steps in to save the day ✋ Understanding how events travel through the DOM makes handling complex interfaces so much smoother. It’s one of those core concepts that quietly powers every interactive web experience we build. #JavaScript #Frontend #WebDevelopment #Coding #TIL

🚀 Mastering Async JavaScript: Promises vs Async/Await Async operations are everywhere in frontend — API calls, data fetching, animations, etc. I’ve broken down how Promises and async/await work, with real code examples and a clear comparison to help you understand: ✅ When to use .then() chaining ✅ Why async/await is cleaner for multiple async steps ✅ Common pitfalls and debugging tips 💡 The goal: write more readable, maintainable, and modern async code in JavaScript. If you’ve ever dealt with nested Promises or callback chains, this guide will make your async logic much easier to follow. ⬇️ Check out the slides to learn visually how both approaches work and when to use each effectively. #JavaScript #FrontendDevelopment #ReactJS #AsyncAwait #Promises #WebDevelopment #NextJS #TechLearning

Day 3: JSX 🧠 JSX looks like HTML — but it’s not! JSX is JavaScript syntax that returns UI. You can embed variables, conditions, loops — right inside your “HTML.” Example: const name = "React"; return <h1>Hello {name}!</h1>; 💡 Rule: Always return one parent element. JSX = Power + Simplicity. Once you get it, React feels like magic. Comment 👍🏻 if you understood JSX! #JSX #ReactJS #FrontendDevelopment #ReactForBeginners #WebDevelopment

🚀 Small Win — Big Motivation Today, I built a simple responsive card layout using React + Tailwind CSS. Seeing these UI elements come to life on the browser gave me that small “aha” moment 😄 What I learned along the way: Importance of JSX return structure inside .map() 🧠 How a single missing return can make your entire UI invisible A cleaner approach using () for implicit returns Structuring responsive UI with Tailwind classes like flex, gap, justify-center, and items-center. This small project might look basic, but it’s these fundamentals that build a strong foundation for bigger applications 💻✨ #ReactJS #TailwindCSS #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #javascript #developers #UIUX #reactdeveloper #codingjourney #devcommunity

Stop Duplicating Colors! Ever found yourself defining the same color in both SCSS and TypeScript? I’ve written a Medium article on how to fix this once and for all — by creating a single source of truth for your design tokens. Define colors once in colors.json Auto-generate both _colors.scss and colors.ts Access them in styles and TypeScript without duplication Works perfectly for design systems and theming Check it out here 👉 One Source to Rule Them All: Sharing Colors Between SCSS and TypeScript https://lnkd.in/eTkaXD_i #Angular #React #Vue #DesignSystem #WebDevelopment #Frontend #TypeScript #SCSS #WebDev #Coding

What’s the Difference Between Props and State? In React, there are two main ways to handle data: Props and State. They both carry information, but serve different purposes. 🔹 Props (Properties) Passed from parent to child. Are read-only. Let you control a component from outside. 🔹 State Defined and managed inside the component. Mutable via the setter. Changes with user interaction and updates the UI. 🧩 In short: Props are external, State is internal. Together, they make React components interactive and dynamic. #React #PropsVsState #ReactSeries #ReactCheatSheet #Frontend #JavaScript #WebDevelopment #ReactHooks #LearnReact #DevCommunity #CodingTips

𝟑𝟎 𝐃𝐚𝐲𝐬 𝐨𝐟 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 --- 𝑫𝒂𝒚 2 Truncating text with just one class Did you know that with Tailwind, you can stop a long piece of text from wrapping to the next line and automatically add ... at the end using just a single class? That’s exactly what the "𝚝𝚛𝚞𝚗𝚌𝚊𝚝𝚎" utility does. Sometimes your design requires showing only the beginning of a long paragraph, and this class takes care of it effortlessly. But here’s the more interesting part and a feature many people overlook Tailwind also provides line-clamp utilities like: "𝚕𝚒𝚗𝚎–𝚌𝚕𝚊𝚖𝚙–𝟷" "𝚕𝚒𝚗𝚎–𝚌𝚕𝚊𝚖𝚙–𝟸" … all the way to "𝚕𝚒𝚗𝚎–𝚌𝚕𝚊𝚖𝚙–𝟼" These allow you to show only a specific number of lines (for example 2, 3, or up to 6) before adding the ellipsis at the end. A simple and powerful way to control multi-line text with precision. #FrontendDeveloper #ReactJS #UIUX #Tailwind #CSS #Style #Class #Code #Front #Vue #javascript #Typescript #NextJS #Nuxt #DeveloperJobs