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

VuReact compiles Vue 3 code into standard, maintainable React code. In this article, the focus is on one of Vue's most important derived-state APIs: computed().

If you write computed() in Vue, what does VuReact generate for React?

Before We Dive In

To avoid noisy examples, this article follows two small conventions:

1. All Vue and React snippets are intentionally simplified to show only the core logic.
2. The discussion assumes you are already familiar with how Vue 3 computed works.

Compilation Mapping

Vue computed() -> React useComputed()

computed() is Vue 3's core API for declaring derived state. Its dependency tracking ensures that the value is only recomputed when the reactive sources it depends on actually change.

VuReact compiles it into useComputed(), giving React the same automatic tracking and caching model.

• Vue

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

const state = reactive({
  count: 1,
  price: 99,
});

const totalPrice = computed(() => state.count * state.price);
</script>

• Compiled React

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

const state = useReactive({
  count: 1,
  price: 99,
});

const totalPrice = useComputed(() => state.count * state.price);

The mapping is direct: Vue computed() becomes the React Hook useComputed().

VuReact's useComputed is the runtime adapter for computed. You can think of it as the React-side equivalent of Vue computed state, preserving automatic dependency tracking and cached recomputation. In this example, the value only recalculates when state.count or state.price changes.

TypeScript Support Still Works

Type information is preserved here as well, so TypeScript inference on the React side remains intact.

• Vue

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

const state = reactive({
  count: 1,
  price: 99,
});

const totalPrice = computed<number>(() => state.count * state.price);
</script>

• Compiled React

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

const state = useReactive({
  count: 1,
  price: 99,
});

const totalPrice = useComputed<number>(() => state.count * state.price);

Again, no manual adjustment is needed. VuReact keeps the generic type annotation so the generated React code remains type-safe.

Writable computed Still Supports Two-Way Updates

Vue also supports writable computed state through the get / set form. VuReact preserves that pattern as well, which makes two-way derived state feel just as natural on the React side.

• Vue

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

const state = reactive({
  firstName: 'John',
  lastName: 'Smith',
});

const fullName = computed({
  get: () => `${state.firstName} ${state.lastName}`,
  set: (val: string) => {
    const [first, last] = val.split(' ');
    state.firstName = first || '';
    state.lastName = last || '';
  },
});
</script>

• Compiled React

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

const state = useReactive({
  firstName: 'John',
  lastName: 'Smith',
});

const fullName = useComputed({
  get: () => `${state.firstName} ${state.lastName}`,
  set: (val: string) => {
    const [first, last] = val.split(' ');
    state.firstName = first || '';
    state.lastName = last || '';
  },
});

VuReact's useComputed() supports the same writable-computed semantics, so you can both read and write through fullName.value while keeping the underlying reactive state in sync.