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.

Vue

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

Enter fullscreen mode

Exit fullscreen mode

Compiled React

{ useMemo (() => ( < Comp > ...…