Optimize React Performance with Rendering, Reflow, and Repaint

Frontend Performance: What “Paint” Actually Means If you work with React or Next.js, you’ve probably heard terms like reflow, repaint, and Core Web Vitals. But under the hood, it all comes down to one simple thing: how often the browser has to recalculate layout or redraw pixels. When this happens too frequently, performance drops and the user experience suffers. Here’s the quick breakdown: Layout (Reflow) The browser recalculates where elements should sit. Triggered when you change things like width, margin, or add/remove DOM nodes. This is one of the most expensive operations. Paint The browser redraws visual pixels like text, borders, and backgrounds. Changes like color or background usually trigger paint without recalculating layout. Compositing The browser combines layers (often GPU accelerated) to render the final frame. This is why animations using transform and opacity perform much better. These concepts also map directly to Core Web Vitals: • LCP → How fast the main content is painted • CLS → Layout shifts caused by late layout changes • INP / FID → How quickly the browser responds visually to user interactions A few practical habits that help: • Prefer transform and opacity for animations instead of top, left, width, or height • Avoid repeatedly reading layout properties like offsetHeight in tight loops • Reserve space for images or dynamic content to prevent layout shifts • Optimize fonts and defer non-critical assets in frameworks like Next.js A useful trick when debugging performance: Open Chrome DevTools → enable Paint Flashing → scroll or interact with the page and observe which areas repaint. It’s a simple way to see where performance bottlenecks might be hiding. Curious — what was the last frontend performance issue that surprised you? #Frontend #ReactJS #NextJS #WebPerformance #CoreWebVitals #WebDevelopment #SoftwareEngineering #FrontendEngineering

Stop using getBoundingClientRect() for tooltips. For years, positioning a tooltip meant: ∙ Measure the target with getBoundingClientRect() ∙ Calculate top/left manually ∙ Add scroll listeners, resize observers ∙ Handle edge cases: zoom, RTL, container transforms, font size changes ∙ Ship a library (Popper.js, Floating UI) just for this All of that for something the browser should handle natively. Now it does. CSS Anchor Positioning just hit Baseline across all major browsers (Chrome, Safari, Firefox 147+). Four lines of CSS replace hundreds of lines of JS: .button { anchor-name: –btn; } .tooltip { position-anchor: –btn; position: absolute; top: anchor(bottom); left: anchor(left); } No event listeners. No resize observers. No scroll handlers. No reflow hacks. The browser repositions automatically when layout changes – font size, zoom, container resize, viewport shift. And with position-try-fallbacks, the browser flips the tooltip to a fallback position when it runs out of space. Something that took an entire library to solve. This isn’t a “nice to have.” This is a paradigm shift in how we build UI components. Tooltips, dropdowns, popovers, autocompletes, context menus – all natively positioned by the browser. 200+ lines of JS → 4 lines of CSS. Docs and 1st comment links below. #CSS #WebDevelopment #Frontend #JavaScript #WebPlatform

New Project Completed: CSS Color Markers As part of my frontend development journey, I built a small project using HTML and CSS to create colorful markers. In this project I practiced: • CSS Gradients • Box Shadows • Different color systems (RGB, HSL, RGBA) • Layout with inline-block Even simple projects like this help me better understand how CSS styling works and how different properties combine to create visual effects. I'm continuing to build small projects every day as I improve my frontend development skills. source code -> https://lnkd.in/dq_UCFux Live demo -> https://lnkd.in/dNBhhcTC #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningInPublic

🤦♀️ 𝐀 𝐒𝐦𝐚𝐥𝐥 𝐂𝐒𝐒 𝐇𝐚𝐜𝐤 𝐂𝐚𝐮𝐬𝐞𝐝 𝐚 𝐁𝐢𝐠 𝐔𝐈 𝐁𝐮𝐠… Yesterday I spent almost 30 minutes debugging something that made no sense. I clicked on a Clock component ⏰ in my React UI and somehow it was changing the website theme 🌙☀️. At first I thought: Maybe the click event is bubbling 🤔 Maybe the Clock component has some hidden handler Maybe React state is behaving weirdly But none of those were the problem. Then I opened Chrome DevTools and inspected the elements. And there it was… 👀 The theme toggle button was invisibly overlapping the clock. Why? Because of negative margins. <𝘐𝘤𝘰𝘯𝘉𝘶𝘵𝘵𝘰𝘯 𝘰𝘯𝘊𝘭𝘪𝘤𝘬={() => 𝘵𝘰𝘨𝘨𝘭𝘦𝘋𝘢𝘳𝘬𝘛𝘩𝘦𝘮𝘦("𝘵𝘩𝘦𝘮𝘦", "")}>  <𝘍𝘰𝘯𝘵𝘈𝘸𝘦𝘴𝘰𝘮𝘦𝘐𝘤𝘰𝘯 𝘴𝘵𝘺𝘭𝘦={{ 𝘮𝘢𝘳𝘨𝘪𝘯𝘓𝘦𝘧𝘵: "-130𝘱𝘹" }} /> </𝘐𝘤𝘰𝘯𝘉𝘶𝘵𝘵𝘰𝘯> <𝘥𝘪𝘷 𝘴𝘵𝘺𝘭𝘦={{ 𝘮𝘢𝘳𝘨𝘪𝘯𝘓𝘦𝘧𝘵: "-60𝘱𝘹" }}>  <𝘊𝘭𝘰𝘤𝘬 /> </𝘥𝘪𝘷> The button was pushed 130px to the left, extending its clickable area. So whenever I clicked the clock, I was actually clicking the IconButton sitting on top of it. ⚠️ Invisible UI overlaps are one of the trickiest frontend bugs. Instead of using layout hacks, I fixed it using Flexbox: <𝘎𝘳𝘪𝘥 𝘪𝘵𝘦𝘮 𝘴𝘵𝘺𝘭𝘦={{ 𝘥𝘪𝘴𝘱𝘭𝘢𝘺: "𝘧𝘭𝘦𝘹", 𝘢𝘭𝘪𝘨𝘯𝘐𝘵𝘦𝘮𝘴: "𝘤𝘦𝘯𝘵𝘦𝘳", 𝘨𝘢𝘱: "10𝘱𝘹" }}> <𝘐𝘤𝘰𝘯𝘉𝘶𝘵𝘵𝘰𝘯 𝘰𝘯𝘊𝘭𝘪𝘤𝘬={() => 𝘵𝘰𝘨𝘨𝘭𝘦𝘋𝘢𝘳𝘬𝘛𝘩𝘦𝘮𝘦("𝘵𝘩𝘦𝘮𝘦", "")}> <𝘍𝘰𝘯𝘵𝘈𝘸𝘦𝘴𝘰𝘮𝘦𝘐𝘤𝘰𝘯 /> </𝘐𝘤𝘰𝘯𝘉𝘶𝘵𝘵𝘰𝘯>  <𝘊𝘭𝘰𝘤𝘬 />  </𝘎𝘳𝘪𝘥> ✔ Removed negative margins ✔ Used display: flex for layout ✔ Added gap for spacing ✔ No more overlapping click areas ✨ Lesson learned: Modern CSS (Flexbox/Grid) is far more reliable than using negative margins for layout. Sometimes the bug isn’t in your JavaScript logic… It’s hiding in your CSS layout. Have you ever faced a bug where the UI looked correct but behaved completely wrong? #FrontendDevelopment #ReactJS #CSS #Debugging #WebDevelopment #Programming

