Dynamic components with is attribute in Vue - Performance & Optimization

Performance: Dynamic components with is attribute

MEDIUM IMPACT

This affects rendering speed and responsiveness by controlling which component Vue renders dynamically.

Switching between multiple components dynamically in Vue using the is attribute

Vue

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

// Keeps inactive components cached to avoid full reloads

Caching inactive components avoids destroying and recreating them, reducing reflows and improving responsiveness.

📈 Performance GainReduces reflows to zero on cached switches, improving INP by 30-50ms on average

Switching between multiple components dynamically in Vue using the is attribute

Vue

<component :is="currentComponent" />

// currentComponent changes frequently triggering full component reloads

Each change destroys the old component and creates a new one, causing full re-renders and layout recalculations.

📉 Performance CostTriggers 1 full reflow and repaint per component switch, blocking interaction for 50-100ms on complex components

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Dynamic component switch without caching	Destroys and recreates full component subtree	1 reflow per switch	High paint cost due to full redraw	[X] Bad
Dynamic component switch with <keep-alive>	Reuses cached DOM nodes, minimal DOM changes	No reflows on cached switches	Low paint cost, only updates needed	[OK] Good

Rendering Pipeline

When the is attribute changes, Vue destroys the old component and creates a new one, triggering style recalculation, layout, paint, and composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive due to full component teardown and rebuild.

Core Web Vital Affected

INP

This affects rendering speed and responsiveness by controlling which component Vue renders dynamically.

Optimization Tips

1Avoid frequent full component destruction when switching dynamic components.

2Use <keep-alive> to cache components and reduce reflows and repaints.

3Monitor Layout and Paint times in DevTools Performance panel to detect costly re-renders.

Performance Quiz - 3 Questions

What is the main performance cost when switching dynamic components using the is attribute without caching?

A No DOM changes, just attribute updates

B Full component destruction and recreation causing reflows and repaints

C Only style recalculation without layout changes

D Network delay fetching new component code

DevTools: Performance

How to check: Record a performance profile while switching dynamic components. Look for Layout and Paint events after each switch.

What to look for: High Layout and Paint times indicate full re-renders. Lower times with <keep-alive> show better performance.