Rubayed Ahmed Foysal’s Post

If you think every re-render updates the DOM, this will change your mind. Rendering in React is just a function call. Your component runs, returns JSX, and React calculates what the UI should look like. That’s it. Now the important part 👇 Re-rendering does NOT mean the DOM was updated. It only means 👉 React called your component again The DOM is updated later and only if something actually changed. So the real flow is: Trigger → state or props change Render → React runs your component Commit → React updates only the differences This is why you can type inside an input, the component re-renders, and your text is still there. Because React doesn’t touch what hasn’t changed. The real optimization isn’t avoiding re-renders It’s understanding what happens after them. #React #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #ReactJS #FrontendEngineer #TechCareers #CodingTips #DeveloperMindset

✨ 𝗗𝗮𝘆 𝟳 𝗼𝗳 𝗠𝘆 𝗥𝗲𝗮𝗰𝘁 𝗝𝗼𝘂𝗿𝗻𝗲𝘆 ⚛️🚀 Today I learned about the `𝘂𝘀𝗲𝗥𝗲𝗳` 𝗵𝗼𝗼𝗸, and it felt a bit different from other hooks. Unlike state, updating a ref doesn’t trigger a re-render. That makes it useful for storing values that need to persist between renders without affecting the UI. I also learned how `useRef` can directly access DOM elements, which is helpful for things like focusing inputs, managing scroll, or interacting with elements when needed. What stood out to me is how React gives controlled ways to interact with the DOM without breaking its flow. #ReactJS #JavaScript #WebDevelopment #LearningJourney #FrontendDevelopment

Ever wonder how to get React’s power without the heavy payload? Enter Preact. ⚛️ What is Preact? It’s a fast, ultra-lightweight (3kB) JavaScript library with the exact same modern API as React. You get the Virtual DOM, components, and hooks you already know—just without the bulk. When should you use it? 🚀 Performance-critical apps: Drastically faster load times and lower memory usage. 📱 Mobile Web & PWAs: Perfect for shipping minimal code to devices on slower networks. 🏝️ Islands Architecture: The go-to choice for frameworks like Astro or Fresh where keeping client-side JS tiny is the goal. React vs. Preact: The TL;DR Size: React sits around ~40kB; Preact is roughly ~3kB. DOM Proximity: Preact drops React's Synthetic Events in favor of standard DOM events, and lets you use standard HTML attributes (like class instead of className). The Best Part: Thanks to the preact/compat layer, you can swap React for Preact in your bundler and continue using your favorite React libraries without rewriting your code. If frontend performance is your priority, Preact is a massive win. Have you tried using Preact in any of your projects yet? Let me know below! 👇 https://preactjs.com/ #Preact #ReactJS #WebDevelopment #Frontend #JavaScript #WebPerformance

🚨 Most developers misunderstand React re-rendering I used to think: 👉 “React re-renders = DOM updates” ❌ Wrong. Here’s what actually happens: 🧠 Rendering = React running your component 🔁 Re-render = React running it again BUT… 👉 React does NOT update the DOM every time Instead: ⚡ It creates a Virtual DOM ⚡ Compares old vs new (Reconciliation) ⚡ Updates ONLY what changed 💥 Real insight: 👉 The real problem is NOT DOM updates 👉 It’s unnecessary re-renders Example: Parent re-renders → Child also re-renders Even when nothing changed ❌ 🛠️ Fix: 🛡️ React.memo → skip child render if props same 📦 useMemo → keep props stable Together: 👉 Stable props + memoized component = no wasted work 🧠 Biggest learning today: 👉 “React doesn’t repaint everything… it only fixes what changed.” #React #Frontend #WebDevelopment #Performance #JavaScript #OpenSource

useState is great for simple values. But when state starts spreading across multiple fields, conditions, and edge cases, useReducer usually wins. Why? Because it makes state changes predictable. Instead of chasing setters across a component, you define actions and keep update logic in one place. - Less guessing. - Less scattered logic. - Cleaner React. My rule: Use useState for simple state. Use useReducer when state has multiple ways to change. React gets easier when state transitions are explicit. #react #javascript #frontend #webdevelopment

Day 8 - Frontend Diaries 👉 I thought events are simple, just use their properties and handle them While working with events, my understanding was straightforward an event happens you get some properties and you use them It felt consistent and predictable But while going deeper, I came across something I hadn’t really thought about 👉 browser differences The same event can behave slightly differently depending on the browser That’s when I understood why React wraps events using something called a Synthetic Event Instead of relying directly on browser events, React provides a consistent interface so you don’t have to worry about those differences It’s a small detail, but it shows how much abstraction React handles internally #frontenddevelopment #reactjs #webdevelopment #fullstackdeveloper #softwareengineering #buildinpublic #developers