Frontend Practice – Bootstrap Forms I recently built 10 different responsive forms using Bootstrap to strengthen my frontend development skills. ✨ What I implemented: 🔹 5 Normal Bootstrap Forms 🔹 5 Floating Label Forms 🔹 Clean UI with responsive layout This practice helped me understand how to design modern, user-friendly form interfaces using Bootstrap components. Every small project is a step toward becoming a better developer 💻 #Bootstrap #FrontendDevelopment #WebDevelopment #HTML #CSS #CodingPractice #DeveloperJourney #LearningByDoing #GQT

🚨 When your CSS file doesn’t load… One second your website looks premium ✨ Next second… it looks like a school project from 1998 💀 • No colors 🎨 • No alignment 📏 • No spacing 📐 • No flexbox. No grid. • Just emotional damage + raw HTML 😭 That’s when you realize 👇 👉 CSS is not “extra styling” It’s the personality of your product. It controls structure. It controls readability. It controls user experience. Without CSS, even the best backend feels broken. 💡 Lesson learned (again): • Always commit your code 💾 • Keep version control clean 🔄 • Never disrespect your stylesheets 🧠 Frontend developers know the pain 😂 #CSS #WebDevelopment #Frontend #ReactJS #UIUX #DevelopersLife #ProgrammingHumor

🚀 Day 11 — Revision Day: Display & Position Properties (CSS) Today was all about strengthening the fundamentals. Instead of learning something new, I focused on revising display and position properties — the backbone of layout building in frontend development. ✅ Revised display types: block inline inline-block flex grid none ✅ Revised position values: static relative absolute fixed sticky Key learning from today: Good UI layouts don’t come from memorizing properties — they come from understanding how elements behave in different contexts. The more I practice, the clearer layout logic becomes. Consistency over intensity. Small daily improvements lead to strong development skills. 💻 #Day11 #WebDevelopment #CSS #FrontendDevelopment #LearningInPublic #DeveloperJourney

Movie Nexus is a responsive frontend web application designed to display and explore movie information through a clean and modern user interface. The project is built using HTML and Tailwind CSS, focusing on responsive design and utility-first styling to ensure consistency across different screen sizes. Next.js is used as the main frontend framework, providing a structured React-based architecture along with efficient routing and component-based development. Live movie data is fetched using the OMDb API, enabling real-time access to movie details such as titles, posters, release year, and ratings. The application is deployed using GitHub Pages, making it easily accessible online and demonstrating the complete development-to-deployment workflow. Through this project, I strengthened my skills in frontend frameworks, API integration, responsive UI design, and modern web development practices. Live Demo: https://lnkd.in/gi_ewkDn GitHub Repository: https://lnkd.in/gtZ3K9Ug #NextJS #React #TailwindCSS #FrontendDevelopment  #APIIntegration #WebDevelopment

Just built an Editable Developer Profile Card with Live Preview & Theme Customizer using pure HTML, CSS, and JavaScript. This project allows users to: ✨ Enter their personal details ✨ Instantly preview changes in a dynamic profile card ✨ Customize colors, fonts, and theme (Dark/Light mode) ✨ Enable animations and effects I focused on clean UI, smooth transitions, responsive design. This project helped me strengthen my JavaScript logic, event handling, and working with CSS variables for real-time customization. Frontend development is becoming more exciting with every project I build 💻✨ #HTML #CSS #JavaScript #FrontendDevelopment #WebDevelopment #100DaysOfCode #LearningJourney #project #beginner

🧩 CSS Container Queries — the responsive upgrade your components actually need. Media queries look at the viewport. Container queries look at the component itself. That one shift changes everything about how you build reusable UI. With 3 lines of CSS you can make any component adapt to where it's placed — not just how big the screen is. Cards, sidebars, dashboard widgets — they all just work, wherever you drop them. ✅ Supported in all modern browsers — no polyfill needed. ✅ Works alongside media queries, not against them. ✅ The secret to truly portable design systems. #CSS #Frontend #WebDev #ContainerQueries #ResponsiveDesign #UIEngineering