← Back to the Blog Home
post's image

Daily Comparison #23: Angular vs. React vs. Vue.js on Repaint & Reflow

Ghost wrote 3 days ago (May 2, 2025) with 24 | 5 mins read

Welcome back to the Daily Comparison! In today's episode, we're taking a closer look at the performance characteristics of three popular frontend frameworks - Angular, React, and Vue.js - specifically focusing on how they handle conditional rendering and the impact on browser repaint and reflow processes.

General Principles:

All three frameworks, Angular, React, and Vue.js, utilize a virtual DOM or similar techniques to optimize updates to the actual DOM, aiming to minimize costly repaint and reflow operations. They achieve this by comparing the virtual DOM with the real DOM and only applying the necessary changes.

Angular (ngIf):

  • When ngIf in Angular evaluates to false, it structurally removes the element and its child nodes from the Document Object Model (DOM). When the condition becomes true again, the element is recreated and re-inserted into the DOM.
  • Reflow: The addition or removal of elements in the DOM, as performed by ngIf, can potentially trigger a reflow. This occurs when the browser needs to recalculate the layout and position of other elements on the page to accommodate the change in the DOM structure.
  • Repaint: Following a reflow (if one occurs) or if only the styles of the elements have changed due to the structural change, the browser will perform a repaint. This is the process of redrawing the affected parts of the user interface on the screen.
  • Angular's change detection mechanism is designed to be efficient, aiming to update only the components whose data has changed. This helps in limiting the scope of both repaints and reflows to the necessary parts of the application.

React (Conditional Rendering):

  • React handles conditional rendering by conditionally returning JSX elements from a component's render function (or through the use of hooks in functional components). Common patterns include using the && operator or ternary operators to decide whether or not to render a specific element.
  • Reflow: Similar to Angular, when the conditional rendering logic in React results in the addition or removal of elements from the DOM, a reflow might be triggered. React's reconciliation algorithm efficiently identifies these changes in the virtual DOM and updates the real DOM accordingly.
  • Repaint: Once the real DOM has been updated (if structural changes occurred), the browser will then repaint the affected regions to visually represent the changes.
  • React also employs optimizations such as batching state updates to minimize the number of re-renders and subsequent DOM manipulations, which indirectly helps in reducing repaints and reflows.

Vue.js (v-if):

  • Vue.js's v-if directive is a conditional rendering directive that also performs structural changes to the DOM. When the expression bound to v-if is false, the element and its children are completely removed from the DOM. When the expression becomes true, the element is re-inserted into the DOM.
  • Reflow: The dynamic addition or removal of elements from the DOM managed by v-if can lead to a reflow if the layout of the surrounding elements is affected by these changes.
  • Repaint: After the DOM structure has been altered based on the v-if condition, the browser will need to repaint the relevant areas of the screen to show the updated UI.
  • Vue.js's reactivity system is designed to efficiently track dependencies and update only the necessary parts of the DOM when data changes, contributing to optimized repaint and reflow behavior. Vue also offers the v-show directive, which toggles the display CSS property and thus only triggers a repaint, making it more performant for frequently toggled elements.

Performance Considerations:

  • Structural Changes vs. Visibility: Conditional rendering that involves adding or removing elements (like ngIf and v-if, and React's equivalent) has a greater potential to cause reflows compared to simply toggling the visibility of an element using CSS (e.g., display: none or Vue's v-show). Toggling visibility generally only results in a repaint.
  • Complexity and Frequency: The performance impact of conditional rendering in these frameworks is also influenced by the complexity of the elements being rendered conditionally and how frequently the conditions change. Rendering a large, complex component based on a frequently changing condition will have a higher performance cost than rendering a simple element.
  • Framework Optimizations: All three frameworks are continuously being optimized for performance. Their virtual DOM implementations and efficient update mechanisms are key to minimizing unnecessary DOM manipulations and, consequently, reducing repaints and reflows.

Conclusion:

While all three frameworks provide efficient ways to handle UI updates, the act of structurally adding or removing elements based on conditional rendering (using ngIf, React's conditional rendering patterns, or v-if) can potentially lead to browser reflows, followed by repaints. The frameworks' built-in optimizations aim to minimize the scope and impact of these operations. For scenarios where elements need to be shown or hidden frequently, using CSS-based visibility toggling (like Vue's v-show) can be a more performant approach as it avoids reflows. Ultimately, the performance of conditional rendering in these frameworks depends on a combination of the framework's efficiency and how developers structure their applications and components.