How does VuReact compile Vue 3's lifecycle hooks to React?

VuReact is a tool that compiles Vue 3 code into standard, maintainable React code. In this article, we will look at how common Vue 3 lifecycle hooks are mapped into React.

If you write Vue lifecycle hooks, what does VuReact generate on the React side?

Before We Start

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

1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
2. The discussion assumes you are already familiar with Vue 3 lifecycle hooks such as onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted.

Compilation Mapping

Vue onMounted() -> React useMounted()

onMounted() is Vue 3's hook for running logic after a component is mounted for the first time. It is commonly used for initialization requests, subscriptions, and DOM-related setup.

• Vue

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

onMounted(() => {
  console.log('component mounted');
});
</script>

• Compiled React

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

useMounted(() => {
  console.log('component mounted');
});

VuReact's useMounted is the runtime adapter for onMounted(), preserving the same post-mount execution timing.

Vue onBeforeMount() -> React useBeforeMount()

onBeforeMount() is Vue 3's hook for logic that should run right before the first mount.

• Vue

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

onBeforeMount(() => {
  console.log('component is about to mount');
});
</script>

• Compiled React

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

useBeforeMount(() => {
  console.log('component is about to mount');
});

VuReact's useBeforeMount is the runtime adapter for onBeforeMount(), preserving the same pre-mount timing.

Vue onBeforeUpdate() -> React useBeforeUpdate()

onBeforeUpdate() runs before a component update, excluding the initial mount. It is useful when you need to inspect or prepare state before the next render is committed.

• Vue

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

const state = reactive({ count: 0 });

onBeforeUpdate(() => {
  console.log('before update, count:', state.count);
});
</script>

• Compiled React

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

const state = useReactive({ count: 0 });

useBeforeUpdate(
  () => {
    console.log('before update, count:', state.count);
  },
  [state.count],
);

VuReact's useBeforeUpdate is the runtime adapter for onBeforeUpdate(). When the React-side API needs dependencies, VuReact analyzes them during compilation and generates the dependency array automatically.

Vue onUpdated() -> React useUpdated()

onUpdated() runs after a component update. It is commonly used to read the latest rendered result or trigger follow-up synchronization work.

• Vue

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

const state = reactive({ count: 0 });

onUpdated(() => {
  console.log('after update, count:', state.count);
});
</script>

• Compiled React

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

const state = useReactive({ count: 0 });

useUpdated(
  () => {
    console.log('after update, count:', state.count);
  },
  [state.count],
);

VuReact's useUpdated is the runtime adapter for onUpdated(), with dependency analysis handled automatically during compilation when needed.

Vue onBeforeUnmount() -> React useBeforeUnMount()

onBeforeUnmount() is Vue 3's hook for logic that should run right before a component is removed.

• Vue

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

onBeforeUnmount(() => {
  console.log('component is about to unmount');
});
</script>

• Compiled React

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

useBeforeUnMount(() => {
  console.log('component is about to unmount');
});

VuReact's useBeforeUnMount is the runtime adapter for onBeforeUnmount(), preserving the expected pre-unmount timing.

Vue onUnmounted() -> React useUnmounted()

onUnmounted() is Vue 3's hook for final cleanup after a component has been removed.

• Vue

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

onUnmounted(() => {
  console.log('component unmounted');
});
</script>

• Compiled React

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

useUnmounted(() => {
  console.log('component unmounted');
});

VuReact's useUnmounted is the runtime adapter for onUnmounted(), preserving the expected unmount timing.

Related Links

Repository: https://github.com/vureact-js/core

VuReact docs: https://vureact.top/en/guide/semantic-comparison/script/lifecycle.html

Runtime docs: https://runtime.vureact.top/en/guide/introduction.html