React Render vs Commit Phase: How React Updates UI

𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁 𝘃𝘀 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 — 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗛𝗼𝗼𝗸 𝗮𝘁 𝘁𝗵𝗲 𝗥𝗶𝗴𝗵𝘁 𝗧𝗶𝗺𝗲 React gives developers powerful hooks to manage side effects, but understanding when each hook runs can make a significant difference in UI performance and user experience. Two commonly misunderstood hooks are: 🔹 𝘂𝘀𝗲𝗘𝗳𝗳𝗲𝗰𝘁() useEffect runs after the browser has painted the UI. This makes it the right choice for:  • API requests  • Event listeners  • Subscriptions  • Logging  • Updating external systems Because it runs after paint, it does not block rendering, helping keep your application fast and responsive. 🔹 𝘂𝘀𝗲𝗟𝗮𝘆𝗼𝘂𝘁𝗘𝗳𝗳𝗲𝗰𝘁() useLayoutEffect runs immediately after the DOM updates but before the browser paints the screen. This makes it useful for:  • Reading element dimensions  • Measuring layout  • Scroll position adjustments  • Preventing visual flicker  • Synchronizing DOM changes before display Since it runs before paint, users never see intermediate layout changes. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 Using the wrong hook can lead to: ❌ Layout shifts ❌ Flickering UI ❌ Incorrect measurements ❌ Less predictable rendering behavior Choosing the correct hook leads to: ✅ Smoother interfaces ✅ Better visual stability ✅ More predictable components 𝗦𝗶𝗺𝗽𝗹𝗲 𝗿𝘂𝗹𝗲 𝗼𝗳 𝘁𝗵𝘂𝗺𝗯 Use useEffect → for most side effects Use useLayoutEffect → when layout or visual updates must happen before paint Small React details like this often separate working code from polished frontend engineering. #React #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering

For a long time, I tried to stop React from re-rendering. Turns out, I was solving the wrong problem. React is already fast at rendering. The real issue isn’t re-renders—it’s 𝐰𝐡𝐚𝐭 𝐲𝐨𝐮 𝐝𝐨 𝐝𝐮𝐫𝐢𝐧𝐠 𝐞𝐚𝐜𝐡 𝐫𝐞𝐧𝐝𝐞𝐫. If your component runs expensive logic every time it renders, performance will suffer no matter how many optimizations you add. A simple example: const sortedUsers = users.sort((a, b) => a.age - b.age) This runs on every render. A better approach: const sortedUsers = useMemo(  () => users.slice().sort((a, b) => a.age - b.age),  [users] ) Now the sorting only happens when `users` actually change. This small shift changed how I think about performance. The goal is not fewer renders—it’s 𝐥𝐞𝐬𝐬 𝐰𝐨𝐫𝐤 𝐩𝐞𝐫 𝐫𝐞𝐧𝐝𝐞𝐫. Once you focus on that, tools like `useMemo` and `useCallback` start making sense instead of being overused blindly. 💡 Here’s what I apply in real projects: ✔️ Avoid heavy computations directly inside render ✔️ Use `useMemo` only for expensive operations ✔️ Measure before optimizing—don’t guess React performance isn’t about tricks. It’s about understanding where the real cost is. 💬 𝐖𝐡𝐞𝐧 𝐝𝐢𝐝 𝐑𝐞𝐚𝐜𝐭 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐟𝐢𝐧𝐚𝐥𝐥𝐲 “𝐜𝐥𝐢𝐜𝐤” 𝐟𝐨𝐫 𝐲𝐨𝐮? 👉 Follow Usman Ahmed for more Updates! #ReactJS #FrontendEngineering #WebPerformance #JavaScript #CleanCode #SoftwareEngineering #ReactHooks

