¿Cómo arreglarías una fuga de memoria en tu código?

¿Identificarías la fuente de la fuga usando las herramientas de desarrollador del navegador (Timeline / Performance, Memory)?

Causas comunes de fugas de memoria:

• Referencias colgantes a objetos:
  • Temporizadores olvidados (setInterval, setTimeout) que hacen referencia a objetos.
  • Manejadores de eventos confusos que no se han desconectado (removeEventListener).
  • Cierres que mantienen variables externas por más tiempo del necesario.
  • Elementos DOM eliminados del documento pero con referencias en JavaScript.

// Ejemplo de fuga por temporizador olvidado
const leakyObject = {
  data: 'some data'
};

setInterval(() => {
  console.log(leakyObject.data); // leakyObject no puede ser recolectado por el recolector de basura
}, 1000);

• Estructuras de datos grandes:
  • Creación y almacenamiento de arreglos u objetos excesivamente grandes cuando se pueden usar iteradores o streaming.
• Uso incorrecto de cachés:
  • Cachés que crecen indefinidamente sin estrategia de expulsión (LRU, LFU, etc.).
• Fugas de bibliotecas externas:
  • Revisar la documentación o el código fuente de las bibliotecas en busca de problemas potenciales.

Solución:

1. Cancelar eventos y temporizadores: Asegurarse de que todos los manejadores de eventos estén desconectados y los temporizadores limpiados al destruir el componente u objeto.

// Limpieza correcta del temporizador
const leakyObject = {
  data: 'some data'
};
let timerId;

function startTimer() {
  timerId = setInterval(() => {
    console.log(leakyObject.data);
  }, 1000);
}

function stopTimer() {
  clearInterval(timerId); // Limpiar temporizador
}

2. Nullificar referencias: Nullificar explícitamente referencias a objetos grandes o no utilizados para que el recolector de basura pueda recolectarlos.
3. Usar WeakMap y WeakSet: Para almacenar referencias a objetos que pueden ser eliminados por el recolector de basura cuando no tengan otras referencias fuertes.
4. Optimizar estructuras de datos: Usar estructuras de datos o enfoques más eficientes (por ejemplo, carga perezosa).
5. Limitar tamaño de cachés: Implementar estrategias de expulsión para la caché.
6. Actualizar o reemplazar bibliotecas: Si el problema está en una biblioteca externa, actualizarla o buscar una alternativa.

Después de solucionar, volver a usar las herramientas de desarrollador para confirmar la ausencia de fugas.