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:
All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
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.
script setup>
import { onMounted } from ‘vue’;
onMounted(() => {
console.log(‘component mounted’);
});
script>
Enter fullscreen mode
Exit fullscreen mode
import { useMounted } from ‘@vureact/runtime-core’;
useMounted(() => {
console.log(‘component mounted’);
});
Enter fullscreen mode
Exit fullscreen mode
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.
script setup>
import { onBeforeMount } from ‘vue’;
onBeforeMount(() => {
console.log(‘component is about to mount’);
});
script>
Enter fullscreen mode
Exit fullscreen mode
import { useBeforeMount } from ‘@vureact/runtime-core’;
useBeforeMount(() => {
console.log(‘component is about to mount’);
});
Enter fullscreen mode
Exit fullscreen mode
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.
script setup>
import { reactive, onBeforeUpdate } from ‘vue’;
const state = reactive({ count: 0 });
onBeforeUpdate(() => {
console.log(‘before update, count:’, state.count);
});
script>
Enter fullscreen mode
Exit fullscreen mode
import { useReactive, useBeforeUpdate } from ‘@vureact/runtime-core’;
const state = useReactive({ count: 0 });
useBeforeUpdate(
() => {
console.log(‘before update, count:’, state.count);
},
(state.count),
);
Enter fullscreen mode
Exit fullscreen mode
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.
script setup>
import { reactive, onUpdated } from ‘vue’;
const state = reactive({ count: 0 });
onUpdated(() => {
console.log(‘after update, count:’, state.count);
});
script>
Enter fullscreen mode
Exit fullscreen mode
import { useReactive, useUpdated } from ‘@vureact/runtime-core’;
const state = useReactive({ count: 0 });
useUpdated(
() => {
console.log(‘after update, count:’, state.count);
},
(state.count),
);
Enter fullscreen mode
Exit fullscreen mode
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.
script setup>
import { onBeforeUnmount } from ‘vue’;
onBeforeUnmount(() => {
console.log(‘component is about to unmount’);
});
script>
Enter fullscreen mode
Exit fullscreen mode
import { useBeforeUnMount } from ‘@vureact/runtime-core’;
useBeforeUnMount(() => {
console.log(‘component is about to unmount’);
});
Enter fullscreen mode
Exit fullscreen mode
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.
script setup>
import { onUnmounted } from ‘vue’;
onUnmounted(() => {
console.log(‘component unmounted’);
});
script>
Enter fullscreen mode
Exit fullscreen mode
import { useUnmounted } from ‘@vureact/runtime-core’;
useUnmounted(() => {
console.log(‘component unmounted’);
});
Enter fullscreen mode
Exit fullscreen mode
VuReact’s useUnmounted is the runtime adapter for onUnmounted(), preserving the expected unmount timing.
Related Links
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
Source link