REACT INTERNALS - PART 12 Render Phase vs Commit Phase In earlier parts, we understood what rendering means. Now let’s go one level deeper: How does React actually update the UI internally? 🧠 The Core Idea React updates the UI in two phases: Render Phase → Prepare changes Commit Phase → Apply changes 🔄 1. Render Phase (Preparation) This is where React figures out what needs to change • Creates and updates the Fiber tree (each component is tracked) • Determines what needs to change in the UI • Prepares the next UI state No DOM updates happen here ❌ ⚠️ Key Behavior • Can be paused • Can be resumed • Can be interrupted This keeps the UI responsive ⚙️ 2. Commit Phase (Execution) This is where React applies the prepared changes • Applies all changes • Updates the DOM in one step • UI updates on screen ✔ ⚠️ Key Behavior • Cannot be paused • Cannot be interrupted Must complete fully to keep UI consistent 🧩 Simple Flow Render Phase (prepare) ↓ Commit Phase (apply) ↓ UI updates instantly 🎯 Why This Matters • Rendering work can pause → better responsiveness • Updates happen together → consistent UI • Overall smoother user experience 🔗 Connection to the Series • Re-renders → trigger updates • Batching → groups updates • Scheduling → prioritizes updates • Fiber → manages work in small units • This part → when work is prepared vs applied 🎯 Key Insight React prepares all changes first Then applies them together in one step 🔑 Final Takeaway Render phase is interruptible Commit phase is not 🎬 Wrapping Up the Series This completes our journey into how React works internally - from re-renders to Fiber and scheduling Next: Breaking down React Hooks in the same simple way #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #SoftwareEngineering

Why are we still using heavy libraries for simple UI problems? 🤔 I recently built an interactive calendar for a frontend assessment using just: 👉 React + TypeScript + Tailwind No Framer Motion. No Redux/Zustand. No UI libraries. And it handled everything: • Month transitions (CSS animations) • Notes per date (localStorage) • Date range selection (single vs double click logic) • 100+ Indian holidays (O(1) lookup) • Dynamic theme system (CSS variables + auto month themes) What surprised me most wasn’t the features… It was how clear everything felt. When you remove layers of abstraction, you stop “using tools” and start understanding systems — state, rendering, styling, and performance. Most of the time, we reach for big libraries out of habit, not necessity. But in many real-world cases, React + good fundamentals are enough. Live Link : https://lnkd.in/giKiBUpu 👉 Takeaway: Before adding a library, ask: “Am I solving a real problem, or avoiding thinking?” Because smaller stacks don’t just reduce bundle size — they improve your engineering intuition. Curious — where do you draw the line? Minimal setup vs full ecosystem? 👇 #FrontendDevelopment #ReactJS #TypeScript #TailwindCSS #WebDevelopment

🚀 Building Frontend Projects with a Clean Layout Structure One thing I’ve been focusing on lately is improving how I structure my frontend projects. Writing code that works is important—but writing code that is clean, scalable, and maintainable is a whole different level. 💡 Here’s what I’ve been practicing: 🔹 Clear Folder Structure – Organizing components, pages, services, and hooks in a meaningful way 🔹 Reusable Components – Breaking UI into smaller, reusable pieces instead of repeating code 🔹 Separation of Concerns – Keeping logic, UI, and API handling properly separated 🔹 Consistent Naming Conventions – Making the project easy to understand for anyone 🔹 Scalable Layout Design – Structuring layouts so future features can be added easily ✨ A clean layout not only improves readability but also makes collaboration smoother and debugging faster. As I continue building projects, I’m realizing that good structure is just as important as good design. #FrontendDevelopment #ReactJS #CleanCode #WebDevelopment #UIUX #LearningJourney

🚀 Built a Dynamic Product Card UI using React.js Excited to share my latest mini project where I created a responsive product listing UI using **React props and component-based architecture**. 💡 Key Highlights: * Reusable **Card Component** * Dynamic rendering using **Array.map()** * Passed data using **Props** * Conditional rendering (Best Seller tag & Offers) * Clean and structured UI 🛠️ Tech Stack: React.js | JavaScript | CSS 📌 What I learned: * How to pass and use props effectively * Component reusability in React * Rendering dynamic data in UI This project helped me strengthen my fundamentals in React and understand how real-world product listings work. Looking forward to building more such projects 🚀 #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #Learning #Projects #UIUX #Coding

