DEV Community

Ryan John
Ryan John

Posted on

What Does Vue 3 `ref()` Compile to in React with VuReact?

#webdev #javascript #react #vue

VuReact compiles Vue 3 code into standard, maintainable React code. In this article, we will focus on one of the most frequently used Vue APIs: ref() and shallowRef().

If you write them in Vue, what does VuReact turn them into on the React side?

A Quick Note Before We Start

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

  1. All Vue and React snippets show core logic only, with full component wrappers and unrelated configuration omitted.
  2. The discussion assumes you are already familiar with the API and behavior of Vue 3 ref and shallowRef.

Compilation Mapping

Vue ref() -> React useVRef()

ref() is one of the most fundamental reactive APIs in Vue 3, and easily one of the most commonly used in day-to-day development.

Here is the simplest possible example:

  • Vue 
<script setup>
import { ref } from 'vue';

// Primitive reactive state
const count = ref(0);
</script>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { useVRef } from '@vureact/runtime-core';

// Compiled into a dedicated Hook that mirrors Vue ref semantics
const count = useVRef(0);
Enter fullscreen mode Exit fullscreen mode

As you can see, Vue's ref() is compiled directly into the React Hook useVRef().

VuReact's useVRef is the runtime adapter for ref. You can think of it as a React-side equivalent of Vue ref, designed to preserve the same mental model and behavior, including reactive updates, .value access, and predictable view re-rendering.

TypeScript Support Stays Intact

In real-world projects, TypeScript is the default rather than the exception. VuReact preserves generic type annotations so React-side type safety and editor hints stay intact.

  • Vue 
<script lang="ts" setup>
const title = ref<string>(''); // string
const isLoading = ref<boolean>(false); // boolean
const userList = ref<Array<{ id: number; name: string }>>([]); // array of objects
const config = ref<Record<string, any>>({ theme: 'dark' }); // record type
</script>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
const title = useVRef<string>('');
const isLoading = useVRef<boolean>(false);
const userList = useVRef<Array<{ id: number; name: string }>>([]);
const config = useVRef<Record<string, any>>({ theme: 'dark' });
Enter fullscreen mode Exit fullscreen mode

No manual type adaptation is required. VuReact keeps the original type annotations so the generated React code remains just as type-safe as the Vue source.

Vue shallowRef() -> React useShallowVRef()

shallowRef() is Vue 3's shallow reactive variant. It is especially useful when you want to react to top-level reference changes without deeply tracking nested properties.

  • Vue 
<script setup>
import { shallowRef } from 'vue';

// Only tracks top-level reference changes
const count = shallowRef({ a: { b: 1, c: { d: 2 } } });
</script>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { useShallowVRef } from '@vureact/runtime-core';

// Preserves shallowRef-style shallow reactivity
const count = useShallowVRef({ a: { b: 1, c: { d: 2 } } });
Enter fullscreen mode Exit fullscreen mode

The mapping follows the same pattern: Vue shallowRef() becomes useShallowVRef().

VuReact's useShallowVRef is the runtime adapter for shallowRef. In practice, that means only top-level reference changes trigger updates, while nested property mutations do not. This lines up well with React's update model and is especially helpful for performance-sensitive scenarios involving complex objects.

Top comments (0)