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

VuReact compiles Vue 3 code into standard, maintainable React code. This time, the focus is on two of Vue's most common reactive APIs: reactive() and shallowReactive().

If you write them in Vue, what does the resulting React code actually look like?

Before the Examples

To keep the article focused, these examples follow two small conventions:

1. All Vue and React snippets show only the core logic, with component wrappers and unrelated setup omitted.
2. The article assumes you are already familiar with the API shape and core behavior of Vue 3 reactive and shallowReactive.

Compilation Mapping

Vue reactive() -> React useReactive()

reactive() is one of the most common entry points into Vue 3 reactivity. It wraps objects and arrays in a reactive proxy so property changes can drive view updates.

Here is the most basic example:

• Vue

<script setup>
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  title: 'VuReact',
});
</script>

• Compiled React

import { useReactive } from '@vureact/runtime-core';

// Compiled into a Hook that mirrors Vue reactive behavior
const state = useReactive({
  count: 0,
  title: 'VuReact',
});

This is the core mapping: Vue reactive() becomes the React Hook useReactive().

VuReact's useReactive is the runtime adapter for reactive. You can think of it as the React-side equivalent of Vue's object reactivity model, preserving familiar behavior such as reactive property updates, direct nested property access, and smooth integration with React component rendering.

TypeScript Types Are Preserved

VuReact also keeps type information intact, which matters a lot in real-world TypeScript codebases.

• Vue

<script lang="ts" setup>
import { reactive } from 'vue';

interface User {
  id: number;
  name: string;
}

const state = reactive<{
  loading: boolean;
  users: User[];
  config: Record<string, any>;
}>({
  loading: false,
  users: [],
  config: { theme: 'dark' },
});
</script>

• Compiled React

import { useReactive } from '@vureact/runtime-core';

interface User {
  id: number;
  name: string;
}

const state = useReactive<{
  loading: boolean;
  users: User[];
  config: Record<string, any>;
}>({
  loading: false,
  users: [],
  config: { theme: 'dark' },
});

There is no need to rework the types by hand. VuReact carries the original annotations forward so the generated React code keeps the same type safety and editor experience.

Vue shallowReactive() -> React useShallowReactive()

shallowReactive() creates a shallow reactive object in Vue 3. It is useful when you only want to observe changes at the top level, rather than deeply tracking every nested property.

• Vue

<script setup>
import { shallowReactive } from 'vue';

const state = shallowReactive({
  nested: { count: 0 },
});
</script>

• Compiled React

import { useShallowReactive } from '@vureact/runtime-core';

const state = useShallowReactive({
  nested: { count: 0 },
});

This follows the same idea as reactive(): Vue shallowReactive() is compiled into useShallowReactive().

VuReact's useShallowReactive is the runtime adapter for shallowReactive. In other words, only top-level reference changes are tracked, while nested mutations do not trigger updates. That makes it a practical fit for large objects, third-party data, or performance-sensitive structures where deep tracking would be unnecessary.