💡 𝗧𝗶𝗽 𝗼𝗳 𝘁𝗵𝗲 𝗗𝗮𝘆 — 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄? In React, "useRef" 𝘃𝗮𝗹𝘂𝗲𝘀 𝗽𝗲𝗿𝘀𝗶𝘀𝘁 𝗮𝗰𝗿𝗼𝘀𝘀 𝗿𝗲𝗻𝗱𝗲𝗿𝘀 𝘄𝗶𝘁𝗵𝗼𝘂𝘁 𝗰𝗮𝘂𝘀𝗶𝗻𝗴 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿𝘀. Unlike state, updating a ref 𝗱𝗼𝗲𝘀 𝗻𝗼𝘁 𝘁𝗿𝗶𝗴𝗴𝗲𝗿 𝗮 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿, making it perfect for: - Storing mutable values - Accessing DOM elements - Keeping track of previous values 🔧 𝗨𝘀𝗲 𝗶𝘁 𝘄𝗵𝗲𝗻: You need to store something that shouldn’t affect the UI. Not everything needs to live in state. #React #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #CodingTips #BestPractices #FullstackDeveloper

🚀 React 19 just removed one of the most annoying patterns… No more forwardRef just to pass a ref 👀 Now you can treat ref like a normal prop — simple, clean, and finally intuitive. 💡 Before: Extra wrapper, more boilerplate, harder to read 💡 Now (React 19): Just pass ref like any other prop ✅ This small change = big DX upgrade • Less code • Better readability • More intuitive component design • Cleaner abstractions Honestly, this is one of those changes you don’t realize you needed… until you use it. 👉 Are you excited about this, or do you think forwardRef was fine? #React #React19 #JavaScript #Frontend #WebDevelopment #CleanCode #DeveloperExperience

🚀 React.memo — Prevent Unnecessary Re-renders Like a Pro In React, re-renders are normal… 👉 But unnecessary re-renders = performance issues That’s where React.memo helps. 💡 What is React.memo? React.memo is a higher-order component (HOC) 👉 It memoizes a component 👉 Prevents re-render if props haven’t changed ⚙️ Basic Example const Child = React.memo(({ name }) => { console.log("Child rendered"); return <h1>{name}</h1>; }); 👉 Now it only re-renders when name changes 🧠 How it works 👉 React compares previous props vs new props If same: ✅ Skips re-render If changed: 🔁 Re-renders component 🔥 The Real Problem Without memo: <Child name="Priyank" /> 👉 Even if parent re-renders 👉 Child also re-renders ❌ With React.memo: ✅ Child re-renders only when needed 🧩 Real-world use cases ✔ Large component trees ✔ Expensive UI rendering ✔ Lists with many items ✔ Components receiving stable props 🔥 Best Practices (Most developers miss this!) ✅ Use with stable props ✅ Combine with useCallback / useMemo ✅ Use in performance-critical components ❌ Don’t wrap every component blindly ⚠️ Common Mistake // ❌ Passing new function each render <Child onClick={() => console.log("Click")} /> 👉 Breaks memoization → causes re-render 💬 Pro Insight (Senior-Level Thinking) 👉 React.memo is not magic 👉 It works only if: Props are stable Reference doesn’t change 📌 Save this post & follow for more deep frontend insights! 📅 Day 21/100 #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #ReactHooks #SoftwareEngineering #100DaysOfCode 🚀

I made React slower trying to optimize it. Wrapped everything in useMemo. Added useCallback everywhere. Felt productive. Performance got worse. Here's what I didn't understand about re-renders 👇 4 things that trigger a re-render: > State change > Prop change > Parent re-renders (even if YOUR props didn't change) > Context update That third one is responsible of unnecessary re-renders I've seen in real codebases. The fix isn't memorizing APIs. It's this order: 1. Profile first Open React DevTools Profiler. Find the actual problem. Takes 2 minutes. 2. Wrap the right components in React.memo Not all of them. Only components that are expensive AND receive stable props. 3. Stabilise your functions with useCallback Without it - new function reference every render --> child always re-renders. Doesn't matter if you have React.memo. 4. useMemo for heavy calculations only Not for "this array map looks expensive." Only when Profiler proves it. The rule I follow now: Don't optimise what you haven't measured. One change in the right place beats 10 changes in the wrong ones. What's the most unnecessary useMemo you've ever written? 😄 #React #JavaScript #Frontend #WebDev