VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.
In this article, we will look at how VuReact optimizes top-level arrow functions when compiling Vue 3 code to React.
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 top-level arrow functions in Vue 3 and dependency optimization concepts in React.
Compilation Mapping
Top-level Vue arrow functions -> React useCallback()
Inside Vue <script setup>, top-level arrow functions are often used for event handlers, helper methods, and lightweight business logic.
VuReact analyzes the external dependencies of those top-level arrow functions during compilation. When appropriate, it compiles them into useCallback() and generates the dependency array automatically.
- Vue
<script setup lang="ts">
const inc = () => {
count.value++;
};
const fn = () => {};
const fn2 = () => {
const value = foo.value;
const fn4 = () => {
value + state.bar.c--;
};
fn();
};
</script>
- Compiled React
const inc = useCallback(() => {
count.value++;
}, [count.value]);
// No optimization is applied to dependency-free arrow functions
const fn = () => {};
const fn2 = useCallback(() => {
const value = foo.value;
// Local nested functions are not forced into useCallback
const fn4 = () => {
value + state.bar.c--;
};
fn();
}, [foo.value, state.bar.c]);
As the example shows, VuReact can generate useCallback() automatically for top-level arrow functions that depend on reactive values, so developers do not have to manage the dependency array manually.
What dependency analysis actually does
VuReact's optimization follows a few practical rules:
- only top-level arrow functions are considered for
useCallback()optimization - local or nested functions are left alone
- dependency collection follows React's rules and only tracks values that are meaningfully referenced from outside the function body
- dependency-free top-level functions remain plain functions to avoid unnecessary Hook overhead
Why this matters
In React, function components recreate function definitions on every render. For event handlers or callbacks passed to child components, that can cause unnecessary re-renders or unstable references.
By optimizing at compile time, VuReact can:
- improve callback stability
- reduce avoidable child re-renders
- preserve the original Vue authoring style without forcing explicit
useCallback()usage
