DEV Community: Raihan Mahmud

Component State Preservation: React Activity vs Angular vs Vue

Raihan Mahmud — Tue, 29 Apr 2025 10:10:47 +0000

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>

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
  }
]

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>

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:

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

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>

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)

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>
    </>
  );
}

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

Solved my first Hard Difficulty LC Problem, Yay!

Raihan Mahmud — Fri, 29 Sep 2023 14:21:43 +0000

1 week before, one of my seniors told me to work on hash table problems more since they are always relevant in interviews and practical day-to-day coding. So, I did. I just avoided looking at hard problems like my life depended on it. After doing a 20-ish mix of easy and medium problems, I found the minimum subarray problem.

So, I attempted my first Hard difficulty problem on leetcode, and I am afraid to say that it felt like they dumbed it down for a hard difficulty. I'm not sure how I feel about it. One look at the problem told me what steps I needed to take. After doing 10 easy and medium problems on subarrays, the familiarity of the pattern felt good.

It's not to say that I didn't need help from the hints; I did, but when I discussed it with a senior, he approved of my thinking process but gave a bit more hints on some edge cases.

I was almost there but merging the sliding window algorithm and hashmap DS was a bit tricky (for a newbie!). I gobbled up a messy solution, and it worked. Below is the solution after I tweaked it a bit.

To calm my nerves, I then attempted to reverse a linked list. Then, I went back and re-implemented the solution using Python (my less-used language) to see if I wasn't just regurgitating the syntax from the pattern.

Project-Focused learning to DSA Journey...

Raihan Mahmud — Mon, 25 Sep 2023 13:51:53 +0000

Do you see the cover photo on top? That's my current state. Two years back, I was employed as a content writer around this time of the year. Why work as a content writer instead of graduating with
Mech Engg degree? The blame is on me and the industry's situation. I got sidetracked during my studies purely because of the lack of motivation.

The idea of earning money popped into my mind during the final year. Since I had no love for studies and had a knack for writing, I started working part-time at a content-producing company. It paid well. But it got boring fast.

Why am I blabbering on and on about these when the title mentions otherwise? Well, long story short. Just when the love of writing was spent, I found the folder in my laptop full of Python tutorials I downloaded for the thesis on Machine learning that never came to be. So, I started learning Python again with the help of a classmate who had already transitioned from a Mech Engg background to a full-blown software developer. Shoutout to Mehedi Hasan Piash.

After a few tutorials and codingbat problems, I thought I was well on the way. It was in the middle of Covid-19. I sought advice from a senior about how to get into the local industry. Taking heed of his advice, I took a break from my Python journey and picked up Javascript as it was the easiest way to get an entry, especially the front end, i.e. React. So, I took almost a year to learn the basics of Javascript and React. Built a few small projects.

However, my confidence level didn't grow. Instead, I now had the impostor syndrome even before being recruited as a developer. I realised I could not survive in programming with only project-based skills. So, to emulate the skills of someone with a CS degree, I started learning about data structures and algorithms. CS50 was the starting point, and then the famous playlists on YouTube put me on the DSA track.

So here I am, grinding through Leetcode 2-3-4 problems a day. On the side, I am trying to have a taste of the esoteric language, C++, on codeforces.

I'll be sharing the tidbits of my DSA journey.