VuReact: Cómo convertir los hooks de ciclo de vida de Vue 3 en React de forma sencilla

# VuReact: Cómo convertir los hooks de ciclo de vida de Vue 3 en React de forma sencilla

Imagina que tienes un proyecto en Vue 3 y, por alguna razón, necesitas pasarlo a React. Puede sonar a pesadilla, ¿verdad? Pero no tiene por qué serlo. VuReact es una herramienta que compila código de Vue 3 en código React estándar y mantenible. En este artículo, vamos a explorar cómo traduce los hooks de ciclo de vida más comunes de Vue 3 a React, de una manera clara y amena.

Si alguna vez te has preguntado cómo funcionan estas transformaciones internamente, o si estás considerando migrar un proyecto, quédate. Te lo explico paso a paso, como si estuviéramos tomando un café.

¿Qué son los hooks de ciclo de vida en Vue 3?

En Vue 3, los hooks de ciclo de vida son funciones que se ejecutan en momentos específicos del ciclo de vida de un componente. Desde que se monta hasta que se destruye, pasando por actualizaciones. Algunos de los más comunes son `onMounted`, `onBeforeMount`, `onBeforeUpdate`, `onUpdated`, `onBeforeUnmount` y `onUnmounted`. Cada uno tiene un propósito único, y VuReact los transforma a equivalentes en React sin perder su esencia.

Pero, ¿cómo lo hace? Vamos a verlo con ejemplos prácticos. Para mantener las cosas simples, en los fragmentos de código solo mostraremos la lógica central, sin envoltorios completos de componentes ni configuraciones irrelevantes. Asumiremos que ya estás familiarizado con estos hooks de Vue 3.

De `onMounted` a `useMounted`: el primer contacto

`onMounted` es el hook de Vue 3 que se ejecuta justo después de que el componente se monta por primera vez. Es ideal para peticiones iniciales, suscripciones o configuraciones relacionadas con el DOM.

En Vue 3, se escribe así:

```javascript import { onMounted } from 'vue';

onMounted(() => { console.log('componente montado'); }); ```

VuReact lo compila a React de esta manera:

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

useMounted(() => { console.log('componente montado'); }); ```

La función `useMounted` de VuReact es un adaptador que preserva el mismo momento de ejecución post-montaje. Es decir, tu lógica se ejecutará exactamente cuando esperas, pero ahora en el ecosistema React. Esto es genial porque no tienes que reescribir nada: solo cambias la importación y el nombre de la función.

`onBeforeMount` y `useBeforeMount`: justo antes de montar

`onBeforeMount` se ejecuta justo antes de que el componente se monte. Es útil para preparar algo justo en el último momento.

En Vue 3:

```javascript import { onBeforeMount } from 'vue';

onBeforeMount(() => { console.log('el componente está a punto de montarse'); }); ```

Y en React con VuReact:

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

useBeforeMount(() => { console.log('el componente está a punto de montarse'); }); ```

De nuevo, la transformación es directa. `useBeforeMount` mantiene el timing pre-montaje, asegurando que tu código se ejecute en el momento adecuado. Si estás migrando desde Vue 3, esto te ahorrará muchos dolores de cabeza.

`onBeforeUpdate` y `useBeforeUpdate`: antes de actualizar

`onBeforeUpdate` se ejecuta antes de que el componente se actualice (excluyendo el montaje inicial). Es perfecto para inspeccionar o preparar el estado antes de que el siguiente renderizado se confirme.

En Vue 3, con un estado reactivo:

```javascript import { reactive, onBeforeUpdate } from 'vue';

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

onBeforeUpdate(() => { console.log('antes de actualizar, count:', state.count); }); ```

VuReact lo compila así:

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

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

useBeforeUpdate( () => { console.log('antes de actualizar, count:', state.count); }, [state.count], ); ```

Aquí vemos algo interesante: VuReact añade un array de dependencias (`[state.count]`). Esto es porque en React, los hooks como `useEffect` necesitan saber cuándo volver a ejecutarse. Durante la compilación, VuReact analiza tu código y genera automáticamente este array, así que no tienes que preocuparte por ello.

`onUpdated` y `useUpdated`: después de actualizar

`onUpdated` se ejecuta después de que el componente se actualiza. Se usa para leer el último resultado renderizado o desencadenar trabajo de sincronización.

En Vue 3:

```javascript import { reactive, onUpdated } from 'vue';

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

onUpdated(() => { console.log('después de actualizar, count:', state.count); }); ```

Y en React:

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

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

useUpdated( () => { console.log('después de actualizar, count:', state.count); }, [state.count], ); ```

De nuevo, el array de dependencias se añade automáticamente. Esto hace que la migración sea mucho más fluida, ya que no necesitas entender todos los detalles internos de React para que funcione.

`onBeforeUnmount` y `useBeforeUnMount`: antes de desmontar

`onBeforeUnmount` se ejecuta justo antes de que el componente se elimine. Es útil para limpiezas rápidas.

En Vue 3:

```javascript import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => { console.log('el componente está a punto de desmontarse'); }); ```

Y en React:

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

useBeforeUnMount(() => { console.log('el componente está a punto de desmontarse'); }); ```

La transformación es directa, sin dependencias adicionales. `useBeforeUnMount` preserva el timing pre-desmontaje, asegurando que tu lógica se ejecute cuando sea necesario.

`onUnmounted` y `useUnmounted`: después de desmontar

`onUnmounted` es el hook final para limpieza después de que el componente se ha eliminado.

En Vue 3:

```javascript import { onUnmounted } from 'vue';

onUnmounted(() => { console.log('componente desmontado'); }); ```

Y en React:

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

useUnmounted(() => { console.log('componente desmontado'); }); ```

Simple y directo. `useUnmounted` mantiene el mismo timing que su contraparte en Vue 3.

Conclusión: VuReact facilita la migración entre frameworks

Como has visto, VuReact hace que la migración de Vue 3 a React sea mucho más sencilla de lo que imaginas. Los hooks de ciclo de vida se transforman de manera casi directa, con solo pequeños ajustes como arrays de dependencias que se generan automáticamente durante la compilación. Esto significa que puedes mantener tu lógica original sin tener que reescribirla desde cero.

Si estás pensando en migrar un proyecto o simplemente quieres explorar cómo funcionan estas herramientas, te recomiendo que visites el [repositorio de VuReact en GitHub](https://github.com/vureact-js/core) o la [documentación oficial](https://vureact.top/en/guide/semantic-comparison/script/lifecycle.html). También puedes consultar la [documentación del runtime](https://runtime.vureact.top/en/guide/introduction.html) para más detalles.

Y si necesitas ayuda con el desarrollo de aplicaciones web o la automatización de procesos, no dudes en visitar [guillermomateo.es/aplicaciones-web](https://guillermomateo.es/aplicaciones-web) para ver cómo podemos ayudarte a mejorar tus proyectos. ¿Tienes alguna pregunta o proyecto en mente? ¡Contáctame! Estaré encantado de charlar contigo.