Transforming Vue 3 reactive() to React with VuReact

Introduction

VuReact serves as a bridge to translate Vue 3 code into standard React, focusing on reactivity APIs. This article delves into the transformation of Vue 3's reactive() and shallowReactive() into their React counterparts using VuReact.

Vue reactive() to React useReactive()

In Vue 3, reactive() is a cornerstone for creating reactive data structures. It enables objects to be reactive proxies, ensuring any changes in properties reflect directly in the UI.

Vue Example

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

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

Compiled React Example

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

// Mirrors Vue's reactive behavior
const state = useReactive({
  count: 0,
  title: 'VuReact',
});

In this transformation, reactive() is mapped to useReactive(). This React hook replicates Vue's object reactivity, ensuring properties update view components effortlessly.

TypeScript Type Preservation

VuReact not only translates functionality but also preserves TypeScript types, crucial for maintaining robust codebases.

Vue with TypeScript

<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 with TypeScript

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' },
});

The type annotations are seamlessly carried over, ensuring the same level of type safety and editor support in React.

Vue shallowReactive() to React useShallowReactive()

shallowReactive() offers a more focused reactivity by only tracking changes at the top level of an object.

Vue Example

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

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

Compiled React Example

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

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

With useShallowReactive(), only top-level changes are observed, making it suitable for performance-sensitive applications where deep reactivity isn't required.

Conclusion

VuReact efficiently maps Vue 3 reactivity APIs to React, preserving behavior and type integrity. This seamless transition supports developers in leveraging Vue's reactivity within React environments, enhancing cross-framework compatibility.