🚀 Concurrent Rendering in React — The Future of UI Performance React is not just fast anymore… 👉 It’s becoming smart about rendering Welcome to 👉 Concurrent Rendering 💡 What is Concurrent Rendering? Concurrent Rendering allows React to: 👉 Pause rendering 👉 Resume later 👉 Prioritize important updates ⚙️ The Problem Before In older React: ❌ Rendering was blocking ❌ Large updates froze the UI 👉 User experience suffered 🔥 The Solution → Concurrent Rendering React can now: ✔ Break rendering into chunks ✔ Work in the background ✔ Keep UI responsive 🧠 How it works 👉 React assigns priorities: High priority → user interactions Low priority → background updates 👉 React processes them smartly 🧩 Real-world example Typing in search bar: ❌ Without concurrent rendering: UI lags while filtering large data ✅ With concurrent rendering: Typing stays smooth Filtering happens in background ⚡ Key Features ✔ Interruptible rendering ✔ Non-blocking UI ✔ Better user experience 🔥 Hooks that Enable This 👉 useTransition 👉 useDeferredValue ⚠️ Common Misconception 👉 Concurrent ≠ Parallel 👉 It’s about scheduling, not multi-threading 🔥 Best Practices ✅ Use for heavy UI updates ✅ Prioritize user interactions ❌ Don’t use everywhere blindly 💬 Pro Insight (Senior-Level Thinking) 👉 React is moving from: “Render everything immediately” ➡️ “Render what matters first” 📌 Save this post & follow for more deep frontend insights! 📅 Day 24/100 #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #PerformanceOptimization #SoftwareEngineering #100DaysOfCode 🚀

Most people think UI development is slow, messy, and full of compromises It doesn’t have to be Here’s a combo that completely changed how I build interfaces: ⚛️ React 🎨 Tailwind CSS 🧩 shadcn/ui This stack is not just about building fast—it's about building clean, scalable, and beautiful UIs without fighting your code Why it works so well: Tailwind CSS → utility-first, no more context switching between files shadcn/ui → real components you own (not a black box library) React → flexible architecture to scale anything 👉 The real power? You’re not installing a heavy UI framework You’re composing your own design system No more: ❌ overriding endless CSS ❌ fighting component libraries ❌ inconsistent design Instead: ✅ full control over UI ✅ consistent, reusable components ✅ modern, clean design out of the box This is how a modern frontend should feel: fast, flexible, and actually enjoyable If you’re still stuck with bloated UI libraries… it might be time to switch What’s your go-to UI stack right now? #ReactJS #TailwindCSS #shadcn #FrontendDevelopment #UIUX #WebDevelopment #JavaScript #DesignSystems #CleanCode #DeveloperExperience #Programming #DevCommunity

Most portfolios feel like static resumes with a bit of styling. I wanted mine to feel like an experience ,something you move through, not just scroll. This started almost a year ago. There were phases where I paused, reworked ideas, and questioned the direction. But I kept coming back to it refining it until it matched the vision. The entire project is built around one idea: “Where logic ends, creativity finds a way.” Built using React, GSAP, Three.js (R3F), Framer Motion, and Matter.js, focusing on interaction over presentation: • Physics-based interactions • 3D elements and immersive sections • Scroll-driven transitions and storytelling • Interactive carousels and dynamic layouts • Fully responsive across devices Here is the live link : 🔗 https://lnkd.in/dzQm-pTd Let me know your thoughts #React #ThreeJS #GSAP #FramerMotion #WebDevelopment #Frontend #CreativeDev #PortfolioWebsite #JavaScript

A visual guide on React component useEffect lifecycle. How components mount and re-render in React and their relation with the useEffect hook is one of the most important concepts in React. To summarize, 1. When first-time components are inserted in the DOM, they're referred to as "mounted," then updated via rendering, and later "unmounted." 2. While mounting, a component initializes. 3. In the render stage, a virtual DOM gets created and compared, and in the commit stage, it gets painted to the browser. 4. Any effect gets executed during the commit. If the state changes, the component re-renders with vDOM creation during rendering, painting, and attaching to real DOM during the commit phase. Would you be interested in learning React/JavaScript with visuals and to-the-point explanations of how things work under the hood? I do a deep dive into foundational concepts & how things work under the hood. You can consider connecting with or following me, Ali Raza, to get along with the journey. Thanks. #react #javascript #frontend