DEV Community

Cover image for Component State Preservation: React Activity vs Angular vs Vue
Raihan Mahmud
Raihan Mahmud

Posted on

Component State Preservation: React Activity vs Angular vs Vue

#webdev #frontend #react #vue

Hello everyone! Long time I have been away from the keyboard (with the intention to write an article! lol).

Just explored React's experimental component and how it compares to Angular and Vue's state preservation approaches. It's pretty nice and could be something developers will adopt. So, I thought to share my thoughts!

React’s Activity Component

React’s Activity component preserves state while removing elements from the DOM:

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <ExpensiveComponent />
</Activity>
Enter fullscreen mode Exit fullscreen mode

Key features:

  • Preserves component state when hidden
  • Removes DOM elements when not visible
  • Continues rendering at lower priority in the background
  • Automatically unmounts effects when hidden
  • Reattaches effects when visible again
  • Works with React’s Suspense and Transitions

Angular’s Approach

Angular doesn’t have a direct equivalent but offers a good feature:

Angular Router with RouteReuseStrategy

// In your app module
providers: [
  {
    provide: RouteReuseStrategy,
    useClass: CustomReuseStrategy
  }
]
Enter fullscreen mode Exit fullscreen mode
  • Detaches components when navigating away
  • Stores their state in memory
  • Reattaches them when navigating back
  • Limited to router views (not arbitrary components)

Vue’s KeepAlive Component

Vue’s built-in component is similar to React's Activity:

<KeepAlive>
  <component :is="currentTab"></component>
</KeepAlive>
Enter fullscreen mode Exit fullscreen mode

Key features:

  • Preserves component instances and state when toggled off
  • Components are cached rather than destroyed
  • Provides activated and deactivated lifecycle hooks
  • Can limit cache size with max property
  • Can include/exclude specific components

How React Activity Edges Past Vue KeepAlive

While Vue’s KeepAlive has been around longer, React’s Activity has several advantages:

  1. Background Rendering Prioritization

React Activity:

  • Uses Concurrent Mode features
  • Hidden components render at lower priority
  • Visible UI gets rendering priority
  • Background rendering can be interrupted for high-priority updates

Vue KeepAlive:

  • Caches component instances but doesn’t have priority concept
  • Deactivated components are cached but not rendered
  • Reactivated components render at normal priority
  1. Effect Handling

React Activity:

  • Effects automatically unmounted when hidden
  • Effects automatically remounted when visible
  • No manual effect management required

Vue KeepAlive:

  • Requires manual handling in activated/deactivated hooks: 
<script> export default {   
activated() { 
    // Manually restart effects     
this.startPolling();     
this.setupEventListeners();   },   

deactivated() {     
// Manually clean up effects     
this.stopPolling();     
this.removeEventListeners();   } } 
</script>
Enter fullscreen mode Exit fullscreen mode
  1. Rendering Behavior Visualization

Vue KeepAlive (Binary: On/Off) 

CPU Usage: ████████          ████████          ████████
Component:  Tab A active     Tab B active      Tab A active again
            Tab B inactive   Tab A inactive    Tab B inactive
            (not rendering)  (not rendering)   (not rendering)
React Activity (Priority-based)

CPU Usage: ████████▓▓        ████████▓▓        ████████▓▓
Component:  Tab A (high)     Tab B (high)      Tab A (high)
            Tab B (low)      Tab A (low)       Tab B (low)
            (still updating) (still updating)  (still updating)
Enter fullscreen mode Exit fullscreen mode

In the React model, those "▓▓" represent low-priority rendering that happens during idle time, allowing hidden components to stay updated without interfering with the main user experience.

Real-World Use Case

For a multi-tab dashboard application:

function Dashboard() {
  const [activeTab, setActiveTab] = useState('overview');
return (
    <>
      <TabSelector activeTab={activeTab} onChange={setActiveTab} />
      <Activity mode={activeTab === 'overview' ? 'visible' : 'hidden'}>
        <OverviewTab />
      </Activity>
      <Activity mode={activeTab === 'analytics' ? 'visible' : 'hidden'}>
        <AnalyticsTab />
      </Activity>
      <Activity mode={activeTab === 'settings' ? 'visible' : 'hidden'}>
        <SettingsTab />
      </Activity>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Benefits:

  • Hidden tabs continue updating at lower priority
  • Data changes processed without blocking main thread
  • Tabs instantly available with fresh data when switching
  • UI state (expanded sections, filters) preserved
  • No manual management of data flow required

Conclusion

All three frameworks offer ways to preserve component state, but with different tradeoffs:

  • Angular’s approach is route-focused and requires more custom code
  • Vue’s KeepAlive is simple but requires manual lifecycle management
  • React’s Activity adds sophisticated priority-based rendering, making it particularly valuable for data-heavy applications where background updates are important

Top comments (0)