Vue v-memo and v-once to React: How does VuReact compile them?

#webdev #javascript #vue #react

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 common v-memo/v-once directives are compiled into React code by VuReact.

Before We Start

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

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with Vue 3's v-memo and v-once directive usage.

Compilation Mapping

v-memo: Conditional memoized rendering

v-memo is a performance optimization directive introduced in Vue 3.2+. It determines whether to re-render a component or element based on changes in a dependency array. Re-rendering is only triggered when the dependencies change.

<Comp v-memo="[a, b]">
  ...
</Comp>

Compiled React

{
  useMemo(() => (
    <Comp>...</Comp>
  ), [a, b])
}

As the example shows, Vue's v-memo directive is compiled into React's useMemo Hook. VuReact adopts a memoization compilation strategy, converting the template directive into React's performance optimization Hook. This fully preserves Vue's conditional memoization semantics — the <Comp> component is only re-computed and re-rendered when a or b changes.

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue v-memo behavior by conditionally rendering based on a dependency array
Performance optimization: Avoids unnecessary component re-rendering, improving application performance
React-native support: Uses React's built-in useMemo Hook with no additional runtime required

Core working principle:

Vue's v-memo: Compares values in the dependency array. If all values are equal (using Object.is comparison), it skips subtree updates
React's useMemo: Compares the dependency array. If dependencies have not changed, it returns the cached rendering result

v-once: One-time static rendering

v-once is Vue's directive for one-time rendering. An element or component is computed and rendered only once on the initial render, and will not update even if the data changes afterwards.

<Comp v-once />

Compiled React

{useMemo(() => <Comp />, [])}

As the example shows, Vue's v-once directive is compiled into React's useMemo Hook with an empty dependency array. VuReact adopts a static memoization compilation strategy, converting the template directive into a dependency-free useMemo. This fully preserves Vue's one-time rendering semantics — the component is computed only once on the initial render and always returns the cached result afterwards.

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue v-once behavior by achieving true one-time rendering
Maximum performance optimization: Completely avoids all subsequent re-rendering for the best performance
Static content optimization: Ideal for static content that never changes
React-native implementation: Achieves one-time caching using useMemo with an empty dependency array

Core working principle:

Vue's v-once: Marks the element/component as static, skipping all subsequent reactive updates
React's empty-dependency useMemo: Computed only once when the component mounts; subsequent renders directly return the cached value

v-memo vs v-once comparison

Feature	v-memo	v-once
Vue semantics	Conditional memoized rendering	One-time static rendering
React equivalent	`useMemo(fn, deps)`	`useMemo(fn, [])`
Re-render condition	When dependencies change	Never re-renders
Use case	Optimization based on specific data	Completely static content
Performance impact	Reduces unnecessary renders	Eliminates all subsequent renders
Flexibility	High (customizable dependencies)	Low (fully static)

Compilation strategy summary

VuReact's compilation strategy demonstrates intelligent performance optimization conversion:

Precise semantic mapping: Accurately maps Vue's performance optimization directives to their corresponding React Hooks
Automatic dependency analysis: Intelligently analyzes dependency relationships in templates and generates correct dependency arrays
Safe boundary handling: Handles edge cases to ensure the compiled code behaves consistently with Vue
Developer experience: Generates code that follows React best practices, making it easy to understand and maintain

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite performance optimization logic. The compiled code preserves Vue's semantics and optimization effects while following React's performance best practices, keeping the migrated application running at peak performance.