\n
\n 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.<\/p>\n
If you write Vue lifecycle hooks, what does VuReact generate on the React side?<\/p>\n
Before We Start<\/p>\n
To keep the examples easy to read, this article follows two simple conventions:<\/p>\n
All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
\nThe discussion assumes you are already familiar with Vue 3 lifecycle hooks such as onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted.<\/p>\n
Compilation Mapping<\/p>\n
Vue onMounted() -> React useMounted()<\/p>\n
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.<\/p>\n
script setup>
\nimport { onMounted } from ‘vue’;<\/p>\n
onMounted(() => {
\n console.log(‘component mounted’);
\n});
\nscript><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
import { useMounted } from ‘@vureact\/runtime-core’;<\/p>\n
useMounted(() => {
\n console.log(‘component mounted’);
\n});<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
VuReact’s useMounted is the runtime adapter for onMounted(), preserving the same post-mount execution timing.<\/p>\n
Vue onBeforeMount() -> React useBeforeMount()<\/p>\n
onBeforeMount() is Vue 3’s hook for logic that should run right before the first mount.<\/p>\n
script setup>
\nimport { onBeforeMount } from ‘vue’;<\/p>\n
onBeforeMount(() => {
\n console.log(‘component is about to mount’);
\n});
\nscript><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
import { useBeforeMount } from ‘@vureact\/runtime-core’;<\/p>\n
useBeforeMount(() => {
\n console.log(‘component is about to mount’);
\n});<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
VuReact’s useBeforeMount is the runtime adapter for onBeforeMount(), preserving the same pre-mount timing.<\/p>\n
Vue onBeforeUpdate() -> React useBeforeUpdate()<\/p>\n
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.<\/p>\n
script setup>
\nimport { reactive, onBeforeUpdate } from ‘vue’;<\/p>\n
const state = reactive({ count: 0 });<\/p>\n
onBeforeUpdate(() => {
\n console.log(‘before update, count:’, state.count);
\n});
\nscript><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
import { useReactive, useBeforeUpdate } from ‘@vureact\/runtime-core’;<\/p>\n
const state = useReactive({ count: 0 });<\/p>\n
useBeforeUpdate(
\n () => {
\n console.log(‘before update, count:’, state.count);
\n },
\n (state.count),
\n);<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
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.<\/p>\n
Vue onUpdated() -> React useUpdated()<\/p>\n
onUpdated() runs after a component update. It is commonly used to read the latest rendered result or trigger follow-up synchronization work.<\/p>\n
script setup>
\nimport { reactive, onUpdated } from ‘vue’;<\/p>\n
const state = reactive({ count: 0 });<\/p>\n
onUpdated(() => {
\n console.log(‘after update, count:’, state.count);
\n});
\nscript><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
import { useReactive, useUpdated } from ‘@vureact\/runtime-core’;<\/p>\n
const state = useReactive({ count: 0 });<\/p>\n
useUpdated(
\n () => {
\n console.log(‘after update, count:’, state.count);
\n },
\n (state.count),
\n);<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
VuReact’s useUpdated is the runtime adapter for onUpdated(), with dependency analysis handled automatically during compilation when needed.<\/p>\n
Vue onBeforeUnmount() -> React useBeforeUnMount()<\/p>\n
onBeforeUnmount() is Vue 3’s hook for logic that should run right before a component is removed.<\/p>\n
script setup>
\nimport { onBeforeUnmount } from ‘vue’;<\/p>\n
onBeforeUnmount(() => {
\n console.log(‘component is about to unmount’);
\n});
\nscript><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
import { useBeforeUnMount } from ‘@vureact\/runtime-core’;<\/p>\n
useBeforeUnMount(() => {
\n console.log(‘component is about to unmount’);
\n});<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
VuReact’s useBeforeUnMount is the runtime adapter for onBeforeUnmount(), preserving the expected pre-unmount timing.<\/p>\n
Vue onUnmounted() -> React useUnmounted()<\/p>\n
onUnmounted() is Vue 3’s hook for final cleanup after a component has been removed.<\/p>\n
script setup>
\nimport { onUnmounted } from ‘vue’;<\/p>\n
onUnmounted(() => {
\n console.log(‘component unmounted’);
\n});
\nscript><\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
import { useUnmounted } from ‘@vureact\/runtime-core’;<\/p>\n
useUnmounted(() => {
\n console.log(‘component unmounted’);
\n});<\/p>\n
Enter fullscreen mode<\/p>\n
Exit fullscreen mode<\/p>\n
VuReact’s useUnmounted is the runtime adapter for onUnmounted(), preserving the expected unmount timing.<\/p>\n
Related Links<\/p>\n
Repository: https:\/\/github.com\/vureact-js\/coreVuReact docs: https:\/\/vureact.top\/en\/guide\/semantic-comparison\/script\/lifecycle.htmlRuntime docs: https:\/\/runtime.vureact.top\/en\/guide\/introduction.html<\/p>\n