14-Montar un componente

 Montar un componente en React se refiere al momento en que un componente se crea y se inserta por primera vez en el DOM. Es uno de los ciclos de vida principales de un componente, y con la llegada de Hooks, se gestiona principalmente con useEffect.

---

¿Qué significa exactamente "montar"?

Imagina un componente funcional como una función que devuelve elementos JSX:

jsx

function MiComponente() {

  return <div>¡Hola Mundo!</div>;

}

Cuando React renderiza por primera vez este componente en la pantalla (porque lo incluiste en otro componente, por ejemplo), ocurre el montaje.

Durante el montaje:

1. Se llama a la función del componente.

2. Se evalúa el JSX.

3. Se crean los nodos reales del DOM.

4. Se insertan en el árbol del DOM visible.

---

La relación con useEffect

useEffect te permite ejecutar código después de que el componente se haya montado (y también después de cada actualización, dependiendo de sus dependencias).

import { useEffect } from 'react';

function MiComponente() {

  useEffect(() => {

    // Este código se ejecuta DESPUÉS de que el componente se monta

    console.log('Componente montado');

    

    // Opcional: función de limpieza que se ejecuta al DESMONTAR

    return () => {

      console.log('Componente desmontado');

    };

  }, []); // ← Array vacío significa: solo en montaje

  return <div>Contenido</div>;

}

---

Montar vs. Desmontar

Evento	Cuándo ocurre	Uso típico
Montar	Primera renderización	Fetch de datos, suscripciones, timers, configuración inicial
Desmontar	Componente se remueve del DOM	Limpieza: cancelar suscripciones, detener timers, liberar recursos

---

Ejemplo práctico: Suscripción a datos

jsx

import { useEffect, useState } from 'react';

function PerfilUsuario({ userId }) {

  const [usuario, setUsuario] = useState(null);

  useEffect(() => {

    // Esto se ejecuta al montar el componente

    console.log(`Solicitando datos del usuario ${userId}`);

    

    // Simulación de fetch

    fetch(`/api/usuarios/${userId}`)

      .then(res => res.json())

      .then(data => setUsuario(data));

    // Función de limpieza al desmontar

    return () => {

      console.log(`Limpieza para usuario ${userId}`);

      // Aquí podrías cancelar una petición pendiente si fuera necesario

    };

  }, [userId]); // Dependencia: se re-ejecuta si userId cambia

  if (!usuario) return <div>Cargando...</div>;

  

  return <div>{usuario.nombre}</div>;

}

---

¿Por qué es importante entender el montaje?

1. Evitar efectos secundarios duplicados: Sin useEffect y su array de dependencias, podrías ejecutar código muchas veces innecesariamente.

2. Manejo de recursos: Si abres una conexión o suscripción al montar, debes cerrarla al desmontar para evitar memory leaks.

3. Condiciones de carrera: En componentes que se montan/desmontan rápido (como en búsquedas), necesitas limpiar peticiones anteriores.

---

Errores comunes con el montaje

jsx

// ❌ MAL: Petición directamente en el cuerpo del componente

function Componente() {

  const [data, setData] = useState(null);

  

  fetch('/api/data') // ¡Se ejecuta en CADA render!

    .then(res => res.json())

    .then(setData);

  

  return <div>{data}</div>;

}

// ✅ BIEN: Petición dentro de useEffect

function Componente() {

  const [data, setData] = useState(null);

  

  useEffect(() => {

    fetch('/api/data')

      .then(res => res.json())

      .then(setData);

  }, []); // Solo al montar

  

  return <div>{data}</div>;

}

---

Resumen visual del ciclo

text

Componente se monta

    ↓

useEffect() con [] se ejecuta

    ↓

Componente se renderiza en pantalla

    ↓

...interacción del usuario...

    ↓

Componente se desmonta

    ↓

Función de limpieza de useEffect se ejecuta

---

Cuando NO usar montaje ([] en useEffect)

• Si necesitas ejecutar algo solo cuando cierta prop o estado cambie (ponlo en el array de dependencias).

• Si necesitas ejecutar algo antes de que el componente se monte (mejor usar useLayoutEffect para manipulación del DOM síncrona).