DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

How does VuReact compile Vue's KeepAlive component to React?

#webdev #javascript #react #vue

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in <KeepAlive> component is compiled into React code by VuReact.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

  1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
  2. The discussion assumes you are already familiar with Vue 3's <KeepAlive> component usage.

Compilation Mapping

KeepAlive: Component caching

<KeepAlive> is Vue's built-in component for caching component instances. It preserves component state during dynamic component switching, avoiding re-rendering and data loss.

Basic KeepAlive usage

  • Vue 
<template>
  <KeepAlive>
    <component :is="currentView" />
  </KeepAlive>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { KeepAlive } from '@vureact/runtime-core';

<KeepAlive>
  <Component is={currentView} />
</KeepAlive>
Enter fullscreen mode Exit fullscreen mode

As the example shows, Vue's <KeepAlive> component is compiled into the KeepAlive adapter component provided by VuReact Runtime — think of it as "Vue's KeepAlive for React".

The key characteristics of this compilation approach are:

  1. Semantic consistency: Fully simulates Vue <KeepAlive> behavior by implementing component instance caching
  2. State preservation: Caches removed component instances, preventing state loss
  3. Performance optimization: Reduces unnecessary component re-rendering
  4. React adaptation: Implements Vue's caching semantics in the React environment

KeepAlive with key

To ensure caching works correctly, it is recommended to provide a stable key for dynamic components.

  • Vue 
<template>
  <KeepAlive>
    <component :is="currentComponent" :key="componentKey" />
  </KeepAlive>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<KeepAlive>
  <Component is={currentComponent} key={componentKey} />
</KeepAlive>
Enter fullscreen mode Exit fullscreen mode

The importance of key:

  1. Cache identifier: key is used to identify and match cached instances
  2. Stable switching: Ensures correct cache hits when switching components
  3. Performance optimization: Avoids unnecessary cache creation and destruction
  4. Best practice: Always provide a stable key for dynamic components

Include and exclude control

<KeepAlive> supports the include and exclude attributes for precise control over which components should be cached.

include: Include specific components

  • Vue 
<template>
  <KeepAlive :include="['ComponentA', 'ComponentB']">
    <component :is="currentView" />
  </KeepAlive>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<KeepAlive include={['ComponentA', 'ComponentB']}>
  <Component is={currentView} />
</KeepAlive>
Enter fullscreen mode Exit fullscreen mode

exclude: Exclude specific components

  • Vue 
<template>
  <KeepAlive :exclude="['GuestPanel', /^Temp/]">
    <component :is="currentView" />
  </KeepAlive>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<KeepAlive exclude={['GuestPanel', /^Temp/]}>
  <Component is={currentView} />
</KeepAlive>
Enter fullscreen mode Exit fullscreen mode

Matching rules:

  1. String matching: Exact match on component name
  2. Regular expression: Matches component names matching the pattern
  3. Array combination: Supports arrays of strings and regular expressions
  4. Key matching: Attempts to match both component name and cache key

Maximum cache instances

The max attribute limits the maximum number of cached instances, preventing excessive memory usage.

  • Vue 
<template>
  <KeepAlive :max="3">
    <component :is="currentTab" />
  </KeepAlive>
</template>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<KeepAlive max={3}>
  <Component is={currentTab} />
</KeepAlive>
Enter fullscreen mode Exit fullscreen mode

Cache eviction strategy:

  1. LRU algorithm: Evicts the least recently accessed cached instance
  2. Memory management: Automatically clears cache exceeding the limit
  3. Performance balance: Strikes a balance between memory usage and performance
  4. Intelligent management: Manages cache intelligently based on access frequency

Cache lifecycle

Components cached by <KeepAlive> have special lifecycle hooks that can be observed.

Activated and deactivated lifecycle

  • Vue 
<script setup>
import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
  console.log('Component activated');
});

onDeactivated(() => {
  console.log('Component deactivated');
});
</script>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { useActived, useDeactivated } from '@vureact/runtime-core';

function MyComponent() {
  useActived(() => {
    console.log('Component activated');
  });

  useDeactivated(() => {
    console.log('Component deactivated');
  });

  return <div>Component content</div>;
}
Enter fullscreen mode Exit fullscreen mode

Lifecycle events:

  1. useActived: Triggered when the component is restored from cache and displayed
  2. useDeactivated: Triggered when the component is cached
  3. Initial render: Activated is also triggered on the component's initial render
  4. Final unmount: Deactivated is triggered when the component is finally destroyed

Compilation strategy summary

VuReact's KeepAlive compilation strategy demonstrates a complete component caching conversion capability:

  1. Direct component mapping: Maps Vue <KeepAlive> directly to VuReact's <KeepAlive>
  2. Full attribute support: Supports all attributes including include, exclude, max, etc.
  3. Lifecycle adaptation: Converts Vue lifecycle hooks into React Hooks
  4. Cached semantics preserved: Fully preserves Vue's caching behavior and semantics

How KeepAlive works:

  1. Instance caching: Preserves the instance in memory when a component is switched out
  2. State preservation: Keeps all of the component's state and data
  3. DOM retention: Retains the component's DOM structure
  4. Smart restoration: Quickly restores the previous instance when switching back

Performance optimization strategy:

  1. On-demand caching: Only caches components that truly need it
  2. Memory management: Intelligently manages cache memory usage
  3. Fast restoration: Optimizes cache restoration performance
  4. Garbage collection: Timely cleanup of cache that is no longer needed

Important notes:

  1. Single child node: <KeepAlive> can only have one direct child node
  2. Component type: Can only cache component elements, not regular elements
  3. Key requirement: Without a stable key, it degrades to non-cached rendering

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement component caching logic. The compiled code preserves Vue's caching semantics and performance advantages while following React's component design patterns, keeping the migrated application fully capable of component caching.

Related Links

Top comments (0)