DEV Community: Pedro Alvarado

Sistema de Archivos (fs) en Node.js

Pedro Alvarado — Fri, 03 Oct 2025 19:39:26 +0000

Tabla de Contenidos

Introducción al Módulo fs
Operaciones Síncronas vs Asíncronas
Lectura de Archivos
Escritura de Archivos
Operaciones con Directorios
Información de Archivos (Stats)
Watchers - Monitoreo de Archivos
Streams de Archivos
Módulo Path
Manejo de Errores
Casos de Uso Reales
Buenas Prácticas
Cuestionario de Entrevista

Introducción al Módulo fs

El módulo fs (File System) de Node.js proporciona una API para interactuar con el sistema de archivos. Es uno de los módulos core más utilizados.

Importar el Módulo

// CommonJS
const fs = require('fs');
const fsPromises = require('fs').promises;

// ES Modules
import fs from 'fs';
import { promises as fsPromises } from 'fs';

Características Principales

Multiplataforma: Funciona en Windows, macOS y Linux
Múltiples APIs: Callbacks, Promises y síncrona
Streams: Para archivos grandes
Watchers: Monitoreo de cambios en tiempo real

Operaciones Síncronas vs Asíncronas

API Síncrona (Bloqueante)

const fs = require('fs');

try {
  // Bloquea el Event Loop hasta completar
  const data = fs.readFileSync('archivo.txt', 'utf8');
  console.log('Contenido:', data);
  console.log('Esta línea se ejecuta después');
} catch (error) {
  console.error('Error:', error.message);
}

Cuándo usar:

✅ Al inicio de la aplicación (cargar configuración)
✅ Scripts simples
✅ Cuando el orden es crítico
❌ Durante manejo de peticiones HTTP
❌ En servidores con alta concurrencia

API de Callbacks (No Bloqueante)

const fs = require('fs');

// No bloquea el Event Loop
fs.readFile('archivo.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error:', err.message);
    return;
  }
  console.log('Contenido:', data);
});

console.log('Esta línea se ejecuta primero');

Patrón Error-First Callback:

Primer parámetro: error (null si no hay error)
Segundo parámetro: resultado

API de Promises (No Bloqueante)

const fs = require('fs').promises;

// Con .then()/.catch()
fs.readFile('archivo.txt', 'utf8')
  .then(data => {
    console.log('Contenido:', data);
  })
  .catch(err => {
    console.error('Error:', err.message);
  });

// Con async/await
async function leerArchivo() {
  try {
    const data = await fs.readFile('archivo.txt', 'utf8');
    console.log('Contenido:', data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Comparación de Rendimiento

const fs = require('fs');

// ❌ SÍNCRONO - Bloquea todo
function leerArchivosSincrono() {
  console.time('sincrono');

  for (let i = 0; i < 5; i++) {
    const data = fs.readFileSync(`archivo${i}.txt`, 'utf8');
    console.log(`Archivo ${i} leído`);
  }

  console.timeEnd('sincrono'); // ~500ms (suma de todos)
}

// ✅ ASÍNCRONO - Paralelo
async function leerArchivosAsincrono() {
  console.time('asincrono');

  const promesas = [];
  for (let i = 0; i < 5; i++) {
    promesas.push(
      fs.promises.readFile(`archivo${i}.txt`, 'utf8')
        .then(data => console.log(`Archivo ${i} leído`))
    );
  }

  await Promise.all(promesas);
  console.timeEnd('asincrono'); // ~100ms (el más lento)
}

Lectura de Archivos

Leer Archivo Completo

const fs = require('fs');

// 1. SÍNCRONO
try {
  const data = fs.readFileSync('config.json', 'utf8');
  const config = JSON.parse(data);
  console.log(config);
} catch (error) {
  console.error('Error leyendo config:', error.message);
}

// 2. CALLBACK
fs.readFile('config.json', 'utf8', (err, data) => {
  if (err) {
    console.error('Error:', err.message);
    return;
  }

  try {
    const config = JSON.parse(data);
    console.log(config);
  } catch (parseError) {
    console.error('Error parseando JSON:', parseError.message);
  }
});

// 3. PROMISES
async function cargarConfig() {
  try {
    const data = await fs.promises.readFile('config.json', 'utf8');
    const config = JSON.parse(data);
    return config;
  } catch (error) {
    if (error.code === 'ENOENT') {
      console.log('Archivo de configuración no existe, usando defaults');
      return {};
    }
    throw error;
  }
}

Encodings Soportados

const fs = require('fs');

// Sin encoding - retorna Buffer
const buffer = fs.readFileSync('imagen.jpg');
console.log(buffer); // <Buffer ff d8 ff e0 00 10 4a 46 49 46...>

// Con encoding - retorna string
const texto = fs.readFileSync('archivo.txt', 'utf8');
console.log(typeof texto); // string

// Encodings disponibles
const encodings = [
  'utf8',      // Por defecto para texto
  'ascii',     // Solo caracteres ASCII
  'base64',    // Base64
  'hex',       // Hexadecimal
  'binary',    // Binario (deprecated)
  'utf16le'    // UTF-16 Little Endian
];

// Ejemplo con diferentes encodings
const data = fs.readFileSync('archivo.txt');
console.log('UTF-8:', data.toString('utf8'));
console.log('Base64:', data.toString('base64'));
console.log('Hex:', data.toString('hex'));

Leer Archivos Grandes con Streams

const fs = require('fs');

// Para archivos grandes, usa streams
function leerArchivoGrande(filename) {
  const stream = fs.createReadStream(filename, {
    encoding: 'utf8',
    highWaterMark: 64 * 1024 // 64KB chunks
  });

  let contenido = '';

  stream.on('data', (chunk) => {
    contenido += chunk;
    console.log(`Leído chunk de ${chunk.length} caracteres`);
  });

  stream.on('end', () => {
    console.log(`Archivo completo leído: ${contenido.length} caracteres`);
  });

  stream.on('error', (error) => {
    console.error('Error leyendo archivo:', error.message);
  });
}

Escritura de Archivos

Escribir Archivo Completo

const fs = require('fs');

const data = {
  name: 'Mi App',
  version: '1.0.0',
  timestamp: new Date().toISOString()
};

// 1. SÍNCRONO
try {
  fs.writeFileSync('output.json', JSON.stringify(data, null, 2));
  console.log('Archivo escrito exitosamente');
} catch (error) {
  console.error('Error escribiendo archivo:', error.message);
}

// 2. CALLBACK
fs.writeFile('output.json', JSON.stringify(data, null, 2), 'utf8', (err) => {
  if (err) {
    console.error('Error:', err.message);
    return;
  }
  console.log('Archivo escrito exitosamente');
});

// 3. PROMISES
async function guardarDatos(datos) {
  try {
    await fs.promises.writeFile(
      'output.json', 
      JSON.stringify(datos, null, 2),
      'utf8'
    );
    console.log('Archivo guardado');
  } catch (error) {
    console.error('Error guardando:', error.message);
  }
}

Agregar Contenido (Append)

const fs = require('fs');

// Agregar al final del archivo
const logEntry = `${new Date().toISOString()} - Usuario logueado\n`;

// SÍNCRONO
fs.appendFileSync('app.log', logEntry);

// ASÍNCRONO
fs.appendFile('app.log', logEntry, (err) => {
  if (err) {
    console.error('Error escribiendo log:', err.message);
    return;
  }
  console.log('Log agregado');
});

// PROMISES
await fs.promises.appendFile('app.log', logEntry);

Escribir con Streams

const fs = require('fs');

// Para escritura continua o archivos grandes
function escribirArchivoGrande() {
  const stream = fs.createWriteStream('salida.txt');

  // Escribir múltiples chunks
  for (let i = 0; i < 1000; i++) {
    const data = `Línea ${i}: ${new Date().toISOString()}\n`;
    stream.write(data);
  }

  // Cerrar el stream
  stream.end();

  stream.on('finish', () => {
    console.log('Archivo escrito completamente');
  });

  stream.on('error', (error) => {
    console.error('Error escribiendo:', error.message);
  });
}

// Ejemplo: Logger con rotación
class FileLogger {
  constructor(filename, maxSize = 10 * 1024 * 1024) { // 10MB
    this.filename = filename;
    this.maxSize = maxSize;
    this.currentStream = null;
    this.currentSize = 0;
    this.initStream();
  }

  initStream() {
    if (this.currentStream) {
      this.currentStream.end();
    }

    this.currentStream = fs.createWriteStream(this.filename, { flags: 'a' });
    this.currentSize = 0;
  }

  log(message) {
    const entry = `${new Date().toISOString()} - ${message}\n`;

    if (this.currentSize + entry.length > this.maxSize) {
      // Rotar archivo
      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
      const backupName = `${this.filename}.${timestamp}`;

      this.currentStream.end();
      fs.renameSync(this.filename, backupName);
      this.initStream();
    }

    this.currentStream.write(entry);
    this.currentSize += entry.length;
  }
}

const logger = new FileLogger('app.log');
logger.log('Aplicación iniciada');

Operaciones con Directorios

Crear Directorios

const fs = require('fs');
const path = require('path');

// Crear directorio simple
fs.mkdir('nuevo-directorio', (err) => {
  if (err) {
    if (err.code === 'EEXIST') {
      console.log('El directorio ya existe');
    } else {
      console.error('Error creando directorio:', err.message);
    }
    return;
  }
  console.log('Directorio creado');
});

// Crear directorio con subdirectorios (recursive)
const dirPath = path.join('proyecto', 'src', 'components');

// SÍNCRONO
try {
  fs.mkdirSync(dirPath, { recursive: true });
  console.log('Estructura de directorios creada');
} catch (error) {
  console.error('Error:', error.message);
}

// ASÍNCRONO
fs.mkdir(dirPath, { recursive: true }, (err) => {
  if (err) {
    console.error('Error:', err.message);
    return;
  }
  console.log('Estructura creada');
});

// PROMISES
async function crearEstructura() {
  try {
    await fs.promises.mkdir(dirPath, { recursive: true });
    console.log('Estructura creada con promises');
  } catch (error) {
    console.error('Error:', error.message);
  }
}

Leer Contenido de Directorios

const fs = require('fs');
const path = require('path');

// Listar archivos y directorios
fs.readdir('.', (err, files) => {
  if (err) {
    console.error('Error leyendo directorio:', err.message);
    return;
  }

  console.log('Archivos y directorios:');
  files.forEach(file => {
    console.log(`- ${file}`);
  });
});

// Con información detallada
fs.readdir('.', { withFileTypes: true }, (err, entries) => {
  if (err) {
    console.error('Error:', err.message);
    return;
  }

  entries.forEach(entry => {
    const type = entry.isDirectory() ? 'DIR' : 'FILE';
    console.log(`${type}: ${entry.name}`);
  });
});

// Función recursiva para listar todo
async function listarRecursivo(dir, nivel = 0) {
  try {
    const entries = await fs.promises.readdir(dir, { withFileTypes: true });

    for (const entry of entries) {
      const indent = '  '.repeat(nivel);
      const fullPath = path.join(dir, entry.name);

      if (entry.isDirectory()) {
        console.log(`${indent}📁 ${entry.name}/`);
        await listarRecursivo(fullPath, nivel + 1);
      } else {
        console.log(`${indent}📄 ${entry.name}`);
      }
    }
  } catch (error) {
    console.error(`Error leyendo ${dir}:`, error.message);
  }
}

// Uso
listarRecursivo('./src');

Eliminar Directorios

const fs = require('fs');

// Eliminar directorio vacío
fs.rmdir('directorio-vacio', (err) => {
  if (err) {
    if (err.code === 'ENOENT') {
      console.log('El directorio no existe');
    } else if (err.code === 'ENOTEMPTY') {
      console.log('El directorio no está vacío');
    } else {
      console.error('Error:', err.message);
    }
    return;
  }
  console.log('Directorio eliminado');
});

// Eliminar directorio recursivamente (Node.js 14+)
fs.rm('directorio-con-contenido', { recursive: true, force: true }, (err) => {
  if (err) {
    console.error('Error eliminando:', err.message);
    return;
  }
  console.log('Directorio eliminado recursivamente');
});

// Función para limpiar directorio (eliminar contenido pero mantener directorio)
async function limpiarDirectorio(dir) {
  try {
    const entries = await fs.promises.readdir(dir, { withFileTypes: true });

    for (const entry of entries) {
      const fullPath = path.join(dir, entry.name);

      if (entry.isDirectory()) {
        await fs.promises.rm(fullPath, { recursive: true, force: true });
      } else {
        await fs.promises.unlink(fullPath);
      }
    }

    console.log(`Directorio ${dir} limpiado`);
  } catch (error) {
    console.error('Error limpiando directorio:', error.message);
  }
}

Información de Archivos (Stats)

Obtener Estadísticas

const fs = require('fs');

// Obtener información de archivo/directorio
fs.stat('archivo.txt', (err, stats) => {
  if (err) {
    if (err.code === 'ENOENT') {
      console.log('El archivo no existe');
    } else {
      console.error('Error:', err.message);
    }
    return;
  }

  console.log('Información del archivo:');
  console.log('- Tamaño:', stats.size, 'bytes');
  console.log('- Es archivo:', stats.isFile());
  console.log('- Es directorio:', stats.isDirectory());
  console.log('- Creado:', stats.birthtime);
  console.log('- Modificado:', stats.mtime);
  console.log('- Último acceso:', stats.atime);
  console.log('- Permisos:', stats.mode.toString(8));
});

// Función utilitaria para información legible
function formatearTamaño(bytes) {
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  if (bytes === 0) return '0 Bytes';

  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
}

async function infoArchivo(filename) {
  try {
    const stats = await fs.promises.stat(filename);

    return {
      nombre: filename,
      tamaño: formatearTamaño(stats.size),
      tipo: stats.isFile() ? 'archivo' : 'directorio',
      creado: stats.birthtime.toLocaleDateString(),
      modificado: stats.mtime.toLocaleDateString(),
      permisos: stats.mode.toString(8).slice(-3)
    };
  } catch (error) {
    return { error: error.message };
  }
}

// Ejemplo de uso
infoArchivo('package.json').then(info => {
  console.log(info);
});

Verificar Existencia y Permisos

const fs = require('fs');

// Verificar si existe
fs.access('archivo.txt', fs.constants.F_OK, (err) => {
  if (err) {
    console.log('El archivo no existe');
  } else {
    console.log('El archivo existe');
  }
});

// Verificar permisos específicos
fs.access('archivo.txt', fs.constants.R_OK | fs.constants.W_OK, (err) => {
  if (err) {
    console.log('No tienes permisos de lectura/escritura');
  } else {
    console.log('Tienes permisos de lectura y escritura');
  }
});

// Constantes de permisos
const permisos = {
  F_OK: 'existe',
  R_OK: 'lectura',
  W_OK: 'escritura',
  X_OK: 'ejecución'
};

// Función para verificar múltiples permisos
async function verificarPermisos(filename) {
  const resultados = {};

  for (const [constante, nombre] of Object.entries(permisos)) {
    try {
      await fs.promises.access(filename, fs.constants[constante]);
      resultados[nombre] = true;
    } catch {
      resultados[nombre] = false;
    }
  }

  return resultados;
}

// Uso
verificarPermisos('archivo.txt').then(permisos => {
  console.log('Permisos:', permisos);
});

Watchers - Monitoreo de Archivos

fs.watch() - Monitoreo Básico

const fs = require('fs');

// Monitorear archivo o directorio
const watcher = fs.watch('archivo.txt', (eventType, filename) => {
  console.log(`Evento: ${eventType}`);
  if (filename) {
    console.log(`Archivo: ${filename}`);
  }
});

// Eventos: 'rename' (crear, eliminar, renombrar) y 'change' (modificar)

// Detener el watcher después de 30 segundos
setTimeout(() => {
  watcher.close();
  console.log('Watcher cerrado');
}, 30000);

// Manejar errores
watcher.on('error', (error) => {
  console.error('Error en watcher:', error.message);
});

fs.watchFile() - Monitoreo por Polling

const fs = require('fs');

// Monitoreo por polling (menos eficiente pero más confiable)
fs.watchFile('config.json', { interval: 1000 }, (curr, prev) => {
  console.log('Archivo modificado:');
  console.log(`- Tamaño anterior: ${prev.size}`);
  console.log(`- Tamaño actual: ${curr.size}`);
  console.log(`- Última modificación: ${curr.mtime}`);
});

// Detener el watcher
setTimeout(() => {
  fs.unwatchFile('config.json');
  console.log('Watchfile detenido');
}, 60000);

Watcher Avanzado para Directorio

const fs = require('fs');
const path = require('path');

class DirectoryWatcher {
  constructor(directory) {
    this.directory = directory;
    this.watchers = new Map();
    this.files = new Map();
    this.init();
  }

  async init() {
    // Escanear archivos existentes
    await this.scanDirectory();

    // Monitorear directorio
    this.dirWatcher = fs.watch(this.directory, (eventType, filename) => {
      if (filename) {
        this.handleFileEvent(eventType, filename);
      }
    });

    console.log(`Monitoreando directorio: ${this.directory}`);
  }

  async scanDirectory() {
    try {
      const files = await fs.promises.readdir(this.directory);

      for (const file of files) {
        const filepath = path.join(this.directory, file);
        const stats = await fs.promises.stat(filepath);

        if (stats.isFile()) {
          this.files.set(file, {
            size: stats.size,
            mtime: stats.mtime.getTime()
          });
        }
      }
    } catch (error) {
      console.error('Error escaneando directorio:', error.message);
    }
  }

  async handleFileEvent(eventType, filename) {
    const filepath = path.join(this.directory, filename);

    try {
      const stats = await fs.promises.stat(filepath);
      const currentInfo = this.files.get(filename);

      if (!currentInfo) {
        // Archivo nuevo
        console.log(`📄 Archivo creado: ${filename}`);
        this.files.set(filename, {
          size: stats.size,
          mtime: stats.mtime.getTime()
        });
      } else if (stats.mtime.getTime() > currentInfo.mtime) {
        // Archivo modificado
        console.log(`✏️  Archivo modificado: ${filename}`);
        console.log(`   Tamaño: ${currentInfo.size} → ${stats.size} bytes`);
        this.files.set(filename, {
          size: stats.size,
          mtime: stats.mtime.getTime()
        });
      }
    } catch (error) {
      if (error.code === 'ENOENT') {
        // Archivo eliminado
        if (this.files.has(filename)) {
          console.log(`🗑️  Archivo eliminado: ${filename}`);
          this.files.delete(filename);
        }
      } else {
        console.error(`Error procesando ${filename}:`, error.message);
      }
    }
  }

  close() {
    if (this.dirWatcher) {
      this.dirWatcher.close();
    }
    console.log('Watcher cerrado');
  }
}

// Uso
const watcher = new DirectoryWatcher('./src');

// Cerrar después de 5 minutos
setTimeout(() => {
  watcher.close();
}, 5 * 60 * 1000);

Streams de Archivos

Readable Streams

const fs = require('fs');

// Crear stream de lectura
const readStream = fs.createReadStream('archivo-grande.txt', {
  encoding: 'utf8',
  start: 0,        // Byte de inicio
  end: 1000,       // Byte de fin
  highWaterMark: 64 * 1024  // Tamaño del buffer (64KB)
});

readStream.on('data', (chunk) => {
  console.log(`Chunk recibido: ${chunk.length} caracteres`);
});

readStream.on('end', () => {
  console.log('Lectura completada');
});

readStream.on('error', (error) => {
  console.error('Error leyendo:', error.message);
});

Writable Streams

const fs = require('fs');

// Crear stream de escritura
const writeStream = fs.createWriteStream('salida.txt', {
  flags: 'w',      // 'w' = write, 'a' = append
  encoding: 'utf8',
  highWaterMark: 64 * 1024
});

// Escribir datos
writeStream.write('Primera línea\n');
writeStream.write('Segunda línea\n');

// Finalizar
writeStream.end('Última línea\n');

writeStream.on('finish', () => {
  console.log('Escritura completada');
});

writeStream.on('error', (error) => {
  console.error('Error escribiendo:', error.message);
});

Pipeline de Archivos

const fs = require('fs');
const { pipeline } = require('stream');
const { Transform } = require('stream');

// Transform que convierte a mayúsculas
const upperCaseTransform = new Transform({
  transform(chunk, encoding, callback) {
    this.push(chunk.toString().toUpperCase());
    callback();
  }
});

// Pipeline: leer → transformar → escribir
pipeline(
  fs.createReadStream('entrada.txt'),
  upperCaseTransform,
  fs.createWriteStream('salida-mayusculas.txt'),
  (error) => {
    if (error) {
      console.error('Pipeline falló:', error.message);
    } else {
      console.log('Pipeline completado exitosamente');
    }
  }
);

Módulo Path

El módulo path es esencial para trabajar con rutas de archivos de manera multiplataforma.

const path = require('path');

// Información sobre rutas
console.log('Separador de directorios:', path.sep);        // \ en Windows, / en Unix
console.log('Separador de PATH:', path.delimiter);        // ; en Windows, : en Unix

const archivo = '/usuarios/juan/documentos/archivo.txt';

console.log('Directorio padre:', path.dirname(archivo));  // /usuarios/juan/documentos
console.log('Nombre del archivo:', path.basename(archivo)); // archivo.txt
console.log('Extensión:', path.extname(archivo));         // .txt
console.log('Nombre sin extensión:', path.basename(archivo, '.txt')); // archivo

// Parsear ruta completa
const parsed = path.parse(archivo);
console.log(parsed);
// {
//   root: '/',
//   dir: '/usuarios/juan/documentos',
//   base: 'archivo.txt',
//   ext: '.txt',
//   name: 'archivo'
// }

// Construir rutas
const nuevaRuta = path.format({
  dir: '/usuarios/maria',
  name: 'config',
  ext: '.json'
});
console.log(nuevaRuta); // /usuarios/maria/config.json

Unir Rutas (path.join vs path.resolve)

const path = require('path');

// path.join() - Une segmentos de ruta
console.log(path.join('usuarios', 'juan', 'documentos')); 
// usuarios/juan/documentos (Unix) o usuarios\juan\documentos (Windows)

console.log(path.join('/usuarios', '../juan', './documentos'));
// /juan/documentos

// path.resolve() - Resuelve a ruta absoluta
console.log(path.resolve('archivo.txt'));
// /ruta/completa/actual/archivo.txt

console.log(path.resolve('/usuarios', 'juan', 'archivo.txt'));
// /usuarios/juan/archivo.txt

console.log(path.resolve('..', 'archivo.txt'));
// /ruta/padre/archivo.txt

// Diferencia clave
console.log(path.join('a', '/b', 'c'));    // a/b/c
console.log(path.resolve('a', '/b', 'c')); // /b/c (absoluta desde /b)

Rutas Relativas y Absolutas

const path = require('path');

const rutaAbsoluta = '/usuarios/juan/proyecto/src/index.js';
const rutaBase = '/usuarios/juan/proyecto';

// Convertir absoluta a relativa
const rutaRelativa = path.relative(rutaBase, rutaAbsoluta);
console.log(rutaRelativa); // src/index.js

// Verificar si es absoluta
console.log(path.isAbsolute('/usuarios/juan')); // true
console.log(path.isAbsolute('src/index.js'));   // false

// Normalizar ruta (eliminar .. y .)
console.log(path.normalize('/usuarios/juan/../maria/./documentos'));
// /usuarios/maria/documentos

Utilidades para Desarrollo

const path = require('path');
const fs = require('fs');

// Encontrar archivos con extensión específica
function encontrarArchivos(directorio, extension) {
  const archivos = [];

  function buscarRecursivo(dir) {
    const entries = fs.readdirSync(dir, { withFileTypes: true });

    for (const entry of entries) {
      const fullPath = path.join(dir, entry.name);

      if (entry.isDirectory()) {
        buscarRecursivo(fullPath);
      } else if (path.extname(entry.name) === extension) {
        archivos.push(fullPath);
      }
    }
  }

  buscarRecursivo(directorio);
  return archivos;
}

// Crear estructura de proyecto
function crearEstructuraProyecto(nombre) {
  const estructura = [
    'src',
    'src/components',
    'src/utils',
    'tests',
    'docs',
    'public'
  ];

  const basePath = path.join(process.cwd(), nombre);

  // Crear directorio base
  fs.mkdirSync(basePath, { recursive: true });

  // Crear subdirectorios
  for (const dir of estructura) {
    const dirPath = path.join(basePath, dir);
    fs.mkdirSync(dirPath, { recursive: true });
  }

  // Crear archivos iniciales
  const archivos = {
    'package.json': JSON.stringify({
      name: nombre,
      version: '1.0.0',
      description: '',
      main: 'src/index.js'
    }, null, 2),
    'src/index.js': '// Punto de entrada de la aplicación\nconsole.log("Hola mundo");',
    'README.md': `# ${nombre}\n\nDescripción del proyecto.`,
    '.gitignore': 'node_modules/\n.env\n*.log'
  };

  for (const [archivo, contenido] of Object.entries(archivos)) {
    const archivoPath = path.join(basePath, archivo);
    fs.writeFileSync(archivoPath, contenido);
  }

  console.log(`Proyecto ${nombre} creado en ${basePath}`);
}

// Uso
// crearEstructuraProyecto('mi-nuevo-proyecto');

Manejo de Errores

Códigos de Error Comunes

const fs = require('fs');

// Manejar errores específicos
fs.readFile('archivo-inexistente.txt', (err, data) => {
  if (err) {
    switch (err.code) {
      case 'ENOENT':
        console.log('Archivo no encontrado');
        break;
      case 'EACCES':
        console.log('Permiso denegado');
        break;
      case 'EISDIR':
        console.log('Es un directorio, no un archivo');
        break;
      case 'EMFILE':
        console.log('Demasiados archivos abiertos');
        break;
      case 'ENOSPC':
        console.log('No hay espacio en disco');
        break;
      default:
        console.log('Error desconocido:', err.message);
    }
    return;
  }

  console.log('Archivo leído exitosamente');
});

// Función helper para manejo de errores
function manejarErrorFS(error) {
  const errores = {
    ENOENT: 'Archivo o directorio no encontrado',
    EACCES: 'Permiso denegado',
    EEXIST: 'Archivo o directorio ya existe',
    EISDIR: 'Es un directorio',
    ENOTDIR: 'No es un directorio',
    EMFILE: 'Demasiados archivos abiertos',
    ENOSPC: 'No hay espacio en disco',
    EIO: 'Error de entrada/salida'
  };

  return errores[error.code] || `Error desconocido: ${error.message}`;
}

Operaciones Seguras

const fs = require('fs');
const path = require('path');

// Función segura para leer archivo
async function leerArchivoSeguro(filename, defaultValue = null) {
  try {
    const data = await fs.promises.readFile(filename, 'utf8');
    return data;
  } catch (error) {
    if (error.code === 'ENOENT') {
      console.log(`Archivo ${filename} no existe, usando valor por defecto`);
      return defaultValue;
    }
    throw error; // Re-lanzar otros errores
  }
}

// Función segura para escribir archivo
async function escribirArchivoSeguro(filename, data) {
  try {
    // Crear directorio padre si no existe
    const dir = path.dirname(filename);
    await fs.promises.mkdir(dir, { recursive: true });

    // Escribir a archivo temporal primero
    const tempFile = `${filename}.tmp`;
    await fs.promises.writeFile(tempFile, data);

    // Renombrar (operación atómica)
    await fs.promises.rename(tempFile, filename);

    console.log(`Archivo ${filename} escrito exitosamente`);
  } catch (error) {
    console.error(`Error escribiendo ${filename}:`, manejarErrorFS(error));
    throw error;
  }
}

// Función para copiar archivo con validaciones
async function copiarArchivo(origen, destino) {
  try {
    // Verificar que el origen existe
    await fs.promises.access(origen, fs.constants.F_OK);

    // Verificar que el destino no existe o preguntar al usuario
    try {
      await fs.promises.access(destino, fs.constants.F_OK);
      throw new Error(`El archivo ${destino} ya existe`);
    } catch (error) {
      if (error.code !== 'ENOENT') {
        throw error;
      }
    }

    // Crear directorio destino si no existe
    const dirDestino = path.dirname(destino);
    await fs.promises.mkdir(dirDestino, { recursive: true });

    // Copiar archivo
    await fs.promises.copyFile(origen, destino);

    console.log(`Archivo copiado: ${origen} → ${destino}`);
  } catch (error) {
    console.error('Error copiando archivo:', manejarErrorFS(error));
    throw error;
  }
}

Casos de Uso Reales

1. Sistema de Configuración

const fs = require('fs');
const path = require('path');

class ConfigManager {
  constructor(configPath = 'config.json') {
    this.configPath = configPath;
    this.config = {};
    this.defaults = {
      port: 3000,
      host: 'localhost',
      debug: false,
      database: {
        host: 'localhost',
        port: 5432,
        name: 'myapp'
      }
    };

    this.load();
  }

  load() {
    try {
      if (fs.existsSync(this.configPath)) {
        const data = fs.readFileSync(this.configPath, 'utf8');
        this.config = { ...this.defaults, ...JSON.parse(data) };
      } else {
        this.config = { ...this.defaults };
        this.save(); // Crear archivo con defaults
      }
    } catch (error) {
      console.error('Error cargando configuración:', error.message);
      this.config = { ...this.defaults };
    }
  }

  save() {
    try {
      const dir = path.dirname(this.configPath);
      if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir, { recursive: true });
      }

      fs.writeFileSync(this.configPath, JSON.stringify(this.config, null, 2));
    } catch (error) {
      console.error('Error guardando configuración:', error.message);
    }
  }

  get(key) {
    return key.split('.').reduce((obj, k) => obj && obj[k], this.config);
  }

  set(key, value) {
    const keys = key.split('.');
    const lastKey = keys.pop();
    const target = keys.reduce((obj, k) => {
      if (!obj[k]) obj[k] = {};
      return obj[k];
    }, this.config);

    target[lastKey] = value;
    this.save();
  }
}

// Uso
const config = new ConfigManager();
console.log('Puerto:', config.get('port'));
console.log('Host DB:', config.get('database.host'));

config.set('debug', true);
config.set('database.name', 'production');

2. Sistema de Logs

const fs = require('fs');
const path = require('path');

class Logger {
  constructor(options = {}) {
    this.logDir = options.logDir || 'logs';
    this.maxFileSize = options.maxFileSize || 10 * 1024 * 1024; // 10MB
    this.maxFiles = options.maxFiles || 5;
    this.level = options.level || 'info';

    this.levels = {
      error: 0,
      warn: 1,
      info: 2,
      debug: 3
    };

    this.currentFile = null;
    this.currentStream = null;
    this.currentSize = 0;

    this.init();
  }

  init() {
    // Crear directorio de logs
    if (!fs.existsSync(this.logDir)) {
      fs.mkdirSync(this.logDir, { recursive: true });
    }

    this.rotateIfNeeded();
  }

  rotateIfNeeded() {
    const today = new Date().toISOString().split('T')[0];
    const logFile = path.join(this.logDir, `app-${today}.log`);

    if (this.currentFile !== logFile) {
      if (this.currentStream) {
        this.currentStream.end();
      }

      this.currentFile = logFile;
      this.currentStream = fs.createWriteStream(logFile, { flags: 'a' });

      // Obtener tamaño actual
      try {
        const stats = fs.statSync(logFile);
        this.currentSize = stats.size;
      } catch {
        this.currentSize = 0;
      }
    }

    // Rotar por tamaño
    if (this.currentSize > this.maxFileSize) {
      this.rotateBySize();
    }
  }

  rotateBySize() {
    if (this.currentStream) {
      this.currentStream.end();
    }

    // Renombrar archivos existentes
    for (let i = this.maxFiles - 1; i > 0; i--) {
      const oldFile = `${this.currentFile}.${i}`;
      const newFile = `${this.currentFile}.${i + 1}`;

      if (fs.existsSync(oldFile)) {
        if (i === this.maxFiles - 1) {
          fs.unlinkSync(oldFile); // Eliminar el más antiguo
        } else {
          fs.renameSync(oldFile, newFile);
        }
      }
    }

    // Renombrar archivo actual
    fs.renameSync(this.currentFile, `${this.currentFile}.1`);

    // Crear nuevo archivo
    this.currentStream = fs.createWriteStream(this.currentFile, { flags: 'w' });
    this.currentSize = 0;
  }

  log(level, message, meta = {}) {
    if (this.levels[level] > this.levels[this.level]) {
      return; // Nivel muy bajo
    }

    this.rotateIfNeeded();

    const timestamp = new Date().toISOString();
    const logEntry = {
      timestamp,
      level: level.toUpperCase(),
      message,
      ...meta
    };

    const logLine = JSON.stringify(logEntry) + '\n';

    this.currentStream.write(logLine);
    this.currentSize += logLine.length;

    // También mostrar en consola
    console.log(`[${timestamp}] ${level.toUpperCase()}: ${message}`);
  }

  error(message, meta) { this.log('error', message, meta); }
  warn(message, meta) { this.log('warn', message, meta); }
  info(message, meta) { this.log('info', message, meta); }
  debug(message, meta) { this.log('debug', message, meta); }

  close() {
    if (this.currentStream) {
      this.currentStream.end();
    }
  }
}

// Uso
const logger = new Logger({
  logDir: './logs',
  level: 'debug',
  maxFileSize: 1024 * 1024 // 1MB para testing
});

logger.info('Aplicación iniciada');
logger.error('Error de conexión', { host: 'localhost', port: 3000 });
logger.debug('Variable de debug', { variable: 'valor' });

3. Sistema de Backup

const fs = require('fs');
const path = require('path');
const { pipeline } = require('stream');
const zlib = require('zlib');

class BackupManager {
  constructor(sourceDir, backupDir) {
    this.sourceDir = sourceDir;
    this.backupDir = backupDir;

    if (!fs.existsSync(this.backupDir)) {
      fs.mkdirSync(this.backupDir, { recursive: true });
    }
  }

  async createBackup() {
    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
    const backupName = `backup-${timestamp}`;
    const backupPath = path.join(this.backupDir, backupName);

    console.log(`Iniciando backup: ${this.sourceDir} → ${backupPath}`);

    try {
      await this.copyDirectory(this.sourceDir, backupPath);

      // Comprimir backup
      const compressedPath = `${backupPath}.tar.gz`;
      await this.compressDirectory(backupPath, compressedPath);

      // Eliminar directorio sin comprimir
      await this.removeDirectory(backupPath);

      console.log(`Backup completado: ${compressedPath}`);

      // Limpiar backups antiguos
      await this.cleanOldBackups();

      return compressedPath;
    } catch (error) {
      console.error('Error creando backup:', error.message);
      throw error;
    }
  }

  async copyDirectory(source, destination) {
    await fs.promises.mkdir(destination, { recursive: true });

    const entries = await fs.promises.readdir(source, { withFileTypes: true });

    for (const entry of entries) {
      const sourcePath = path.join(source, entry.name);
      const destPath = path.join(destination, entry.name);

      if (entry.isDirectory()) {
        await this.copyDirectory(sourcePath, destPath);
      } else {
        await fs.promises.copyFile(sourcePath, destPath);
      }
    }
  }

  async compressDirectory(source, destination) {
    // Crear archivo tar simple (sin usar librerías externas)
    const files = await this.getAllFiles(source);
    const writeStream = fs.createWriteStream(destination);
    const gzip = zlib.createGzip();

    return new Promise((resolve, reject) => {
      pipeline(
        this.createTarStream(files, source),
        gzip,
        writeStream,
        (error) => {
          if (error) reject(error);
          else resolve();
        }
      );
    });
  }

  async getAllFiles(dir) {
    const files = [];

    async function scan(currentDir) {
      const entries = await fs.promises.readdir(currentDir, { withFileTypes: true });

      for (const entry of entries) {
        const fullPath = path.join(currentDir, entry.name);

        if (entry.isDirectory()) {
          await scan(fullPath);
        } else {
          files.push(fullPath);
        }
      }
    }

    await scan(dir);
    return files;
  }

  createTarStream(files, baseDir) {
    const { Readable } = require('stream');

    return new Readable({
      read() {
        if (files.length === 0) {
          this.push(null);
          return;
        }

        const file = files.shift();
        const relativePath = path.relative(baseDir, file);

        // Simplificado: solo concatenar archivos con separador
        fs.readFile(file, (err, data) => {
          if (err) {
            this.emit('error', err);
            return;
          }

          const header = `\n--- ${relativePath} ---\n`;
          this.push(header);
          this.push(data);
        });
      }
    });
  }

  async removeDirectory(dir) {
    await fs.promises.rm(dir, { recursive: true, force: true });
  }

  async cleanOldBackups(keepCount = 5) {
    const backups = await fs.promises.readdir(this.backupDir);
    const backupFiles = backups
      .filter(file => file.startsWith('backup-') && file.endsWith('.tar.gz'))
      .sort()
      .reverse();

    if (backupFiles.length > keepCount) {
      const toDelete = backupFiles.slice(keepCount);

      for (const file of toDelete) {
        const filePath = path.join(this.backupDir, file);
        await fs.promises.unlink(filePath);
        console.log(`Backup antiguo eliminado: ${file}`);
      }
    }
  }

  async listBackups() {
    const backups = await fs.promises.readdir(this.backupDir);
    const backupFiles = backups
      .filter(file => file.startsWith('backup-') && file.endsWith('.tar.gz'))
      .sort()
      .reverse();

    const backupInfo = [];

    for (const file of backupFiles) {
      const filePath = path.join(this.backupDir, file);
      const stats = await fs.promises.stat(filePath);

      backupInfo.push({
        name: file,
        size: this.formatSize(stats.size),
        created: stats.birthtime.toLocaleString()
      });
    }

    return backupInfo;
  }

  formatSize(bytes) {
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    if (bytes === 0) return '0 Bytes';

    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
  }
}

// Uso
const backupManager = new BackupManager('./src', './backups');

// Crear backup
backupManager.createBackup()
  .then(backupPath => {
    console.log('Backup creado:', backupPath);
    return backupManager.listBackups();
  })
  .then(backups => {
    console.log('Backups disponibles:');
    backups.forEach(backup => {
      console.log(`- ${backup.name} (${backup.size}) - ${backup.created}`);
    });
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

Buenas Prácticas

1. Usar Operaciones Asíncronas

// ❌ MAL - Bloquea el Event Loop
function procesarArchivos() {
  const files = fs.readdirSync('./data');
  for (const file of files) {
    const content = fs.readFileSync(`./data/${file}`, 'utf8');
    // procesar contenido...
  }
}

// ✅ BIEN - No bloqueante
async function procesarArchivos() {
  const files = await fs.promises.readdir('./data');

  // Procesamiento en paralelo
  await Promise.all(files.map(async (file) => {
    const content = await fs.promises.readFile(`./data/${file}`, 'utf8');
    // procesar contenido...
  }));
}

2. Manejar Errores Correctamente

// ❌ MAL - No maneja errores específicos
fs.readFile('config.json', (err, data) => {
  if (err) throw err; // Puede crashear la app
  // usar data...
});

// ✅ BIEN - Manejo específico de errores
fs.readFile('config.json', 'utf8', (err, data) => {
  if (err) {
    if (err.code === 'ENOENT') {
      console.log('Usando configuración por defecto');
      return useDefaultConfig();
    }
    console.error('Error leyendo config:', err.message);
    return;
  }

  try {
    const config = JSON.parse(data);
    // usar config...
  } catch (parseErr) {
    console.error('Error parseando JSON:', parseErr.message);
  }
});

3. Usar Streams para Archivos Grandes

// ❌ MAL - Carga todo en memoria
function procesarArchivoGrande(filename) {
  const data = fs.readFileSync(filename, 'utf8');
  return data.split('\n').length; // Puede usar GBs de RAM
}

// ✅ BIEN - Memoria constante
function procesarArchivoGrande(filename) {
  return new Promise((resolve, reject) => {
    let lineCount = 0;
    let buffer = '';

    const stream = fs.createReadStream(filename, { encoding: 'utf8' });

    stream.on('data', (chunk) => {
      buffer += chunk;
      const lines = buffer.split('\n');
      buffer = lines.pop(); // Mantener línea incompleta
      lineCount += lines.length;
    });

    stream.on('end', () => {
      if (buffer) lineCount++; // Última línea
      resolve(lineCount);
    });

    stream.on('error', reject);
  });
}

4. Validar Rutas de Archivos

const path = require('path');

// ❌ MAL - Vulnerable a path traversal
function leerArchivo(filename) {
  return fs.readFileSync(filename); // Puede acceder a ../../etc/passwd
}

// ✅ BIEN - Validar y normalizar rutas
function leerArchivo(filename, baseDir = './data') {
  // Normalizar y resolver ruta
  const safePath = path.resolve(baseDir, path.normalize(filename));
  const safeBaseDir = path.resolve(baseDir);

  // Verificar que la ruta está dentro del directorio permitido
  if (!safePath.startsWith(safeBaseDir)) {
    throw new Error('Acceso denegado: ruta fuera del directorio permitido');
  }

  return fs.readFileSync(safePath);
}

5. Usar Operaciones Atómicas

// ❌ MAL - No atómico, puede corromperse
async function guardarDatos(filename, data) {
  await fs.promises.writeFile(filename, JSON.stringify(data));
}

// ✅ BIEN - Escritura atómica
async function guardarDatos(filename, data) {
  const tempFile = `${filename}.tmp`;

  try {
    // Escribir a archivo temporal
    await fs.promises.writeFile(tempFile, JSON.stringify(data, null, 2));

    // Renombrar (operación atómica)
    await fs.promises.rename(tempFile, filename);
  } catch (error) {
    // Limpiar archivo temporal en caso de error
    try {
      await fs.promises.unlink(tempFile);
    } catch {} // Ignorar si no existe

    throw error;
  }
}

Cuestionario de Entrevista

Preguntas Fundamentales

1. ¿Cuál es la diferencia entre operaciones síncronas y asíncronas en fs?

Respuesta:

Síncronas: Bloquean el Event Loop hasta completar (ej: readFileSync)
Asíncronas: No bloquean, usan callbacks o promises (ej: readFile)
Las síncronas son apropiadas solo al inicio de la app o en scripts simples
Las asíncronas son esenciales para servidores y alta concurrencia

2. ¿Qué es el patrón Error-First Callback?

Respuesta:

Convención donde el primer parámetro del callback es el error
Si no hay error, es null o undefined
El segundo parámetro contiene el resultado
Permite manejo consistente de errores en APIs asíncronas

3. ¿Cuándo usarías streams vs leer archivos completos?

Respuesta:

Streams: Archivos grandes, memoria limitada, procesamiento en tiempo real
Lectura completa: Archivos pequeños, necesitas todos los datos, operaciones simples
Streams mantienen memoria constante independiente del tamaño del archivo

4. ¿Qué diferencia hay entre path.join() y path.resolve()?

Respuesta:

path.join(): Une segmentos de ruta, mantiene rutas relativas
path.resolve(): Resuelve a ruta absoluta desde el directorio actual
join('a', 'b') → a/b, resolve('a', 'b') → /ruta/actual/a/b

5. ¿Cómo manejarías el error ENOENT?

Respuesta:

ENOENT significa "No such file or directory"
Verificar si el archivo debe existir o usar valor por defecto
Crear archivo/directorio si es necesario
No debe crashear la aplicación, manejar gracefully

Preguntas Avanzadas

6. ¿Cómo implementarías un sistema de logs con rotación automática?

Respuesta:

Monitorear tamaño del archivo actual
Crear nuevo archivo cuando se alcance el límite
Renombrar archivos antiguos (app.log → app.log.1)
Eliminar archivos más antiguos que el límite configurado
Usar streams para escritura eficiente

7. ¿Qué es una operación atómica y por qué es importante?

Respuesta:

Operación que se completa totalmente o no se realiza
Importante para evitar corrupción de datos
Técnica: escribir a archivo temporal, luego renombrar
rename() es atómico en la mayoría de sistemas de archivos

8. ¿Cómo prevenir ataques de path traversal?

Respuesta:

Validar y normalizar todas las rutas de entrada
Usar path.resolve() y verificar que la ruta esté dentro del directorio permitido
No confiar en input del usuario para rutas de archivos
Usar whitelist de archivos permitidos cuando sea posible

9. ¿Qué diferencia hay entre fs.watch() y fs.watchFile()?

Respuesta:

fs.watch(): Usa eventos del sistema operativo, más eficiente
fs.watchFile(): Usa polling, más confiable pero menos eficiente
watch() puede no funcionar en algunos sistemas de archivos de red
watchFile() funciona en todos lados pero consume más recursos

10. ¿Cómo optimizarías la lectura de miles de archivos pequeños?

Respuesta:

Usar Promise.all() con límite de concurrencia
Implementar pool de workers para evitar saturar el sistema
Considerar combinar archivos pequeños en uno grande
Usar cache para evitar lecturas repetidas
Monitorear uso de file descriptors

Ejercicios Prácticos

Ejercicio 1: Implementar un sistema de caché de archivos que almacene en memoria los archivos más accedidos.

Ejercicio 2: Crear un monitor de directorio que detecte cambios y ejecute acciones específicas.

Ejercicio 3: Desarrollar un sistema de backup incremental que solo copie archivos modificados.

Ejercicio 4: Implementar un servidor de archivos estáticos con soporte para ranges HTTP.

Ejercicio 5: Crear un sistema de migración de archivos que mueva archivos entre directorios basado en reglas.

Streams y Buffers en Node.js (3/n)

Pedro Alvarado — Fri, 03 Oct 2025 17:05:25 +0000

Tabla de Contenidos

¿Qué son los Buffers?
Trabajando con Buffers
¿Qué son los Streams?
Tipos de Streams
Readable Streams
Writable Streams
Duplex y Transform Streams
Piping y Backpressure
Casos de Uso Reales
Streams vs Lectura Completa
Cuestionario de Entrevista

¿Qué son los Buffers?

Un Buffer es un espacio temporal en memoria para almacenar datos binarios. Es la forma en que Node.js maneja datos binarios puros (imágenes, archivos, datos de red, etc.).

Analogía: El Vaso de Agua

Imagina que estás llenando un vaso con agua:

El vaso es el Buffer (espacio temporal en memoria)
El agua son los datos binarios
El tamaño del vaso es el tamaño del Buffer en bytes

¿Por Qué Buffers?

JavaScript originalmente no tenía forma de manejar datos binarios (fue diseñado para navegadores). Node.js agregó Buffers para trabajar con:

Archivos
Streams de datos
Imágenes y videos
Protocolos de red TCP
Operaciones criptográficas

Comparación con Python y Ruby

Python:

# Python usa bytes
datos = b"Hola Mundo"
print(type(datos))  # <class 'bytes'>
print(datos[0])     # 72 (valor ASCII de 'H')

# Conversiones
texto = "Hola"
datos_binarios = texto.encode('utf-8')
texto_recuperado = datos_binarios.decode('utf-8')

Ruby:

# Ruby usa String con encoding
datos = "Hola".encode('UTF-8')
puts datos.bytes  # [72, 111, 108, 97]

# String binario
binario = "\x48\x6F\x6C\x61"  # "Hola" en hex
puts binario

Node.js:

// Node.js usa Buffer
const datos = Buffer.from('Hola Mundo');
console.log(datos);
// <Buffer 48 6f 6c 61 20 4d 75 6e 64 6f>

console.log(datos[0]);  // 72 (valor ASCII de 'H')
console.log(datos.toString());  // 'Hola Mundo'

Trabajando con Buffers

Crear Buffers

// 1. Desde un string
const buf1 = Buffer.from('Hola');
console.log(buf1);
// <Buffer 48 6f 6c 61>

// 2. Desde un array de bytes
const buf2 = Buffer.from([72, 111, 108, 97]);
console.log(buf2.toString());  // 'Hola'

// 3. Buffer vacío de tamaño específico
const buf3 = Buffer.alloc(10);  // 10 bytes, inicializado con ceros
console.log(buf3);
// <Buffer 00 00 00 00 00 00 00 00 00 00>

// 4. Buffer sin inicializar (más rápido pero inseguro)
const buf4 = Buffer.allocUnsafe(10);
console.log(buf4);
// <Buffer [contenido aleatorio de memoria]>

// IMPORTANTE: Debes llenarlo antes de usar
buf4.fill(0);  // Llenar con ceros

⚠️ Advertencia sobre allocUnsafe:

// allocUnsafe no limpia la memoria
const bufferInseguro = Buffer.allocUnsafe(10);
console.log(bufferInseguro);
// Puede contener datos sensibles de memoria previa
// (contraseñas, tokens, datos de otros procesos)

// SIEMPRE inicializa después
bufferInseguro.fill(0);
// O usa alloc() que es seguro por defecto

Encodings (Codificaciones)

Node.js soporta múltiples codificaciones:

const texto = 'Hola Mundo 🌎';

// UTF-8 (por defecto, soporta todos los caracteres Unicode)
const utf8 = Buffer.from(texto, 'utf8');
console.log(utf8);
// <Buffer 48 6f 6c 61 20 4d 75 6e 64 6f 20 f0 9f 8c 8e>

// ASCII (solo caracteres 0-127)
const ascii = Buffer.from('Hola', 'ascii');
console.log(ascii.toString('ascii'));  // 'Hola'

// Base64 (para transferir datos binarios como texto)
const base64 = Buffer.from('Hola').toString('base64');
console.log(base64);  // 'SG9sYQ=='

const decodedBase64 = Buffer.from(base64, 'base64');
console.log(decodedBase64.toString());  // 'Hola'

// Hexadecimal
const hex = Buffer.from('Hola').toString('hex');
console.log(hex);  // '486f6c61'

const decodedHex = Buffer.from(hex, 'hex');
console.log(decodedHex.toString());  // 'Hola'

// Latin1 (ISO-8859-1)
const latin1 = Buffer.from('Hola', 'latin1');

// UTF-16LE
const utf16 = Buffer.from('Hola', 'utf16le');

Encodings soportados:

'utf8' - Unicode (por defecto)
'ascii' - Solo caracteres ASCII
'base64' - Base64
'hex' - Hexadecimal
'latin1' / 'binary' - ISO-8859-1
'utf16le' / 'ucs2' - UTF-16 Little Endian

Operaciones con Buffers

Leer y Escribir

const buffer = Buffer.alloc(10);

// Escribir
buffer.write('Hola', 0, 'utf8');
console.log(buffer);
// <Buffer 48 6f 6c 61 00 00 00 00 00 00>

// Escribir en posición específica
buffer.write('Mundo', 5, 'utf8');
console.log(buffer.toString());
// 'HolaMundo\x00'

// Leer bytes individuales
console.log(buffer[0]);  // 72 ('H')
console.log(buffer[5]);  // 77 ('M')

// Modificar bytes
buffer[0] = 65;  // 'A' en ASCII
console.log(buffer.toString());  // 'AolaMundo\x00'

Copiar Buffers

const buf1 = Buffer.from('Hola');
const buf2 = Buffer.alloc(4);

// Copiar de buf1 a buf2
buf1.copy(buf2);
console.log(buf2.toString());  // 'Hola'

// Copiar parcialmente
const buf3 = Buffer.from('Hola Mundo');
const buf4 = Buffer.alloc(4);

buf3.copy(
  buf4,    // destino
  0,       // posición destino
  0,       // posición inicio origen
  4        // posición fin origen
);
console.log(buf4.toString());  // 'Hola'

Concatenar Buffers

const buf1 = Buffer.from('Hola ');
const buf2 = Buffer.from('Mundo');

const concatenado = Buffer.concat([buf1, buf2]);
console.log(concatenado.toString());  // 'Hola Mundo'

// Con múltiples buffers
const buf3 = Buffer.from('!');
const resultado = Buffer.concat([buf1, buf2, buf3]);
console.log(resultado.toString());  // 'Hola Mundo!'

// Especificar longitud total
const limitado = Buffer.concat([buf1, buf2], 8);
console.log(limitado.toString());  // 'Hola Mun'

Comparar Buffers

const buf1 = Buffer.from('ABC');
const buf2 = Buffer.from('ABC');
const buf3 = Buffer.from('ABD');

// Comparación
console.log(buf1.equals(buf2));  // true
console.log(buf1.equals(buf3));  // false

// Compare (retorna -1, 0, o 1)
console.log(buf1.compare(buf2));  // 0 (iguales)
console.log(buf1.compare(buf3));  // -1 (buf1 < buf3)
console.log(buf3.compare(buf1));  // 1 (buf3 > buf1)

// Ordenar arrays de buffers
const buffers = [
  Buffer.from('C'),
  Buffer.from('A'),
  Buffer.from('B')
];

buffers.sort(Buffer.compare);
console.log(buffers.map(b => b.toString()));
// ['A', 'B', 'C']

Slicing (Cortar)

const buffer = Buffer.from('Hola Mundo');

// Obtener subcadena
const slice = buffer.slice(0, 4);
console.log(slice.toString());  // 'Hola'

// ⚠️ IMPORTANTE: slice() NO crea una copia
// Modifica la referencia original
slice[0] = 65;  // Cambiar a 'A'
console.log(buffer.toString());  // 'Aola Mundo'

// Para hacer una copia real:
const copia = Buffer.from(buffer.slice(0, 4));
copia[0] = 66;  // Cambiar a 'B'
console.log(buffer.toString());  // 'Aola Mundo' (sin cambios)
console.log(copia.toString());   // 'Bola'

Trabajar con JSON

const usuario = {
  nombre: 'Juan',
  edad: 30,
  activo: true
};

// Convertir objeto a Buffer
const buffer = Buffer.from(JSON.stringify(usuario));
console.log(buffer);
// <Buffer 7b 22 6e 6f 6d 62 72 65 22 3a 22 4a 75 61 6e ...>

// Convertir Buffer a objeto
const objetoRecuperado = JSON.parse(buffer.toString());
console.log(objetoRecuperado);
// { nombre: 'Juan', edad: 30, activo: true }

// Usar con toJSON()
const buf = Buffer.from('Hola');
console.log(JSON.stringify(buf));
// {"type":"Buffer","data":[72,111,108,97]}

Casos de Uso Comunes de Buffers

const fs = require('fs');
const crypto = require('crypto');

// 1. Leer archivo como Buffer
const contenido = fs.readFileSync('imagen.png');
console.log(contenido instanceof Buffer);  // true

// 2. Operaciones criptográficas
const hash = crypto
  .createHash('sha256')
  .update('mi contraseña')
  .digest();  // Retorna un Buffer
console.log(hash.toString('hex'));

// 3. Trabajar con datos binarios
const imagen = Buffer.from([0xFF, 0xD8, 0xFF, 0xE0]);  // JPEG header
console.log(imagen);

// 4. Convertir entre encodings
const base64Data = 'SGVsbG8gV29ybGQ=';
const buffer = Buffer.from(base64Data, 'base64');
const texto = buffer.toString('utf8');
console.log(texto);  // 'Hello World'

¿Qué son los Streams?

Los Streams son colecciones de datos (como arrays o strings) con la diferencia de que no necesitan estar disponibles todos al mismo tiempo y no tienen que caber en memoria.

Analogía: Manguera vs Cubeta

Sin Streams (Leyendo todo):

Tienes sed y hay un río →
Llenas un camión cisterna completo →
Esperas que se llene todo →
Recién entonces puedes beber

❌ Lento
❌ Requiere mucha memoria
❌ No puedes empezar hasta tener todo

Con Streams:

Tienes sed y hay un río →
Usas una manguera/pajilla →
Bebes mientras fluye el agua

✅ Inmediato
✅ Memoria constante
✅ Puedes empezar de inmediato

¿Por Qué Usar Streams?

1. Eficiencia de Memoria

const fs = require('fs');

// ❌ SIN STREAMS - Carga todo en memoria
const datos = fs.readFileSync('archivo-5gb.txt');
// Si el archivo es de 5GB, necesitas 5GB de RAM
console.log(datos.toString());

// ✅ CON STREAMS - Memoria constante
const stream = fs.createReadStream('archivo-5gb.txt');
stream.on('data', (chunk) => {
  console.log(`Recibido chunk de ${chunk.length} bytes`);
  // Procesa chunk (ej: 64KB) y libera memoria
});
// Solo necesitas ~64KB de RAM a la vez

2. Eficiencia de Tiempo (Time Efficiency)

const fs = require('fs');
const http = require('http');

// ❌ SIN STREAMS - El usuario espera hasta que todo esté listo
http.createServer((req, res) => {
  fs.readFile('pelicula-1gb.mp4', (err, data) => {
    res.end(data);  // Espera cargar todo antes de enviar
  });
}).listen(8000);

// ✅ CON STREAMS - El usuario empieza a recibir inmediatamente
http.createServer((req, res) => {
  const stream = fs.createReadStream('pelicula-1gb.mp4');
  stream.pipe(res);  // Envía mientras lee
}).listen(8000);

Comparación con Python

Python (sin streams):

# Leer archivo completo
with open('archivo.txt', 'r') as f:
    contenido = f.read()  # Todo en memoria
    print(contenido)

Python (con generadores - similar a streams):

def leer_lineas(archivo):
    with open(archivo) as f:
        for linea in f:  # Lee línea por línea
            yield linea

for linea in leer_lineas('archivo.txt'):
    print(linea)

Node.js (con streams):

const fs = require('fs');
const stream = fs.createReadStream('archivo.txt');

stream.on('data', (chunk) => {
  console.log(chunk.toString());
});

Tipos de Streams

Node.js tiene 4 tipos fundamentales de streams:

┌──────────────────────────────────────────────┐
│                                              │
│  1. Readable    →  Puedes LEER datos        │
│     (origen de datos)                        │
│                                              │
│  2. Writable    →  Puedes ESCRIBIR datos    │
│     (destino de datos)                       │
│                                              │
│  3. Duplex      →  Puedes LEER y ESCRIBIR   │
│     (ambas direcciones)                      │
│                                              │
│  4. Transform   →  Modifica datos al pasar  │
│     (procesa mientras transmite)             │
│                                              │
└──────────────────────────────────────────────┘

Ejemplos de Cada Tipo

const fs = require('fs');
const net = require('net');
const crypto = require('crypto');
const { Transform } = require('stream');

// 1. READABLE - fs.createReadStream()
const readable = fs.createReadStream('entrada.txt');

// 2. WRITABLE - fs.createWriteStream()
const writable = fs.createWriteStream('salida.txt');

// 3. DUPLEX - net.Socket (conexión TCP)
const socket = net.connect(8000);
socket.write('datos');  // Writable
socket.on('data', console.log);  // Readable

// 4. TRANSFORM - crypto.createCipheriv()
const cipher = crypto.createCipheriv('aes256', key, iv);
// Lee datos, los encripta, los escribe

Tabla de Streams Comunes

Tipo	Ejemplos	Descripción
Readable	`fs.createReadStream()`	Leer archivos
	`http.IncomingMessage`	Request del servidor
	`process.stdin`	Entrada estándar
	`zlib.createGunzip()`	Descomprimir
Writable	`fs.createWriteStream()`	Escribir archivos
	`http.ServerResponse`	Response del servidor
	`process.stdout`	Salida estándar
	`process.stderr`	Salida de error
Duplex	`net.Socket`	TCP sockets
	`tls.TLSSocket`	TLS/SSL sockets
Transform	`zlib.createGzip()`	Comprimir
	`crypto.createCipher()`	Encriptar
	`stream.Transform`	Custom transforms

Readable Streams

Los Readable Streams te permiten leer datos de una fuente.

Modos de Lectura

Readable streams operan en dos modos:

Flowing Mode (Flujo): Los datos fluyen automáticamente
Paused Mode (Pausado): Debes pedir datos manualmente

const fs = require('fs');

// PAUSED MODE (por defecto)
const stream = fs.createReadStream('archivo.txt');

stream.on('readable', () => {
  let chunk;
  // Leer manualmente
  while ((chunk = stream.read()) !== null) {
    console.log(`Recibido: ${chunk.length} bytes`);
  }
});

// FLOWING MODE
const stream2 = fs.createReadStream('archivo.txt');

stream2.on('data', (chunk) => {
  // Datos fluyen automáticamente
  console.log(`Recibido: ${chunk.length} bytes`);
});

Eventos de Readable Streams

const fs = require('fs');

const stream = fs.createReadStream('archivo.txt', {
  encoding: 'utf8',
  highWaterMark: 16 * 1024  // Tamaño del chunk: 16KB
});

// 1. 'data' - Nuevo chunk disponible (flowing mode)
stream.on('data', (chunk) => {
  console.log('Datos recibidos:', chunk.length, 'bytes');
});

// 2. 'end' - No hay más datos
stream.on('end', () => {
  console.log('Lectura completada');
});

// 3. 'error' - Error durante la lectura
stream.on('error', (error) => {
  console.error('Error:', error);
});

// 4. 'close' - Stream cerrado
stream.on('close', () => {
  console.log('Stream cerrado');
});

// 5. 'readable' - Datos disponibles para leer (paused mode)
stream.on('readable', () => {
  console.log('Hay datos disponibles');
});

Crear Readable Stream Personalizado

const { Readable } = require('stream');

// Ejemplo 1: Stream simple desde array
class ArrayStream extends Readable {
  constructor(array) {
    super();
    this.array = array;
    this.index = 0;
  }

  _read() {
    if (this.index < this.array.length) {
      const chunk = this.array[this.index];
      this.push(chunk);  // Enviar datos
      this.index++;
    } else {
      this.push(null);  // Señal de fin
    }
  }
}

const stream = new ArrayStream(['Hola', ' ', 'Mundo', '\n']);

stream.on('data', (chunk) => {
  console.log('Recibido:', chunk);
});

stream.on('end', () => {
  console.log('Fin del stream');
});

// Salida:
// Recibido: Hola
// Recibido:  
// Recibido: Mundo
// Recibido: \n
// Fin del stream

// Ejemplo 2: Stream de números
class ContadorStream extends Readable {
  constructor(limite) {
    super({ objectMode: true });  // Para objetos en vez de buffers
    this.limite = limite;
    this.contador = 1;
  }

  _read() {
    if (this.contador <= this.limite) {
      this.push({ numero: this.contador });
      this.contador++;
    } else {
      this.push(null);
    }
  }
}

const contador = new ContadorStream(5);

contador.on('data', (obj) => {
  console.log('Número:', obj.numero);
});

// Salida:
// Número: 1
// Número: 2
// Número: 3
// Número: 4
// Número: 5

Control de Flujo

const fs = require('fs');

const stream = fs.createReadStream('archivo-grande.txt');

stream.on('data', (chunk) => {
  console.log('Procesando chunk...');

  // Pausar el stream si necesitas tiempo para procesar
  stream.pause();

  // Simular procesamiento pesado
  setTimeout(() => {
    console.log('Chunk procesado, continuando...');
    stream.resume();  // Reanudar
  }, 1000);
});

stream.on('end', () => {
  console.log('Todos los chunks procesados');
});

Writable Streams

Los Writable Streams te permiten escribir datos a un destino.

Escribir en Streams

const fs = require('fs');

const stream = fs.createWriteStream('salida.txt');

// Escribir datos
stream.write('Primera línea\n');
stream.write('Segunda línea\n');
stream.write('Tercera línea\n');

// Finalizar el stream
stream.end('Última línea\n');

// O simplemente
// stream.end();

Eventos de Writable Streams

const fs = require('fs');

const stream = fs.createWriteStream('salida.txt');

// 1. 'drain' - El buffer interno está listo para más datos
stream.on('drain', () => {
  console.log('Buffer liberado, puedo escribir más');
});

// 2. 'finish' - Todos los datos fueron escritos
stream.on('finish', () => {
  console.log('Escritura completada');
});

// 3. 'error' - Error durante la escritura
stream.on('error', (error) => {
  console.error('Error:', error);
});

// 4. 'close' - Stream cerrado
stream.on('close', () => {
  console.log('Stream cerrado');
});

// 5. 'pipe' - Readable stream conectado vía pipe
stream.on('pipe', (src) => {
  console.log('Algo se conectó vía pipe');
});

// 6. 'unpipe' - Readable stream desconectado
stream.on('unpipe', (src) => {
  console.log('Algo se desconectó');
});

Backpressure (Contrapresión)

Uno de los conceptos más importantes en streams.

const fs = require('fs');

const stream = fs.createWriteStream('salida.txt');

// write() retorna false cuando el buffer está lleno
function escribirMillon() {
  let i = 1000000;

  function escribir() {
    let ok = true;

    while (i > 0 && ok) {
      i--;
      const datos = `Línea ${i}\n`;

      // write() retorna false si el buffer está lleno
      ok = stream.write(datos);

      if (!ok) {
        console.log('Buffer lleno, esperando drain...');
      }
    }

    if (i > 0) {
      // Esperar evento 'drain' antes de continuar
      stream.once('drain', escribir);
    } else {
      stream.end();
    }
  }

  escribir();
}

escribirMillon();

stream.on('finish', () => {
  console.log('Escritura completada');
});

¿Qué es Backpressure?

El stream tiene un buffer interno limitado
Si escribes más rápido de lo que puede procesar, el buffer se llena
write() retorna false cuando el buffer está lleno
Debes esperar el evento 'drain' antes de continuar
Si ignoras esto, causas fugas de memoria

Crear Writable Stream Personalizado

const { Writable } = require('stream');

// Stream que convierte a mayúsculas y escribe en consola
class UpperCaseStream extends Writable {
  _write(chunk, encoding, callback) {
    try {
      const texto = chunk.toString().toUpperCase();
      console.log(texto);
      callback();  // Indicar éxito
    } catch (error) {
      callback(error);  // Indicar error
    }
  }
}

const stream = new UpperCaseStream();

stream.write('hola ');
stream.write('mundo');
stream.end();

// Salida:
// HOLA 
// MUNDO

// Stream que acumula datos y los procesa al final
class AcumuladorStream extends Writable {
  constructor(options) {
    super(options);
    this.datos = [];
  }

  _write(chunk, encoding, callback) {
    this.datos.push(chunk);
    callback();
  }

  _final(callback) {
    // Llamado cuando stream.end()
    const total = Buffer.concat(this.datos);
    console.log('Total acumulado:', total.toString());
    callback();
  }
}

const acumulador = new AcumuladorStream();

acumulador.write('Parte 1 ');
acumulador.write('Parte 2 ');
acumulador.write('Parte 3');
acumulador.end();

// Salida (al final):
// Total acumulado: Parte 1 Parte 2 Parte 3

Duplex y Transform Streams

Duplex Streams

Duplex streams son tanto Readable como Writable.

const { Duplex } = require('stream');

class EchoStream extends Duplex {
  constructor(options) {
    super(options);
    this.datos = [];
  }

  // Lado Writable
  _write(chunk, encoding, callback) {
    this.datos.push(chunk);
    callback();
  }

  // Lado Readable
  _read() {
    if (this.datos.length > 0) {
      const chunk = this.datos.shift();
      this.push(chunk);
    }
  }
}

const echo = new EchoStream();

// Escribir datos
echo.write('Hola ');
echo.write('Mundo');
echo.end();

// Leer datos
echo.on('data', (chunk) => {
  console.log('Eco:', chunk.toString());
});

// Salida:
// Eco: Hola 
// Eco: Mundo

Transform Streams

Transform streams son Duplex streams que modifican datos mientras pasan.

const { Transform } = require('stream');

// Stream que convierte a mayúsculas
class UppercaseTransform extends Transform {
  _transform(chunk, encoding, callback) {
    // Transformar el chunk
    const transformado = chunk.toString().toUpperCase();
    // Enviar el dato transformado
    this.push(transformado);
    callback();
  }
}

const upper = new UppercaseTransform();

upper.on('data', (chunk) => {
  console.log(chunk.toString());
});

upper.write('hola ');
upper.write('mundo');
upper.end();

// Salida:
// HOLA 
// MUNDO

Transform Streams Comunes

const fs = require('fs');
const zlib = require('zlib');
const crypto = require('crypto');

// 1. COMPRESIÓN
const gzip = zlib.createGzip();

fs.createReadStream('entrada.txt')
  .pipe(gzip)
  .pipe(fs.createWriteStream('entrada.txt.gz'));

// 2. DESCOMPRESIÓN
const gunzip = zlib.createGunzip();

fs.createReadStream('archivo.txt.gz')
  .pipe(gunzip)
  .pipe(fs.createWriteStream('archivo.txt'));

// 3. ENCRIPTACIÓN
const algorithm = 'aes-256-cbc';
const key = crypto.randomBytes(32);
const iv = crypto.randomBytes(16);

const cipher = crypto.createCipheriv(algorithm, key, iv);

fs.createReadStream('secreto.txt')
  .pipe(cipher)
  .pipe(fs.createWriteStream('secreto.txt.enc'));

// 4. DESENCRIPTACIÓN
const decipher = crypto.createDecipheriv(algorithm, key, iv);

fs.createReadStream('secreto.txt.enc')
  .pipe(decipher)
  .pipe(fs.createWriteStream('secreto-recuperado.txt'));

Ejemplo Avanzado: Procesador de CSV

const { Transform } = require('stream');
const fs = require('fs');

// Transform que procesa líneas CSV
class CSVParser extends Transform {
  constructor(options) {
    super({ objectMode: true });
    this.headers = null;
    this.buffer = '';
  }

  _transform(chunk, encoding, callback) {
    this.buffer += chunk.toString();
    const lines = this.buffer.split('\n');

    // Mantener la última línea incompleta en el buffer
    this.buffer = lines.pop();

    for (const line of lines) {
      if (!line.trim()) continue;

      const values = line.split(',');

      if (!this.headers) {
        this.headers = values;
        continue;
      }

      const obj = {};
      for (let i = 0; i < this.headers.length; i++) {
        obj[this.headers[i]] = values[i];
      }

      this.push(obj);
    }

    callback();
  }

  _flush(callback) {
    // Procesar la última línea
    if (this.buffer.trim()) {
      const values = this.buffer.split(',');
      const obj = {};
      for (let i = 0; i < this.headers.length; i++) {
        obj[this.headers[i]] = values[i];
      }
      this.push(obj);
    }
    callback();
  }
}

// Uso del CSV Parser
const csvParser = new CSVParser();

fs.createReadStream('usuarios.csv')
  .pipe(csvParser)
  .on('data', (usuario) => {
    console.log('Usuario:', usuario);
    // { nombre: 'Juan', edad: '30', email: 'juan@example.com' }
  })
  .on('end', () => {
    console.log('CSV procesado completamente');
  });

Piping y Backpressure

¿Qué es Piping?

Piping es conectar la salida de un Readable stream con la entrada de un Writable stream.

const fs = require('fs');

// Copiar archivo usando streams
fs.createReadStream('entrada.txt')
  .pipe(fs.createWriteStream('salida.txt'));

Analogía con Unix:

# En Unix/Linux
cat archivo.txt | grep "buscar" | sort > resultado.txt

# En Node.js
fs.createReadStream('archivo.txt')
  .pipe(grepStream)
  .pipe(sortStream)
  .pipe(fs.createWriteStream('resultado.txt'));

Pipeline Complejo

const fs = require('fs');
const zlib = require('zlib');
const crypto = require('crypto');

// Pipeline: Leer → Encriptar → Comprimir → Escribir
fs.createReadStream('secreto.txt')
  .pipe(crypto.createCipheriv('aes256', key, iv))
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('secreto.txt.enc.gz'))
  .on('finish', () => {
    console.log('Archivo procesado completamente');
  })
  .on('error', (err) => {
    console.error('Error en el pipeline:', err);
  });

stream.pipeline() - Manejo de Errores Mejorado

const { pipeline } = require('stream');
const fs = require('fs');
const zlib = require('zlib');

pipeline(
  fs.createReadStream('entrada.txt'),
  zlib.createGzip(),
  fs.createWriteStream('salida.txt.gz'),
  (err) => {
    if (err) {
      console.error('Pipeline falló:', err);
    } else {
      console.log('Pipeline completado exitosamente');
    }
  }
);

// Con Promises (Node.js 15+)
const { pipeline } = require('stream/promises');

try {
  await pipeline(
    fs.createReadStream('entrada.txt'),
    zlib.createGzip(),
    fs.createWriteStream('salida.txt.gz')
  );
  console.log('Pipeline completado');
} catch (error) {
  console.error('Pipeline falló:', error);
}

¿Qué es Backpressure?

Backpressure ocurre cuando un stream produce datos más rápido de lo que el siguiente stream puede consumirlos.

const fs = require('fs');

const readable = fs.createReadStream('archivo-grande.txt');
const writable = fs.createWriteStream('copia.txt');

readable.on('data', (chunk) => {
  const ok = writable.write(chunk);

  if (!ok) {
    // El writable está sobrecargado
    console.log('Backpressure detectado, pausando lectura...');
    readable.pause();

    // Esperar a que se libere
    writable.once('drain', () => {
      console.log('Buffer liberado, reanudando lectura...');
      readable.resume();
    });
  }
});

¿Por qué es importante?

Sin manejo de backpressure: fuga de memoria
Los datos se acumulan en memoria sin límite
La aplicación puede crashear por falta de memoria

Pipe Maneja Backpressure Automáticamente

// ✅ CORRECTO - pipe() maneja backpressure automáticamente
fs.createReadStream('archivo-grande.txt')
  .pipe(fs.createWriteStream('copia.txt'));

// ❌ INCORRECTO - Sin manejo de backpressure
const readable = fs.createReadStream('archivo-grande.txt');
const writable = fs.createWriteStream('copia.txt');

readable.on('data', (chunk) => {
  writable.write(chunk); // Puede causar fuga de memoria
});

Transform Stream con Backpressure

const { Transform } = require('stream');

class SlowProcessor extends Transform {
  _transform(chunk, encoding, callback) {
    // Simular procesamiento lento
    setTimeout(() => {
      const processed = chunk.toString().toUpperCase();
      this.push(processed);
      callback();
    }, 100); // 100ms por chunk
  }
}

const processor = new SlowProcessor();

fs.createReadStream('input.txt')
  .pipe(processor) // Automáticamente maneja backpressure
  .pipe(fs.createWriteStream('output.txt'));

Casos de Uso Reales

1. Servidor de Descarga de Archivos

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  if (req.method === 'GET' && req.url.startsWith('/download/')) {
    const filename = path.basename(req.url);
    const filepath = path.join(__dirname, 'files', filename);

    // Verificar que el archivo existe
    fs.access(filepath, fs.constants.F_OK, (err) => {
      if (err) {
        res.statusCode = 404;
        res.end('Archivo no encontrado');
        return;
      }

      // Obtener información del archivo
      fs.stat(filepath, (err, stats) => {
        if (err) {
          res.statusCode = 500;
          res.end('Error del servidor');
          return;
        }

        // Headers de respuesta
        res.setHeader('Content-Type', 'application/octet-stream');
        res.setHeader('Content-Length', stats.size);
        res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);

        // Stream el archivo directamente al cliente
        const fileStream = fs.createReadStream(filepath);

        fileStream.on('error', (err) => {
          console.error('Error leyendo archivo:', err);
          res.statusCode = 500;
          res.end('Error leyendo archivo');
        });

        // Pipe automáticamente maneja backpressure
        fileStream.pipe(res);
      });
    });
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Servidor de descarga en puerto 3000');
});

2. Procesador de Logs en Tiempo Real

const fs = require('fs');
const { Transform } = require('stream');

// Transform para parsear logs de Apache/Nginx
class LogParser extends Transform {
  constructor() {
    super({ objectMode: true });
  }

  _transform(chunk, encoding, callback) {
    const lines = chunk.toString().split('\n');

    for (const line of lines) {
      if (!line.trim()) continue;

      // Parsear línea de log (formato común de Apache)
      const match = line.match(/^(\S+) \S+ \S+ \[([\w:/]+\s[+\-]\d{4})\] "(\S+) (\S+) (\S+)" (\d{3}) (\d+|-)/);

      if (match) {
        const logEntry = {
          ip: match[1],
          timestamp: new Date(match[2]),
          method: match[3],
          url: match[4],
          protocol: match[5],
          status: parseInt(match[6]),
          size: match[7] === '-' ? 0 : parseInt(match[7])
        };

        this.push(logEntry);
      }
    }

    callback();
  }
}

// Transform para filtrar errores
class ErrorFilter extends Transform {
  constructor() {
    super({ objectMode: true });
  }

  _transform(logEntry, encoding, callback) {
    if (logEntry.status >= 400) {
      this.push(logEntry);
    }
    callback();
  }
}

// Procesar logs en tiempo real
const logParser = new LogParser();
const errorFilter = new ErrorFilter();

fs.createReadStream('/var/log/apache2/access.log')
  .pipe(logParser)
  .pipe(errorFilter)
  .on('data', (errorLog) => {
    console.log(`ERROR ${errorLog.status}: ${errorLog.method} ${errorLog.url} desde ${errorLog.ip}`);

    // Enviar alerta si es error crítico
    if (errorLog.status >= 500) {
      console.log('🚨 ALERTA: Error del servidor detectado!');
    }
  });

3. Compresión de Imágenes en Lote

const fs = require('fs');
const path = require('path');
const { Transform, pipeline } = require('stream');
const sharp = require('sharp'); // npm install sharp

class ImageProcessor extends Transform {
  constructor(options = {}) {
    super({ objectMode: true });
    this.quality = options.quality || 80;
    this.width = options.width || 800;
  }

  _transform(file, encoding, callback) {
    const inputPath = file.path;
    const outputPath = path.join(
      path.dirname(inputPath),
      'compressed',
      path.basename(inputPath)
    );

    // Crear directorio si no existe
    fs.mkdirSync(path.dirname(outputPath), { recursive: true });

    sharp(inputPath)
      .resize(this.width)
      .jpeg({ quality: this.quality })
      .toFile(outputPath)
      .then(() => {
        console.log(`Procesada: ${path.basename(inputPath)}`);
        this.push({ input: inputPath, output: outputPath });
        callback();
      })
      .catch(callback);
  }
}

// Stream que lee archivos de un directorio
class DirectoryReader extends require('stream').Readable {
  constructor(directory) {
    super({ objectMode: true });
    this.directory = directory;
    this.files = [];
    this.index = 0;

    // Leer archivos de imagen
    const files = fs.readdirSync(directory);
    this.files = files
      .filter(file => /\.(jpg|jpeg|png)$/i.test(file))
      .map(file => ({ path: path.join(directory, file) }));
  }

  _read() {
    if (this.index < this.files.length) {
      this.push(this.files[this.index]);
      this.index++;
    } else {
      this.push(null); // Fin del stream
    }
  }
}

// Usar el procesador
const imageDir = './images';
const reader = new DirectoryReader(imageDir);
const processor = new ImageProcessor({ quality: 70, width: 600 });

reader
  .pipe(processor)
  .on('data', (result) => {
    console.log(`✅ Imagen comprimida: ${result.output}`);
  })
  .on('end', () => {
    console.log('🎉 Todas las imágenes procesadas!');
  })
  .on('error', (err) => {
    console.error('❌ Error procesando imágenes:', err);
  });

4. API de Upload con Streams

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const crypto = require('crypto');
const { pipeline } = require('stream');

const app = express();

// Configurar multer para manejar uploads
const upload = multer({ dest: 'temp/' });

app.post('/upload', upload.single('file'), async (req, res) => {
  try {
    const tempPath = req.file.path;
    const hash = crypto.createHash('sha256');
    const finalPath = `uploads/${Date.now()}-${req.file.originalname}`;

    // Pipeline: Leer temp → Calcular hash → Escribir final
    await pipeline(
      fs.createReadStream(tempPath),
      hash,
      fs.createWriteStream(finalPath)
    );

    // Limpiar archivo temporal
    fs.unlinkSync(tempPath);

    res.json({
      message: 'Archivo subido exitosamente',
      filename: path.basename(finalPath),
      hash: hash.digest('hex'),
      size: req.file.size
    });

  } catch (error) {
    console.error('Error en upload:', error);
    res.status(500).json({ error: 'Error subiendo archivo' });
  }
});

app.listen(3000, () => {
  console.log('Servidor de upload en puerto 3000');
});

Streams vs Lectura Completa

Comparación de Memoria

const fs = require('fs');

// ❌ LECTURA COMPLETA - Usa mucha memoria
function procesarArchivoCompleto(filename) {
  console.log('Memoria antes:', process.memoryUsage().heapUsed / 1024 / 1024, 'MB');

  const data = fs.readFileSync(filename);
  const lines = data.toString().split('\n');

  let count = 0;
  for (const line of lines) {
    if (line.includes('ERROR')) count++;
  }

  console.log('Memoria después:', process.memoryUsage().heapUsed / 1024 / 1024, 'MB');
  console.log('Errores encontrados:', count);
}

// ✅ STREAMS - Memoria constante
function procesarArchivoStream(filename) {
  console.log('Memoria antes:', process.memoryUsage().heapUsed / 1024 / 1024, 'MB');

  let count = 0;
  let buffer = '';

  const stream = fs.createReadStream(filename, { encoding: 'utf8' });

  stream.on('data', (chunk) => {
    buffer += chunk;
    const lines = buffer.split('\n');
    buffer = lines.pop(); // Mantener línea incompleta

    for (const line of lines) {
      if (line.includes('ERROR')) count++;
    }

    console.log('Memoria durante:', process.memoryUsage().heapUsed / 1024 / 1024, 'MB');
  });

  stream.on('end', () => {
    // Procesar última línea
    if (buffer && buffer.includes('ERROR')) count++;

    console.log('Memoria final:', process.memoryUsage().heapUsed / 1024 / 1024, 'MB');
    console.log('Errores encontrados:', count);
  });
}

// Probar con archivo de 100MB
// procesarArchivoCompleto('log-grande.txt'); // ~100MB en memoria
// procesarArchivoStream('log-grande.txt');   // ~2MB en memoria

Comparación de Tiempo

const fs = require('fs');

// Medir tiempo de procesamiento
function medirTiempo(fn, nombre) {
  const inicio = Date.now();

  fn(() => {
    const fin = Date.now();
    console.log(`${nombre}: ${fin - inicio}ms`);
  });
}

// Test con archivo de 50MB
medirTiempo((callback) => {
  // Lectura completa
  fs.readFile('archivo-50mb.txt', (err, data) => {
    console.log('Archivo cargado en memoria');
    callback();
  });
}, 'Lectura completa');

medirTiempo((callback) => {
  // Stream
  const stream = fs.createReadStream('archivo-50mb.txt');
  stream.on('data', (chunk) => {
    // Procesar chunk inmediatamente
  });
  stream.on('end', callback);
}, 'Stream');

// Resultados típicos:
// Lectura completa: 2000ms (espera a cargar todo)
// Stream: 50ms (empieza inmediatamente)

Cuestionario de Entrevista

Preguntas Fundamentales

1. ¿Qué es un Buffer en Node.js y cuándo lo usarías?

Respuesta:

Un Buffer es un espacio temporal en memoria para datos binarios
Node.js usa Buffers para manejar datos que no son texto (imágenes, archivos, datos de red)
Se usa cuando trabajas con: archivos binarios, operaciones criptográficas, protocolos de red, conversiones entre encodings

2. ¿Cuáles son los 4 tipos de Streams en Node.js?

Respuesta:

Readable: Para leer datos (ej: fs.createReadStream)
Writable: Para escribir datos (ej: fs.createWriteStream)
Duplex: Para leer y escribir (ej: net.Socket)
Transform: Para modificar datos mientras pasan (ej: zlib.createGzip)

3. ¿Qué es backpressure y por qué es importante?

Respuesta:

Backpressure ocurre cuando un stream produce datos más rápido de lo que se pueden consumir
Sin manejo adecuado causa fugas de memoria
pipe() maneja backpressure automáticamente
Manualmente se maneja con eventos drain y pausando/reanudando streams

4. ¿Cuál es la diferencia entre Flowing Mode y Paused Mode en Readable Streams?

Respuesta:

Paused Mode: Debes pedir datos manualmente con stream.read()
Flowing Mode: Los datos fluyen automáticamente vía evento data
Se cambia a Flowing Mode al agregar listener de data
Se puede pausar/reanudar con pause() y resume()

5. ¿Cuándo usarías Streams vs leer archivos completos?

Respuesta:

Streams: Archivos grandes, memoria limitada, procesamiento en tiempo real, operaciones de red
Lectura completa: Archivos pequeños, necesitas todos los datos a la vez, operaciones simples

Preguntas Avanzadas

6. ¿Cómo crearías un Transform Stream personalizado?

Respuesta:

const { Transform } = require('stream');

class MiTransform extends Transform {
  _transform(chunk, encoding, callback) {
    const transformado = chunk.toString().toUpperCase();
    this.push(transformado);
    callback();
  }
}

7. ¿Qué hace stream.pipeline() y por qué es mejor que pipe()?

Respuesta:

pipeline() maneja errores automáticamente en toda la cadena
Limpia recursos correctamente si hay errores
Proporciona callback único para éxito/error
Mejor para pipelines complejos

8. ¿Cómo manejarías un archivo de 10GB sin cargar todo en memoria?

Respuesta:

Usar fs.createReadStream() con chunks pequeños
Procesar chunk por chunk
Usar Transform streams para modificaciones
Implementar backpressure si es necesario

9. ¿Qué es highWaterMark en streams?

Respuesta:

Tamaño del buffer interno del stream
Controla cuántos datos se pueden almacenar antes de aplicar backpressure
Se puede configurar al crear el stream
Valor por defecto: 16KB para streams de datos, 16 para object mode

10. ¿Cómo implementarías un sistema de logs que rote archivos automáticamente?

Respuesta:

Usar Writable stream personalizado
Monitorear tamaño del archivo actual
Crear nuevo archivo cuando se alcance el límite
Cerrar stream anterior y abrir nuevo
Considerar fecha/hora para rotación temporal

Ejercicios Prácticos

Ejercicio 1: Crear un Transform stream que cuente líneas y palabras en un archivo de texto.

Ejercicio 2: Implementar un sistema de backup que comprima y encripte archivos usando streams.

Ejercicio 3: Crear un servidor HTTP que sirva archivos grandes usando streams con soporte para ranges (partial content).

Ejercicio 4: Implementar un procesador de CSV que convierta archivos grandes a JSON usando streams.

Ejercicio 5: Crear un sistema de monitoreo que procese logs en tiempo real y envíe alertas.

Módulos y Gestión de Dependencias en Node.js (2/n)

Pedro Alvarado — Fri, 03 Oct 2025 17:03:09 +0000

Guía Completa: Módulos y Gestión de Dependencias en Node.js

Tabla de Contenidos

Sistema de Módulos en Node.js
CommonJS vs ES Modules
Module Caching
El Archivo package.json
Gestores de Paquetes
node_modules y Resolución de Dependencias
Semantic Versioning
Lock Files
Seguridad y Auditorías
Buenas Prácticas
Cuestionario de Entrevista

Sistema de Módulos en Node.js

Node.js implementa un sistema de módulos para organizar y reutilizar código. Cada archivo en Node.js es tratado como un módulo independiente.

¿Qué es un Módulo?

Un módulo es una unidad encapsulada de código que puede exportar funcionalidades y ser importada por otros módulos.

Analogía con Python:

# Python: archivo math_utils.py
def sumar(a, b):
    return a + b

def restar(a, b):
    return a - b

# Importar en otro archivo
from math_utils import sumar
print(sumar(5, 3))

Analogía con Ruby:

# Ruby: archivo math_utils.rb
module MathUtils
  def self.sumar(a, b)
    a + b
  end

  def self.restar(a, b)
    a - b
  end
end

# Importar en otro archivo
require_relative 'math_utils'
puts MathUtils.sumar(5, 3)

Tipos de Módulos en Node.js

Módulos Core (Nativos)
Módulos Locales (Tu código)
Módulos de Terceros (node_modules)

// 1. Módulos Core - Sin ./ y sin instalar
const fs = require('fs');
const http = require('http');
const path = require('path');

// 2. Módulos Locales - Con ./ o ruta relativa
const miModulo = require('./mi-modulo');
const utilidades = require('../utils/helpers');

// 3. Módulos de Terceros - Sin ./ y desde node_modules
const express = require('express');
const lodash = require('lodash');

CommonJS vs ES Modules

Node.js soporta dos sistemas de módulos: CommonJS (el original) y ES Modules (el estándar de JavaScript moderno).

CommonJS (CJS)

El sistema de módulos original de Node.js. Usa require() y module.exports.

// math.js - Exportando con CommonJS
function sumar(a, b) {
  return a + b;
}

function restar(a, b) {
  return a - b;
}

function multiplicar(a, b) {
  return a * b;
}

// Forma 1: Exportar múltiples funciones
module.exports = {
  sumar,
  restar,
  multiplicar
};

// Forma 2: Exportar una por una
module.exports.sumar = sumar;
module.exports.restar = restar;

// Forma 3: Usando exports (atajo de module.exports)
exports.sumar = sumar;
exports.restar = restar;

// ⚠️ CUIDADO: Esto NO funciona
exports = { sumar, restar }; // Rompe la referencia

// app.js - Importando con CommonJS
const math = require('./math');

console.log(math.sumar(5, 3));     // 8
console.log(math.restar(10, 4));   // 6

// Desestructuración
const { sumar, multiplicar } = require('./math');
console.log(sumar(2, 3));          // 5

Exportación por Defecto en CommonJS

// logger.js
class Logger {
  log(message) {
    console.log(`[LOG]: ${message}`);
  }

  error(message) {
    console.error(`[ERROR]: ${message}`);
  }
}

// Exportar una sola cosa (similar a export default)
module.exports = Logger;

// O crear instancia directamente
module.exports = new Logger();

// app.js
const Logger = require('./logger');
const logger = new Logger();
logger.log('Aplicación iniciada');

// O si exportaste la instancia
const logger = require('./logger');
logger.log('Aplicación iniciada');

ES Modules (ESM)

El estándar moderno de JavaScript. Usa import y export.

// math.mjs - Exportando con ES Modules
export function sumar(a, b) {
  return a + b;
}

export function restar(a, b) {
  return a - b;
}

export function multiplicar(a, b) {
  return a * b;
}

// Export default (solo uno por archivo)
export default function dividir(a, b) {
  if (b === 0) throw new Error('División por cero');
  return a / b;
}

// app.mjs - Importando con ES Modules
import dividir, { sumar, restar } from './math.mjs';

console.log(sumar(5, 3));      // 8
console.log(dividir(10, 2));   // 5

// Importar todo
import * as math from './math.mjs';
console.log(math.sumar(5, 3)); // 8

// Renombrar imports
import { sumar as add, restar as subtract } from './math.mjs';
console.log(add(5, 3));        // 8

Habilitar ES Modules en Node.js

Opción 1: Usar extensión .mjs

// math.mjs
export const PI = 3.14159;

Opción 2: Configurar package.json

{
  "type": "module"
}

Ahora todos los archivos .js se tratan como ES Modules. Para usar CommonJS en este caso, usa .cjs:

// legacy.cjs
module.exports = { algo: 'valor' };

Diferencias Clave: CommonJS vs ES Modules

Característica	CommonJS	ES Modules
Sintaxis	`require()`/`module.exports`	`import`/`export`
Carga	Síncrona	Asíncrona
Momento	Runtime (durante ejecución)	Parse time (antes de ejecutar)
Dinámico	✅ `require(variable)`	❌ Rutas estáticas
Tree Shaking	❌	✅
Top-level await	❌	✅
`__dirname`	✅	❌ (necesita workaround)
Compatibilidad	Node.js desde siempre	Node.js 12+ estable

Carga Dinámica en ESM

// CommonJS - require dinámico
const moduleName = 'express';
const modulo = require(moduleName); // ✅ Funciona

// ES Modules - import dinámico
const moduleName = 'express';
const modulo = await import(moduleName); // ✅ Funciona (async)

// Ejemplo práctico
async function cargarModulo(nombre) {
  try {
    const modulo = await import(`./${nombre}.mjs`);
    return modulo;
  } catch (error) {
    console.error(`No se pudo cargar ${nombre}`);
  }
}

dirname y filename en ES Modules

// CommonJS - Disponible automáticamente
console.log(__dirname);  // /ruta/al/directorio
console.log(__filename); // /ruta/al/archivo.js

// ES Modules - Necesitas reconstruirlo
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

console.log(__dirname);  // /ruta/al/directorio
console.log(__filename); // /ruta/al/archivo.mjs

Interoperabilidad: Mezclar CJS y ESM

// En ES Modules, puedes importar CommonJS
import express from 'express'; // express usa CommonJS
import { Router } from 'express';

// En CommonJS, NO puedes hacer require de ES Modules
// Necesitas import() dinámico
async function cargarESM() {
  const modulo = await import('./mi-modulo.mjs');
  modulo.hacerAlgo();
}

¿Cuál Usar?

Usa CommonJS si:

Trabajas con código legacy
Necesitas compatibilidad con Node.js antiguo
Necesitas require() dinámico frecuentemente
La mayoría de tus dependencias son CommonJS

Usa ES Modules si:

Proyecto nuevo
Quieres el estándar moderno de JavaScript
Necesitas Tree Shaking (eliminar código no usado)
Quieres usar Top-level await
Compartes código con el frontend

Recomendación actual (2025): ES Modules para proyectos nuevos, CommonJS sigue siendo perfectamente válido.

Module Caching

Node.js cachea los módulos después de la primera carga. Esto significa que require() o import del mismo módulo retorna la misma instancia.

Cómo Funciona el Caché

// counter.js
let count = 0;

function increment() {
  count++;
  return count;
}

function getCount() {
  return count;
}

module.exports = { increment, getCount };

// app.js
const counter1 = require('./counter');
const counter2 = require('./counter');

console.log(counter1.increment()); // 1
console.log(counter2.increment()); // 2 (¡misma instancia!)

console.log(counter1 === counter2); // true

console.log(counter1.getCount());  // 2
console.log(counter2.getCount());  // 2

Explicación: Node.js cargó counter.js una sola vez. Ambas variables apuntan al mismo objeto.

Ubicación del Caché

// Ver módulos cacheados
console.log(require.cache);

// Salida:
// {
//   '/ruta/completa/app.js': Module { ... },
//   '/ruta/completa/counter.js': Module { ... },
//   ...
// }

Limpiar el Caché (Casos Especiales)

// counter.js
let count = 0;
module.exports = {
  increment: () => ++count,
  getCount: () => count
};

// app.js
const counter1 = require('./counter');
console.log(counter1.increment()); // 1

// Limpiar el caché
const counterPath = require.resolve('./counter');
delete require.cache[counterPath];

// Ahora se carga de nuevo
const counter2 = require('./counter');
console.log(counter2.increment()); // 1 (nueva instancia)

console.log(counter1 === counter2); // false

⚠️ Advertencia: Limpiar el caché manualmente es raro y puede causar problemas. Úsalo solo si realmente lo necesitas (ej: hot reloading en desarrollo).

Patrón Singleton con Módulos

El caché de módulos hace que sea trivial implementar Singletons:

// database.js
class Database {
  constructor() {
    console.log('Conectando a la base de datos...');
    this.connection = this.connect();
  }

  connect() {
    // Simulación de conexión
    return { connected: true };
  }

  query(sql) {
    console.log(`Ejecutando: ${sql}`);
  }
}

// Exportar una instancia única
module.exports = new Database();

// app.js
const db1 = require('./database'); // "Conectando a la base de datos..."
const db2 = require('./database'); // (no imprime nada)

console.log(db1 === db2); // true - misma instancia

db1.query('SELECT * FROM users');
db2.query('SELECT * FROM posts'); // usa la misma conexión

Comparación con Python

# Python también cachea módulos
import sys

# Primera importación
import mi_modulo  # Código se ejecuta

# Segunda importación
import mi_modulo  # Usa la versión cacheada

# Ver módulos cacheados
print(sys.modules)

# Recargar un módulo
import importlib
importlib.reload(mi_modulo)

El Archivo package.json

El package.json es el corazón de cualquier proyecto Node.js. Define metadatos, dependencias y scripts.

Crear un package.json

# Interactivo
npm init

# Con valores por defecto
npm init -y

Estructura Completa

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "description": "Descripción de mi proyecto",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js",
    "test": "jest",
    "build": "webpack --mode production",
    "lint": "eslint .",
    "format": "prettier --write ."
  },
  "keywords": ["api", "backend", "nodejs"],
  "author": "Tu Nombre <email@example.com>",
  "license": "MIT",
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.0"
  },
  "devDependencies": {
    "nodemon": "^3.0.0",
    "jest": "^29.5.0",
    "eslint": "^8.40.0"
  },
  "optionalDependencies": {
    "sharp": "^0.32.0"
  },
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

Campos Importantes

1. name y version

{
  "name": "mi-paquete",
  "version": "1.2.3"
}

Reglas para name:

Lowercase, sin espacios
Puede tener guiones y underscores
Debe ser único en npm (si vas a publicar)

Scoped packages:

{
  "name": "@mi-usuario/mi-paquete"
}

2. main y module

{
  "main": "index.js",      // Punto de entrada CommonJS
  "module": "index.mjs",   // Punto de entrada ES Modules
  "exports": {
    ".": {
      "import": "./index.mjs",
      "require": "./index.js"
    },
    "./utils": {
      "import": "./utils/index.mjs",
      "require": "./utils/index.js"
    }
  }
}

3. scripts

Los scripts más comunes:

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest --coverage",
    "test:watch": "jest --watch",
    "build": "tsc",
    "lint": "eslint src/**/*.js",
    "format": "prettier --write src/**/*.js",
    "prepare": "husky install",
    "prestart": "npm run build",
    "postinstall": "echo 'Instalación completada'"
  }
}

Ejecutar scripts:

npm run dev
npm test  # Atajo para npm run test
npm start # Atajo para npm run start

# Con argumentos
npm run test -- --watch
npm run lint -- --fix

Pre y Post Hooks:

{
  "scripts": {
    "pretest": "npm run lint",    // Se ejecuta ANTES de test
    "test": "jest",
    "posttest": "npm run coverage" // Se ejecuta DESPUÉS de test
  }
}

4. dependencies vs devDependencies

{
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.0",
    "dotenv": "^16.0.3"
  },
  "devDependencies": {
    "nodemon": "^3.0.0",
    "jest": "^29.5.0",
    "eslint": "^8.40.0",
    "typescript": "^5.0.0"
  }
}

dependencies:

Necesarios para ejecutar la aplicación en producción
Se instalan con npm install
Se incluyen cuando alguien instala tu paquete

devDependencies:

Solo necesarios durante el desarrollo
Herramientas de testing, linting, bundling
NO se instalan cuando alguien usa tu paquete
Se instalan con npm install (en tu proyecto)
Se omiten con npm install --production

# Instalar como dependencia
npm install express

# Instalar como devDependency
npm install -D jest

# Instalar solo dependencias de producción
npm install --production

5. engines

Especifica versiones de Node.js y npm requeridas:

{
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  }
}

Para forzar estas versiones:

{
  "engines": {
    "node": "18.x"
  },
  "engineStrict": true
}

O usa .nvmrc:

18.16.0

nvm use

6. optionalDependencies

Dependencias que pueden fallar al instalar sin romper todo:

{
  "optionalDependencies": {
    "sharp": "^0.32.0",  // Procesamiento de imágenes (dependencias nativas)
    "fsevents": "^2.3.2" // Solo necesario en macOS
  }
}

// Usar dependencias opcionales de forma segura
let sharp;
try {
  sharp = require('sharp');
} catch (error) {
  console.warn('sharp no disponible, usando alternativa');
  sharp = require('./fallback-image-processor');
}

7. peerDependencies

Para librerías que necesitan que el usuario instale otra dependencia:

{
  "name": "mi-plugin-react",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "peerDependenciesMeta": {
    "react-dom": {
      "optional": true
    }
  }
}

Esto dice: "Mi plugin funciona con React 18, pero el usuario debe instalarlo".

Gestores de Paquetes

npm (Node Package Manager)

El gestor de paquetes que viene con Node.js.

# Instalar dependencias
npm install              # Instala todo de package.json
npm install express      # Instala express y lo agrega
npm install -D jest      # Instala como devDependency
npm install express@4.17.1  # Versión específica

# Desinstalar
npm uninstall express

# Actualizar
npm update               # Actualiza todas las dependencias
npm update express       # Actualiza solo express
npm outdated            # Ver paquetes desactualizados

# Listar paquetes
npm list                # Árbol de dependencias
npm list --depth=0      # Solo dependencias directas

# Ejecutar scripts
npm run dev
npm start
npm test

# Limpiar caché
npm cache clean --force

# Ver información de un paquete
npm info express
npm view express versions  # Ver todas las versiones disponibles

Yarn

Alternativa a npm desarrollada por Facebook.

# Instalar Yarn
npm install -g yarn

# Comandos equivalentes
yarn                    # = npm install
yarn add express        # = npm install express
yarn add -D jest        # = npm install -D jest
yarn remove express     # = npm uninstall express
yarn upgrade            # = npm update

# Yarn específico
yarn why express        # Por qué está instalado express
yarn upgrade-interactive  # Actualizar interactivamente

Ventajas de Yarn:

Más rápido (caché mejor optimizado)
yarn.lock más determinista
Workspaces para monorepos
Plugin system

pnpm (Performant npm)

El gestor más eficiente en espacio en disco.

# Instalar pnpm
npm install -g pnpm

# Comandos equivalentes
pnpm install            # = npm install
pnpm add express        # = npm install express
pnpm add -D jest        # = npm install -D jest
pnpm remove express     # = npm uninstall express
pnpm update             # = npm update

# pnpm específico
pnpm store status       # Ver estado del store
pnpm store prune        # Limpiar store

Ventajas de pnpm:

Ahorra espacio: Usa hard links a un store central
Más rápido: Instalaciones paralelas eficientes
Más seguro: Estructura de node_modules más estricta
Monorepos: Excelente soporte para workspaces

Comparación

Proyecto A: express, lodash
Proyecto B: express, axios
Proyecto C: lodash, axios

┌─────────── npm/Yarn ──────────────┐
│ Proyecto A/node_modules/          │
│   ├── express/                    │
│   └── lodash/                     │
│                                   │
│ Proyecto B/node_modules/          │
│   ├── express/ (duplicado)        │
│   └── axios/                      │
│                                   │
│ Proyecto C/node_modules/          │
│   ├── lodash/ (duplicado)         │
│   └── axios/ (duplicado)          │
└───────────────────────────────────┘

┌─────────── pnpm ──────────────────┐
│ ~/.pnpm-store/                    │
│   ├── express@4.18.2/             │
│   ├── lodash@4.17.21/             │
│   └── axios@1.4.0/                │
│                                   │
│ Proyecto A/node_modules/ (links)  │
│ Proyecto B/node_modules/ (links)  │
│ Proyecto C/node_modules/ (links)  │
└───────────────────────────────────┘

¿Cuál Usar?

Gestor	Usar si...
npm	Proyecto simple, compatibilidad máxima
Yarn	Equipo grande, necesitas workspaces, velocidad
pnpm	Múltiples proyectos, quieres ahorrar espacio, monorepos

node_modules y resolución de dependencias

Estructura de node_modules

mi-proyecto/
├── node_modules/
│   ├── express/
│   │   ├── package.json
│   │   ├── index.js
│   │   └── node_modules/        <- Dependencias de express
│   │       ├── body-parser/
│   │       └── cookie-parser/
│   ├── lodash/
│   └── axios/
├── package.json
└── index.js

Algoritmo de Resolución de Módulos

Cuando haces require('express'), Node.js busca en este orden:

1. Core modules (módulos nativos)
   - Si 'express' fuera un módulo core, se usa directamente

2. node_modules en el directorio actual
   /home/user/proyecto/node_modules/express

3. node_modules en el directorio padre
   /home/user/node_modules/express

4. Continúa subiendo hasta la raíz
   /home/node_modules/express
   /node_modules/express

5. NODE_PATH (ruta de entorno)

6. Error: Cannot find module 'express'

Ejemplo visual:

/home/user/proyecto/src/controllers/user.js
                          ↓
         require('express')
                          ↓
    ¿Existe express core? NO
                          ↓
    /home/user/proyecto/src/controllers/node_modules/express? NO
                          ↓
    /home/user/proyecto/src/node_modules/express? NO
                          ↓
    /home/user/proyecto/node_modules/express? ✅ SÍ - USAR ESTE

Hoisting de Dependencias

npm y Yarn "aplanan" las dependencias cuando es posible:

Sin hoisting:

node_modules/
├── express/
│   └── node_modules/
│       ├── body-parser/
│       └── cookie-parser/
└── body-parser/  <- También lo usa otro paquete

Con hoisting:

node_modules/
├── express/
├── body-parser/      <- Compartido (subió al nivel superior)
└── cookie-parser/    <- Compartido

Conflictos de Versiones

Proyecto necesita:
- paquete-a@1.0.0 (requiere lodash@4.17.0)
- paquete-b@2.0.0 (requiere lodash@4.17.21)

Resultado:

node_modules/
├── lodash@4.17.21/          <- Versión más reciente en raíz
├── paquete-a/
│   └── node_modules/
│       └── lodash@4.17.0/   <- Versión específica anidada
└── paquete-b/               <- Usa lodash de raíz

require.resolve()

Útil para encontrar la ruta exacta de un módulo:

// Encontrar dónde está express
const expressPath = require.resolve('express');
console.log(expressPath);
// /home/user/proyecto/node_modules/express/index.js

// Encontrar un archivo específico dentro de un paquete
const bodyParserPath = require.resolve('body-parser/lib/types/json');
console.log(bodyParserPath);

// Útil para debugging
try {
  require.resolve('paquete-inexistente');
} catch (error) {
  console.error('El paquete no está instalado');
}

Semantic Versioning

npm usa Semantic Versioning (SemVer) para las versiones de paquetes.

Formato: MAJOR.MINOR.PATCH

     5  .  2  .  10
     │     │     │
   MAJOR MINOR PATCH

Reglas:

MAJOR (5): Cambios incompatibles (breaking changes)
MINOR (2): Nueva funcionalidad compatible hacia atrás
PATCH (10): Corrección de bugs compatible

Rangos de Versiones

{
  "dependencies": {
    "express": "4.18.2",       // Versión exacta
    "lodash": "^4.17.21",      // Compatible (recomendado)
    "axios": "~1.4.0",         // Solo patches
    "mongoose": "*",           // Cualquier versión (¡peligroso!)
    "dotenv": ">=16.0.0",      // Mayor o igual
    "cors": "<3.0.0",          // Menor que
    "helmet": "1.x",           // Cualquier 1.x.x
    "morgan": "1.2.x"          // Cualquier 1.2.x
  }
}

Operador Caret (^) - Recomendado

Permite cambios que no modifican el primer número diferente de cero.

^4.18.2  permite:  4.18.2 a < 5.0.0
^0.2.3   permite:  0.2.3 a < 0.3.0  (más restrictivo con 0.x)
^0.0.4   permite:  solo 0.0.4       (muy restrictivo con 0.0.x)

Ejemplos:

{
  "express": "^4.18.2"
}

Instalará:

✅ 4.18.3 (patch)
✅ 4.19.0 (minor)
✅ 4.20.5 (minor + patch)
❌ 5.0.0 (major)

Operador Tilde (~)

Permite solo cambios de PATCH.

~4.18.2  permite:  4.18.2 a < 4.19.0
~0.2.3   permite:  0.2.3 a < 0.3.0

Ejemplos:

{
  "axios": "~1.4.0"
}

Instalará:

✅ 1.4.1 (patch)
✅ 1.4.9 (patch)
❌ 1.5.0 (minor)
❌ 2.0.0 (major)

Pre-releases

1.0.0-alpha.1
1.0.0-beta.2
1.0.0-rc.1     (release candidate)
1.0.0          (stable)

# Instalar pre-release
npm install express@next
npm install lodash@5.0.0-beta.1

Comparación Visual

// package.json
{
  "lodash": "^4.17.21",
  "express": "~4.18.0",
  "mongoose": "7.0.0"
}

// npm install instalará:
{
  "lodash": "4.17.21",     // La última 4.x.x
  "express": "4.18.2",     // La última 4.18.x
  "mongoose": "7.0.0"      // Exactamente 7.0.0
}

Herramientas para Gestionar Versiones

# Ver versiones disponibles
npm view lodash versions --json

# Ver información del paquete
npm info lodash

# Ver dependencias desactualizadas
npm outdated

# Actualizar respetando rangos de package.json
npm update

# Instalar la última versión (ignora rangos)
npm install lodash@latest

Lock Files

Los lock files garantizan que todos los desarrolladores y el entorno de producción tengan exactamente las mismas versiones de dependencias.

package-lock.json (npm)

Se genera automáticamente cuando ejecutas npm install.

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "mi-proyecto",
      "version": "1.0.0",
      "dependencies": {
        "express": "^4.18.2"
      }
    },
    "node_modules/express": {
      "version": "4.18.2",
      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1"
      }
    }
  }
}

Características:

Especifica versiones exactas
Incluye checksums de integridad
Se debe versionar en git
Garantiza instalaciones reproducibles

yarn.lock (Yarn)

Similar pero con formato diferente:

express@^4.18.2:
  version "4.18.2"
  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe4f3f01554532c3aa1d3a9b5c5c2c3e8d1f5"
  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
  dependencies:
    accepts "~1.3.8"
    array-flatten "1.1.1"

pnpm-lock.yaml (pnpm)

lockfileVersion: 5.4

specifiers:
  express: ^4.18.2

dependencies:
  express: 4.18.2

packages:
  /express/4.18.2:
    resolution: {integrity: sha512-5/PsL6iGPdfQ/...}
    dependencies:
      accepts: 1.3.8
      array-flatten: 1.1.1

Buenas Prácticas con Lock Files

# ✅ SIEMPRE versiona el lock file
git add package-lock.json
git commit -m "Add package-lock.json"

# ✅ Usa npm ci en producción (más rápido y confiable)
npm ci  # En lugar de npm install

# ✅ Regenerar lock file si hay conflictos
rm package-lock.json node_modules
npm install

# ❌ NO edites el lock file manualmente
# ❌ NO agregues lock files al .gitignore

Seguridad y Auditorías

npm audit

npm incluye herramientas de seguridad integradas:

# Revisar vulnerabilidades
npm audit

# Salida de ejemplo:
# ┌───────────────┬──────────────────────────────────────────────────────────────┐
# │ High          │ Regular Expression Denial of Service                        │
# ├───────────────┼──────────────────────────────────────────────────────────────┤
# │ Package       │ semver                                                       │
# ├───────────────┼──────────────────────────────────────────────────────────────┤
# │ Patched in    │ >=7.5.2                                                      │
# ├───────────────┼──────────────────────────────────────────────────────────────┤
# │ Dependency of │ @angular/cli                                                 │
# └───────────────┴──────────────────────────────────────────────────────────────┘

# Intentar arreglar automáticamente
npm audit fix

# Arreglar incluso con breaking changes
npm audit fix --force

# Ver detalles en formato JSON
npm audit --json

Niveles de Severidad

Critical: Explotable remotamente, requiere acción inmediata
High: Difícil de explotar pero serio
Moderate: Requiere condiciones específicas
Low: Riesgo mínimo

Herramientas Adicionales de Seguridad

# Snyk - Herramienta comercial con plan gratuito
npm install -g snyk
snyk auth
snyk test
snyk monitor

# Retire.js - Detecta dependencias conocidas como vulnerables
npm install -g retire
retire

# audit-ci - Para pipelines de CI/CD
npm install -g audit-ci
audit-ci --moderate

Ejemplo de Política de Seguridad

// .auditrc
{
  "low": false,
  "moderate": true,
  "high": true,
  "critical": true,
  "report-type": "full"
}

Buenas Prácticas

Estructura de Proyecto

mi-proyecto/
├── package.json
├── package-lock.json
├── .nvmrc                    # Versión de Node.js
├── .gitignore
├── README.md
├── src/
│   ├── index.js
│   ├── routes/
│   ├── models/
│   └── utils/
├── tests/
├── docs/
└── scripts/
    ├── build.js
    └── deploy.js

package.json Optimizado

{
  "name": "mi-api",
  "version": "1.0.0",
  "description": "API REST para gestión de usuarios",
  "main": "src/index.js",
  "type": "module",
  "engines": {
    "node": ">=18.0.0",
    "npm": ">=9.0.0"
  },
  "scripts": {
    "start": "node src/index.js",
    "dev": "nodemon src/index.js",
    "test": "jest --coverage",
    "test:watch": "jest --watch",
    "lint": "eslint src/**/*.js",
    "lint:fix": "eslint src/**/*.js --fix",
    "format": "prettier --write src/**/*.js",
    "build": "node scripts/build.js",
    "prestart": "npm run lint",
    "postinstall": "npm audit",
    "security": "npm audit && snyk test"
  },
  "keywords": ["api", "rest", "nodejs", "express"],
  "author": "Tu Nombre <email@example.com>",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/usuario/mi-api.git"
  },
  "bugs": {
    "url": "https://github.com/usuario/mi-api/issues"
  },
  "homepage": "https://github.com/usuario/mi-api#readme",
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.0",
    "dotenv": "^16.0.3",
    "helmet": "^6.1.5",
    "cors": "^2.8.5"
  },
  "devDependencies": {
    "nodemon": "^2.0.22",
    "jest": "^29.5.0",
    "supertest": "^6.3.3",
    "eslint": "^8.40.0",
    "prettier": "^2.8.8",
    "@types/node": "^18.16.3"
  }
}

.gitignore Completo

# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Coverage directory used by tools like istanbul
coverage/
*.lcov

# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Build outputs
dist/
build/
*.tgz

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

Scripts Útiles

{
  "scripts": {
    "clean": "rm -rf node_modules package-lock.json && npm install",
    "outdated": "npm outdated",
    "update:patch": "npm update",
    "update:minor": "npx npm-check-updates -u -t minor",
    "update:major": "npx npm-check-updates -u",
    "size": "npm run build && bundlesize",
    "deps:check": "depcheck",
    "deps:unused": "depcheck --unused",
    "release": "standard-version",
    "docker:build": "docker build -t mi-app .",
    "docker:run": "docker run -p 3000:3000 mi-app"
  }
}

Herramientas de Desarrollo

# Analizar dependencias no utilizadas
npm install -g depcheck
depcheck

# Actualizar dependencias interactivamente
npm install -g npm-check-updates
ncu -i

# Ver tamaño de dependencias
npm install -g bundlesize
bundlesize

# Analizar el bundle
npm install -g webpack-bundle-analyzer

Variables de Entorno

// .env
NODE_ENV=development
PORT=3000
DB_URL=mongodb://localhost:27017/mi-app
JWT_SECRET=mi-secreto-super-seguro
LOG_LEVEL=debug

// src/config.js
import dotenv from 'dotenv';
dotenv.config();

export const config = {
  port: process.env.PORT || 3000,
  dbUrl: process.env.DB_URL,
  jwtSecret: process.env.JWT_SECRET,
  nodeEnv: process.env.NODE_ENV || 'development',
  logLevel: process.env.LOG_LEVEL || 'info'
};

// Validación de variables requeridas
const requiredVars = ['DB_URL', 'JWT_SECRET'];
for (const envVar of requiredVars) {
  if (!process.env[envVar]) {
    console.error(`Error: Variable de entorno ${envVar} es requerida`);
    process.exit(1);
  }
}

Cuestionario de Entrevista

Preguntas Fundamentales

1. ¿Cuál es la diferencia entre CommonJS y ES Modules?

Respuesta:

CommonJS: Sistema de módulos original de Node.js, usa require()/module.exports, carga síncrona
ES Modules: Estándar moderno de JavaScript, usa import/export, carga asíncrona
CommonJS se carga en runtime, ESM se analiza en parse-time
ESM permite tree-shaking, CommonJS no

2. ¿Cómo funciona el module caching en Node.js?

Respuesta:

Node.js cachea módulos después de la primera carga
require() del mismo módulo retorna la misma instancia
El caché se almacena en require.cache
Permite implementar singletons fácilmente
Se puede limpiar manualmente con delete require.cache[path]

3. ¿Qué es la diferencia entre dependencies y devDependencies?

Respuesta:

dependencies: Necesarias para ejecutar la aplicación en producción
devDependencies: Solo necesarias durante el desarrollo (testing, linting, bundling)
npm install --production omite devDependencies
Cuando alguien instala tu paquete como dependencia, solo se instalan las dependencies

4. ¿Qué significa ^4.18.2 en package.json?

Respuesta:

Operador caret permite actualizaciones compatibles
Permite versiones desde 4.18.2 hasta < 5.0.0
Solo permite cambios de MINOR y PATCH, no MAJOR
Sigue Semantic Versioning (MAJOR.MINOR.PATCH)

5. ¿Para qué sirve package-lock.json?

Respuesta:

Garantiza instalaciones reproducibles con versiones exactas
Incluye checksums de integridad para seguridad
Debe versionarse en git
npm ci usa el lock file para instalaciones más rápidas y confiables

Preguntas Avanzadas

6. ¿Cómo resuelve Node.js las dependencias cuando haces require('express')?

Respuesta:

Verifica si es un módulo core
Busca en node_modules del directorio actual
Busca en node_modules de directorios padre
Continúa hasta la raíz del sistema
Verifica NODE_PATH
Error si no encuentra

7. ¿Qué es hoisting de dependencias?

Respuesta:

npm y Yarn "aplanan" dependencias cuando es posible
Dependencias compartidas se mueven al nivel superior
Reduce duplicación y tamaño de node_modules
Puede causar problemas si el código depende de dependencias transitivas

8. ¿Cuál es la diferencia entre npm, Yarn y pnpm?

Respuesta:

npm: Gestor por defecto, compatible con todo
Yarn: Más rápido, mejor para monorepos, yarn.lock determinista
pnpm: Más eficiente en espacio (hard links), estructura más estricta

9. ¿Cómo manejarías una vulnerabilidad de seguridad en una dependencia?

Respuesta:

npm audit para identificar vulnerabilidades
npm audit fix para arreglos automáticos
Actualizar manualmente si es necesario
Considerar dependencias alternativas
Implementar políticas de seguridad en CI/CD

10. ¿Qué es un peer dependency?

Respuesta:

Dependencia que el usuario debe instalar
Común en plugins y librerías
Evita conflictos de versiones
Permite compartir dependencias entre paquetes
Se define en peerDependencies del package.json

Ejercicios Prácticos

Ejercicio 1: Crear un módulo que exporte múltiples funciones usando CommonJS y ES Modules.

Ejercicio 2: Implementar un sistema de caché personalizado aprovechando el module caching.

Ejercicio 3: Configurar un proyecto con scripts de npm para desarrollo, testing y producción.

Ejercicio 4: Resolver conflictos de versiones en un proyecto con múltiples dependencias.

Ejercicio 5: Implementar un workflow de CI/CD que incluya auditoría de seguridad.

Fundamentos del Runtime de Node.js

Pedro Alvarado — Fri, 03 Oct 2025 16:56:31 +0000

Tabla de Contenidos

¿Qué es Node.js?
Arquitectura del Runtime
El Event Loop
Call Stack, Callback Queue y Microtask Queue
Blocking vs Non-blocking
Manejo de Asincronía
libuv y el Thread Pool
Cuestionario de Entrevista

¿Qué es Node.js?

Node.js es un runtime de JavaScript construido sobre el motor V8 de Chrome. Esto significa que permite ejecutar código JavaScript fuera del navegador, específicamente en el servidor.

Comparación con Python y Ruby

// Node.js
console.log("Hello from Node.js");

# Python
print("Hello from Python")

# Ruby
puts "Hello from Ruby"

Diferencia fundamental:

Python/Ruby: Lenguajes interpretados con runtimes single-threaded por defecto (aunque Python tiene threading/multiprocessing y Ruby tiene threads)
Node.js: Runtime single-threaded con arquitectura asíncrona no bloqueante basada en eventos

Analogía: El Restaurante

Imagina tres restaurantes diferentes:

Restaurante Python/Ruby (Modelo Síncrono):

Un mesero atiende una mesa a la vez
Toma el pedido, espera en la cocina hasta que esté listo, sirve, cobra
Solo entonces atiende la siguiente mesa
Para atender más clientes: contratas más meseros (threads/processes)

Restaurante Node.js (Modelo Asíncrono):

Un mesero (single thread) atiende muchas mesas
Toma pedidos de múltiples mesas
Delega a la cocina (operaciones I/O)
Mientras la cocina trabaja, sigue tomando más pedidos
Cuando un plato está listo (evento), lo entrega
Puede atender cientos de mesas sin contratar más meseros

Arquitectura del Runtime

Node.js está compuesto por varias capas:

┌─────────────────────────────────────┐
│    JavaScript (Tu Código)           │
├─────────────────────────────────────┤
│    Node.js APIs (fs, http, etc)     │
├─────────────────────────────────────┤
│    Node.js Bindings (C++)           │
├─────────────────────────────────────┤
│    V8 Engine          │   libuv     │
│  (JavaScript VM)      │  (Async I/O)│
└─────────────────────────────────────┘

Componentes Clave

1. V8 Engine:

Motor de JavaScript de Google (escrito en C++)
Compila JavaScript a código máquina
Maneja la memoria (garbage collection)
Ejecuta el código JavaScript

2. libuv:

Biblioteca escrita en C
Proporciona el Event Loop
Maneja operaciones asíncronas (I/O)
Implementa el Thread Pool
Abstrae diferencias entre sistemas operativos

3. Node.js Bindings:

Conecta JavaScript con C++
Permite que tu código JS use funcionalidades del sistema operativo

4. Node.js APIs:

fs (file system)
http/https
crypto
stream
etc.

El Event Loop

El Event Loop es el corazón de Node.js. Es el mecanismo que permite que Node.js realice operaciones no bloqueantes a pesar de que JavaScript es single-threaded.

¿Cómo Funciona?

El Event Loop es un ciclo infinito que ejecuta código, recopila y procesa eventos, y ejecuta subtareas en cola.

// Ejemplo conceptual del Event Loop
while (hayTareasPendientes) {
  ejecutarFasesDelEventLoop();

  if (hayEventosPendientes) {
    procesarEventos();
  }
}

Las 6 Fases del Event Loop

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

1. Timers (Temporizadores)

Ejecuta callbacks de setTimeout() y setInterval() cuyo tiempo ha expirado.

setTimeout(() => {
  console.log('Timer ejecutado después de 1000ms');
}, 1000);

Importante: El tiempo especificado es el tiempo mínimo de espera, no garantiza ejecución exacta.

2. Pending Callbacks

Ejecuta callbacks de I/O diferidos de la iteración anterior (errores de TCP, etc).

3. Idle, Prepare

Fase interna de Node.js. No escribes código que se ejecute aquí.

4. Poll (Encuesta)

La fase más importante. Aquí Node.js:

Recupera nuevos eventos I/O
Ejecuta callbacks relacionados con I/O
Puede bloquear esperando eventos si no hay nada más que hacer

const fs = require('fs');

// Este callback se ejecuta en la fase Poll
fs.readFile('/archivo.txt', (err, data) => {
  console.log('Archivo leído');
});

5. Check (Verificación)

Ejecuta callbacks de setImmediate().

setImmediate(() => {
  console.log('Ejecutado en fase Check');
});

6. Close Callbacks

Ejecuta callbacks de cierre (ej: socket.on('close', ...)).

const server = require('http').createServer();

server.on('close', () => {
  console.log('Servidor cerrado');
});

Ejemplo Completo del Event Loop

const fs = require('fs');

console.log('1. Inicio del programa');

// Fase: Timers
setTimeout(() => {
  console.log('2. setTimeout 0ms');
}, 0);

// Fase: Check
setImmediate(() => {
  console.log('3. setImmediate');
});

// Fase: Poll
fs.readFile(__filename, () => {
  console.log('4. readFile callback');

  // Dentro de un callback de I/O:
  setTimeout(() => {
    console.log('5. setTimeout dentro de readFile');
  }, 0);

  setImmediate(() => {
    console.log('6. setImmediate dentro de readFile');
  });
});

console.log('7. Fin del programa');

// Salida:
// 1. Inicio del programa
// 7. Fin del programa
// 2. setTimeout 0ms
// 3. setImmediate
// 4. readFile callback
// 6. setImmediate dentro de readFile
// 5. setTimeout dentro de readFile

¿Por qué este orden?

El código síncrono se ejecuta primero (1, 7)
En la siguiente iteración del Event Loop:
- setTimeout(0) se ejecuta en fase Timers (2)
- setImmediate se ejecuta en fase Check (3)
readFile completa en fase Poll (4)
Dentro de un callback de I/O, setImmediate tiene prioridad sobre setTimeout (6, 5)

Call Stack, Callback Queue y Microtask Queue

Call Stack (Pila de Llamadas)

El Call Stack es donde JavaScript rastrea la ejecución de funciones.

function tercera() {
  console.log('Tercera función');
}

function segunda() {
  tercera();
}

function primera() {
  segunda();
}

primera();

// Call Stack durante la ejecución:
// │ tercera() │  <- Cima (se ejecuta ahora)
// │ segunda() │
// │ primera() │
// │ main()    │  <- Base
// └───────────┘

Características:

LIFO (Last In, First Out)
Single-threaded: una sola pila
Stack overflow cuando hay demasiadas llamadas anidadas

// Ejemplo de Stack Overflow
function recursiva() {
  recursiva(); // Llamada infinita
}

recursiva(); // RangeError: Maximum call stack size exceeded

Callback Queue (Cola de Callbacks)

También llamada Task Queue o Macrotask Queue. Almacena callbacks listos para ejecutarse.

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

console.log('3');

// Salida:
// 1
// 3
// 2

¿Por qué "2" se ejecuta al final?

console.log('1') se ejecuta inmediatamente
setTimeout registra el callback en la Cola
console.log('3') se ejecuta inmediatamente
El Call Stack queda vacío
El Event Loop toma el callback de la Cola y lo ejecuta

Microtask Queue (Cola de Microtareas)

Las microtareas tienen mayor prioridad que los callbacks normales.

Microtareas incluyen:

Promises (.then(), .catch(), .finally())
process.nextTick() (Node.js específico - mayor prioridad aún)
queueMicrotask()
MutationObserver (en navegadores)

console.log('1. Script inicio');

setTimeout(() => {
  console.log('2. setTimeout (Macrotask)');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('3. Promise 1 (Microtask)');
  })
  .then(() => {
    console.log('4. Promise 2 (Microtask)');
  });

console.log('5. Script fin');

// Salida:
// 1. Script inicio
// 5. Script fin
// 3. Promise 1 (Microtask)
// 4. Promise 2 (Microtask)
// 2. setTimeout (Macrotask)

El Orden Completo de Ejecución

console.log('1. Sincrónico 1');

setTimeout(() => {
  console.log('2. setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('3. Promise');
});

process.nextTick(() => {
  console.log('4. nextTick');
});

console.log('5. Sincrónico 2');

// Salida:
// 1. Sincrónico 1
// 5. Sincrónico 2
// 4. nextTick        <- Mayor prioridad
// 3. Promise         <- Microtask
// 2. setTimeout      <- Macrotask

Regla de oro:

Código sincrónico
process.nextTick()
Microtasks (Promises)
Macrotasks (setTimeout, setImmediate, I/O)

Diagrama Completo

┌─────────────────────────────────────────┐
│         JavaScript Call Stack           │
│  (Ejecuta código sincrónico)            │
└─────────────┬───────────────────────────┘
              │
              ↓ (Stack vacío?)
┌─────────────────────────────────────────┐
│     process.nextTick Queue              │
│  (Se ejecuta ANTES de microtasks)       │
└─────────────┬───────────────────────────┘
              │
              ↓ (Vacío?)
┌─────────────────────────────────────────┐
│         Microtask Queue                 │
│  (Promises, queueMicrotask)             │
└─────────────┬───────────────────────────┘
              │
              ↓ (Vacío?)
┌─────────────────────────────────────────┐
│         Macrotask Queue                 │
│  (setTimeout, setImmediate, I/O)        │
└─────────────────────────────────────────┘

Blocking vs Non-blocking

Operaciones Bloqueantes (Blocking)

Bloquean el Event Loop hasta que completan.

const fs = require('fs');

console.log('Antes de leer');

// BLOQUEANTE - Bloquea el Event Loop
const data = fs.readFileSync('archivo.txt', 'utf8');
console.log(data);

console.log('Después de leer');

// Ejecución:
// 1. "Antes de leer"
// 2. [ESPERA hasta que el archivo se lea completamente]
// 3. Contenido del archivo
// 4. "Después de leer"

Problemas:

El servidor no puede atender otras peticiones mientras espera
Si 1000 usuarios hacen peticiones, se formaría una cola

Operaciones No Bloqueantes (Non-blocking)

Delegan el trabajo y continúan ejecutando.

const fs = require('fs');

console.log('Antes de leer');

// NO BLOQUEANTE - Continúa inmediatamente
fs.readFile('archivo.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

console.log('Después de leer');

// Ejecución:
// 1. "Antes de leer"
// 2. "Después de leer"
// 3. [Cuando el archivo esté listo] Contenido del archivo

Comparación con Python

Python (Blocking por defecto):

import time

print("Inicio")

# Bloquea el thread durante 2 segundos
time.sleep(2)

print("Fin")

# Salida:
# Inicio
# [espera 2 segundos]
# Fin

Python con asyncio (Non-blocking):

import asyncio

async def main():
    print("Inicio")

    # No bloquea, permite que otras tareas se ejecuten
    await asyncio.sleep(2)

    print("Fin")

asyncio.run(main())

Node.js (Non-blocking por defecto):

console.log("Inicio");

// No bloquea
setTimeout(() => {
  console.log("Fin");
}, 2000);

console.log("Continúa");

// Salida:
// Inicio
// Continúa
// [después de 2 segundos]
// Fin

¿Cuándo Usar Cada Uno?

Operaciones Síncronas (Bloqueantes):

✅ Al inicio de la aplicación (cargar configuración)
✅ Scripts simples que no necesitan concurrencia
✅ Cuando el orden es crítico y no hay alternativa
❌ Durante el manejo de peticiones HTTP

Operaciones Asíncronas (No Bloqueantes):

✅ Operaciones I/O (archivos, bases de datos, red)
✅ Servidores web
✅ Cualquier operación que tome tiempo
✅ Cuando necesitas manejar múltiples operaciones concurrentes

Manejo de Asincronía

Node.js ha evolucionado en cómo maneja la asincronía:

1. Callbacks (El Patrón Original)

const fs = require('fs');

// Patrón Error-First Callback
fs.readFile('archivo1.txt', 'utf8', (err, data1) => {
  if (err) {
    console.error('Error leyendo archivo1:', err);
    return;
  }

  console.log('Archivo 1:', data1);

  // Callback anidado (Callback Hell)
  fs.readFile('archivo2.txt', 'utf8', (err, data2) => {
    if (err) {
      console.error('Error leyendo archivo2:', err);
      return;
    }

    console.log('Archivo 2:', data2);

    // Más anidación...
    fs.readFile('archivo3.txt', 'utf8', (err, data3) => {
      if (err) {
        console.error('Error leyendo archivo3:', err);
        return;
      }

      console.log('Archivo 3:', data3);
    });
  });
});

Problemas:

Callback Hell (Pirámide de la perdición)
Difícil de leer y mantener
Manejo de errores repetitivo

2. Promises (ES6)

Las Promises representan un valor que puede estar disponible ahora, en el futuro, o nunca.

const fs = require('fs').promises;

// Encadenamiento de Promises
fs.readFile('archivo1.txt', 'utf8')
  .then(data1 => {
    console.log('Archivo 1:', data1);
    return fs.readFile('archivo2.txt', 'utf8');
  })
  .then(data2 => {
    console.log('Archivo 2:', data2);
    return fs.readFile('archivo3.txt', 'utf8');
  })
  .then(data3 => {
    console.log('Archivo 3:', data3);
  })
  .catch(err => {
    console.error('Error:', err);
  });

Estados de una Promise

// PENDING (Pendiente)
const promise = new Promise((resolve, reject) => {
  // Haciendo algo asíncrono...
});

// FULFILLED (Cumplida)
const fulfilled = Promise.resolve('Éxito');

// REJECTED (Rechazada)
const rejected = Promise.reject(new Error('Falló'));

Creando Promises

function leerArchivoPromise(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) {
        reject(err); // Promise rechazada
      } else {
        resolve(data); // Promise cumplida
      }
    });
  });
}

// Uso
leerArchivoPromise('archivo.txt')
  .then(data => console.log(data))
  .catch(err => console.error(err));

Promise.all() - Paralelismo

const fs = require('fs').promises;

// Leer múltiples archivos en paralelo
Promise.all([
  fs.readFile('archivo1.txt', 'utf8'),
  fs.readFile('archivo2.txt', 'utf8'),
  fs.readFile('archivo3.txt', 'utf8')
])
.then(([data1, data2, data3]) => {
  console.log('Todos leídos:', data1, data2, data3);
})
.catch(err => {
  console.error('Al menos uno falló:', err);
});

Otros Métodos Útiles

// Promise.race() - La primera que complete
Promise.race([
  fetch('https://api1.com/data'),
  fetch('https://api2.com/data')
])
.then(response => console.log('La más rápida respondió'));

// Promise.allSettled() - Espera todas sin importar el resultado
Promise.allSettled([
  Promise.resolve('Éxito 1'),
  Promise.reject('Error 1'),
  Promise.resolve('Éxito 2')
])
.then(results => {
  // results = [
  //   { status: 'fulfilled', value: 'Éxito 1' },
  //   { status: 'rejected', reason: 'Error 1' },
  //   { status: 'fulfilled', value: 'Éxito 2' }
  // ]
});

// Promise.any() - La primera que tenga éxito
Promise.any([
  Promise.reject('Error 1'),
  Promise.resolve('Éxito 1'),
  Promise.resolve('Éxito 2')
])
.then(result => console.log(result)); // 'Éxito 1'

3. Async/Await (ES2017)

Azúcar sintáctico sobre Promises que hace el código asíncrono parecer síncrono.

const fs = require('fs').promises;

async function leerArchivos() {
  try {
    const data1 = await fs.readFile('archivo1.txt', 'utf8');
    console.log('Archivo 1:', data1);

    const data2 = await fs.readFile('archivo2.txt', 'utf8');
    console.log('Archivo 2:', data2);

    const data3 = await fs.readFile('archivo3.txt', 'utf8');
    console.log('Archivo 3:', data3);

    return 'Todos leídos exitosamente';
  } catch (err) {
    console.error('Error:', err);
    throw err;
  }
}

leerArchivos()
  .then(resultado => console.log(resultado))
  .catch(err => console.error('Error final:', err));

Reglas de Async/Await

async siempre retorna una Promise

async function ejemplo() {
  return 'Hola'; // Equivale a: return Promise.resolve('Hola')
}

ejemplo().then(console.log); // 'Hola'

await solo funciona dentro de funciones async

// ❌ Error
function normal() {
  await algo(); // SyntaxError
}

// ✅ Correcto
async function asincrona() {
  await algo();
}

await pausa la ejecución de la función (no del programa)

async function ejemplo() {
  console.log('Antes');
  await delay(1000);
  console.log('Después'); // Se ejecuta 1 segundo después
}

console.log('Inicio');
ejemplo();
console.log('Fin');

// Salida:
// Inicio
// Antes
// Fin
// [después de 1 segundo]
// Después

Paralelismo con Async/Await

// ❌ SECUENCIAL (Lento - suma los tiempos)
async function secuencial() {
  const data1 = await fs.readFile('archivo1.txt', 'utf8'); // 100ms
  const data2 = await fs.readFile('archivo2.txt', 'utf8'); // 100ms
  const data3 = await fs.readFile('archivo3.txt', 'utf8'); // 100ms
  // Total: ~300ms
}

// ✅ PARALELO (Rápido - tiempo del más lento)
async function paralelo() {
  const [data1, data2, data3] = await Promise.all([
    fs.readFile('archivo1.txt', 'utf8'), // 100ms
    fs.readFile('archivo2.txt', 'utf8'), // 100ms
    fs.readFile('archivo3.txt', 'utf8')  // 100ms
  ]);
  // Total: ~100ms
}

Top-Level Await (ES2022)

// Archivo: main.mjs (requiere .mjs o "type": "module" en package.json)

// Antes tenías que envolver en una función async
// async function main() {
//   const data = await fetch('...');
// }
// main();

// Ahora puedes usar await directamente
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

Comparación: Callbacks vs Promises vs Async/Await

// 1. CALLBACKS
function obtenerUsuarioCallback(id, callback) {
  obtenerDeDatabaseCallback(id, (err, usuario) => {
    if (err) return callback(err);

    obtenerPostsCallback(usuario.id, (err, posts) => {
      if (err) return callback(err);

      obtenerComentariosCallback(posts[0].id, (err, comentarios) => {
        if (err) return callback(err);
        callback(null, { usuario, posts, comentarios });
      });
    });
  });
}

// 2. PROMISES
function obtenerUsuarioPromise(id) {
  return obtenerDeDatabasePromise(id)
    .then(usuario => {
      return obtenerPostsPromise(usuario.id)
        .then(posts => {
          return obtenerComentariosPromise(posts[0].id)
            .then(comentarios => {
              return { usuario, posts, comentarios };
            });
        });
    });
}

// 3. ASYNC/AWAIT (Más legible)
async function obtenerUsuarioAsync(id) {
  const usuario = await obtenerDeDatabase(id);
  const posts = await obtenerPosts(usuario.id);
  const comentarios = await obtenerComentarios(posts[0].id);
  return { usuario, posts, comentarios };
}

Manejo de Errores Avanzado

async function manejoErrores() {
  try {
    const resultado = await operacionPeligrosa();
    return resultado;
  } catch (error) {
    // Manejo específico por tipo de error
    if (error.code === 'ENOENT') {
      console.error('Archivo no encontrado');
    } else if (error.code === 'EACCES') {
      console.error('Permiso denegado');
    } else {
      console.error('Error desconocido:', error);
    }
    throw error; // Re-lanzar si es necesario
  } finally {
    // Se ejecuta siempre, haya error o no
    console.log('Limpieza');
  }
}

libuv y el Thread Pool

¿Qué es libuv?

libuv es una biblioteca multi-plataforma escrita en C que proporciona:

El Event Loop
Operaciones asíncronas de I/O
Thread Pool para operaciones que no pueden ser asíncronas
Timers
Señales de proceso
Y más...

El Thread Pool

Aunque Node.js es single-threaded para JavaScript, libuv utiliza un thread pool para operaciones que el sistema operativo no puede hacer de forma asíncrona.

Tamaño por defecto: 4 threads

// Ver el tamaño del thread pool
console.log(process.env.UV_THREADPOOL_SIZE); // undefined = 4 por defecto

// Cambiarlo (debe hacerse antes de cualquier operación que lo use)
process.env.UV_THREADPOOL_SIZE = 8;

Operaciones que Usan el Thread Pool

File System (fs) - Todas las operaciones excepto fs.watch()
DNS lookups - dns.lookup()
Crypto - Operaciones criptográficas pesadas
Zlib - Compresión/descompresión

const crypto = require('crypto');
const fs = require('fs');

// Estas operaciones usan el thread pool
crypto.pbkdf2('password', 'salt', 100000, 512, 'sha512', (err, key) => {
  console.log('Crypto completado');
});

fs.readFile('archivo.txt', (err, data) => {
  console.log('Archivo leído');
});

Operaciones Verdaderamente Asíncronas (No usan Thread Pool)

Estas usan las capacidades asíncronas del sistema operativo:

Networking (TCP/UDP)
HTTP requests
Timers (setTimeout, setInterval)

const http = require('http');

// No usa thread pool - usa epoll/kqueue del sistema operativo
http.get('http://example.com', (res) => {
  console.log('Respuesta recibida');
});

Ejemplo: Impacto del Thread Pool

const crypto = require('crypto');

const inicio = Date.now();

// Ejecutar 8 operaciones pesadas
for (let i = 0; i < 8; i++) {
  crypto.pbkdf2('password', 'salt', 100000, 512, 'sha512', () => {
    console.log(`${i + 1}: ${Date.now() - inicio}ms`);
  });
}

// Con UV_THREADPOOL_SIZE=4 (default):
// 1: 523ms
// 2: 524ms
// 3: 525ms
// 4: 526ms
// 5: 1045ms  <- Segunda tanda
// 6: 1046ms
// 7: 1047ms
// 8: 1048ms

// Con UV_THREADPOOL_SIZE=8:
// 1-8: todos ~520ms (todas en paralelo)

Arquitectura Completa

Tu Código JavaScript
        ↓
    Node.js APIs
        ↓
    ┌───────────────────────┐
    │    Event Loop         │
    │    (libuv)            │
    └───────┬───────────────┘
            │
    ┌───────┴───────────────┐
    │                       │
    ↓                       ↓
Operaciones                Thread Pool
Asíncronas Nativas         (libuv)
(epoll/kqueue)             4 threads default
- Network I/O              - File I/O
- Timers

Fundamentos del Runtime de Node.js

Pedro Alvarado — Fri, 03 Oct 2025 16:56:31 +0000

Tabla de Contenidos

¿Qué es Node.js?
Arquitectura del Runtime
El Event Loop
Call Stack, Callback Queue y Microtask Queue
Blocking vs Non-blocking
Manejo de Asincronía
libuv y el Thread Pool
Cuestionario de Entrevista

¿Qué es Node.js?

Node.js es un runtime de JavaScript construido sobre el motor V8 de Chrome. Esto significa que permite ejecutar código JavaScript fuera del navegador, específicamente en el servidor.

Comparación con Python y Ruby

// Node.js
console.log("Hello from Node.js");

# Python
print("Hello from Python")

# Ruby
puts "Hello from Ruby"

Diferencia fundamental:

Python/Ruby: Lenguajes interpretados con runtimes single-threaded por defecto (aunque Python tiene threading/multiprocessing y Ruby tiene threads)
Node.js: Runtime single-threaded con arquitectura asíncrona no bloqueante basada en eventos

Analogía: El Restaurante

Imagina tres restaurantes diferentes:

Restaurante Python/Ruby (Modelo Síncrono):

Un mesero atiende una mesa a la vez
Toma el pedido, espera en la cocina hasta que esté listo, sirve, cobra
Solo entonces atiende la siguiente mesa
Para atender más clientes: contratas más meseros (threads/processes)

Restaurante Node.js (Modelo Asíncrono):

Un mesero (single thread) atiende muchas mesas
Toma pedidos de múltiples mesas
Delega a la cocina (operaciones I/O)
Mientras la cocina trabaja, sigue tomando más pedidos
Cuando un plato está listo (evento), lo entrega
Puede atender cientos de mesas sin contratar más meseros

Arquitectura del Runtime

Node.js está compuesto por varias capas:

┌─────────────────────────────────────┐
│    JavaScript (Tu Código)           │
├─────────────────────────────────────┤
│    Node.js APIs (fs, http, etc)     │
├─────────────────────────────────────┤
│    Node.js Bindings (C++)           │
├─────────────────────────────────────┤
│    V8 Engine          │   libuv     │
│  (JavaScript VM)      │  (Async I/O)│
└─────────────────────────────────────┘

Componentes Clave

1. V8 Engine:

Motor de JavaScript de Google (escrito en C++)
Compila JavaScript a código máquina
Maneja la memoria (garbage collection)
Ejecuta el código JavaScript

2. libuv:

Biblioteca escrita en C
Proporciona el Event Loop
Maneja operaciones asíncronas (I/O)
Implementa el Thread Pool
Abstrae diferencias entre sistemas operativos

3. Node.js Bindings:

Conecta JavaScript con C++
Permite que tu código JS use funcionalidades del sistema operativo

4. Node.js APIs:

fs (file system)
http/https
crypto
stream
etc.

El Event Loop

El Event Loop es el corazón de Node.js. Es el mecanismo que permite que Node.js realice operaciones no bloqueantes a pesar de que JavaScript es single-threaded.

¿Cómo Funciona?

El Event Loop es un ciclo infinito que ejecuta código, recopila y procesa eventos, y ejecuta subtareas en cola.

// Ejemplo conceptual del Event Loop
while (hayTareasPendientes) {
  ejecutarFasesDelEventLoop();

  if (hayEventosPendientes) {
    procesarEventos();
  }
}

Las 6 Fases del Event Loop

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

1. Timers (Temporizadores)

Ejecuta callbacks de setTimeout() y setInterval() cuyo tiempo ha expirado.

setTimeout(() => {
  console.log('Timer ejecutado después de 1000ms');
}, 1000);

Importante: El tiempo especificado es el tiempo mínimo de espera, no garantiza ejecución exacta.

2. Pending Callbacks

Ejecuta callbacks de I/O diferidos de la iteración anterior (errores de TCP, etc).

3. Idle, Prepare

Fase interna de Node.js. No escribes código que se ejecute aquí.

4. Poll (Encuesta)

La fase más importante. Aquí Node.js:

Recupera nuevos eventos I/O
Ejecuta callbacks relacionados con I/O
Puede bloquear esperando eventos si no hay nada más que hacer

const fs = require('fs');

// Este callback se ejecuta en la fase Poll
fs.readFile('/archivo.txt', (err, data) => {
  console.log('Archivo leído');
});

5. Check (Verificación)

Ejecuta callbacks de setImmediate().

setImmediate(() => {
  console.log('Ejecutado en fase Check');
});

6. Close Callbacks

Ejecuta callbacks de cierre (ej: socket.on('close', ...)).

const server = require('http').createServer();

server.on('close', () => {
  console.log('Servidor cerrado');
});

Ejemplo Completo del Event Loop

const fs = require('fs');

console.log('1. Inicio del programa');

// Fase: Timers
setTimeout(() => {
  console.log('2. setTimeout 0ms');
}, 0);

// Fase: Check
setImmediate(() => {
  console.log('3. setImmediate');
});

// Fase: Poll
fs.readFile(__filename, () => {
  console.log('4. readFile callback');

  // Dentro de un callback de I/O:
  setTimeout(() => {
    console.log('5. setTimeout dentro de readFile');
  }, 0);

  setImmediate(() => {
    console.log('6. setImmediate dentro de readFile');
  });
});

console.log('7. Fin del programa');

// Salida:
// 1. Inicio del programa
// 7. Fin del programa
// 2. setTimeout 0ms
// 3. setImmediate
// 4. readFile callback
// 6. setImmediate dentro de readFile
// 5. setTimeout dentro de readFile

¿Por qué este orden?

El código síncrono se ejecuta primero (1, 7)
En la siguiente iteración del Event Loop:
- setTimeout(0) se ejecuta en fase Timers (2)
- setImmediate se ejecuta en fase Check (3)
readFile completa en fase Poll (4)
Dentro de un callback de I/O, setImmediate tiene prioridad sobre setTimeout (6, 5)

Call Stack, Callback Queue y Microtask Queue

Call Stack (Pila de Llamadas)

El Call Stack es donde JavaScript rastrea la ejecución de funciones.

function tercera() {
  console.log('Tercera función');
}

function segunda() {
  tercera();
}

function primera() {
  segunda();
}

primera();

// Call Stack durante la ejecución:
// │ tercera() │  <- Cima (se ejecuta ahora)
// │ segunda() │
// │ primera() │
// │ main()    │  <- Base
// └───────────┘

Características:

LIFO (Last In, First Out)
Single-threaded: una sola pila
Stack overflow cuando hay demasiadas llamadas anidadas

// Ejemplo de Stack Overflow
function recursiva() {
  recursiva(); // Llamada infinita
}

recursiva(); // RangeError: Maximum call stack size exceeded

Callback Queue (Cola de Callbacks)

También llamada Task Queue o Macrotask Queue. Almacena callbacks listos para ejecutarse.

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

console.log('3');

// Salida:
// 1
// 3
// 2

¿Por qué "2" se ejecuta al final?

console.log('1') se ejecuta inmediatamente
setTimeout registra el callback en la Cola
console.log('3') se ejecuta inmediatamente
El Call Stack queda vacío
El Event Loop toma el callback de la Cola y lo ejecuta

Microtask Queue (Cola de Microtareas)

Las microtareas tienen mayor prioridad que los callbacks normales.

Microtareas incluyen:

Promises (.then(), .catch(), .finally())
process.nextTick() (Node.js específico - mayor prioridad aún)
queueMicrotask()
MutationObserver (en navegadores)

console.log('1. Script inicio');

setTimeout(() => {
  console.log('2. setTimeout (Macrotask)');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('3. Promise 1 (Microtask)');
  })
  .then(() => {
    console.log('4. Promise 2 (Microtask)');
  });

console.log('5. Script fin');

// Salida:
// 1. Script inicio
// 5. Script fin
// 3. Promise 1 (Microtask)
// 4. Promise 2 (Microtask)
// 2. setTimeout (Macrotask)

El Orden Completo de Ejecución

console.log('1. Sincrónico 1');

setTimeout(() => {
  console.log('2. setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('3. Promise');
});

process.nextTick(() => {
  console.log('4. nextTick');
});

console.log('5. Sincrónico 2');

// Salida:
// 1. Sincrónico 1
// 5. Sincrónico 2
// 4. nextTick        <- Mayor prioridad
// 3. Promise         <- Microtask
// 2. setTimeout      <- Macrotask

Regla de oro:

Código sincrónico
process.nextTick()
Microtasks (Promises)
Macrotasks (setTimeout, setImmediate, I/O)

Diagrama Completo

┌─────────────────────────────────────────┐
│         JavaScript Call Stack           │
│  (Ejecuta código sincrónico)            │
└─────────────┬───────────────────────────┘
              │
              ↓ (Stack vacío?)
┌─────────────────────────────────────────┐
│     process.nextTick Queue              │
│  (Se ejecuta ANTES de microtasks)       │
└─────────────┬───────────────────────────┘
              │
              ↓ (Vacío?)
┌─────────────────────────────────────────┐
│         Microtask Queue                 │
│  (Promises, queueMicrotask)             │
└─────────────┬───────────────────────────┘
              │
              ↓ (Vacío?)
┌─────────────────────────────────────────┐
│         Macrotask Queue                 │
│  (setTimeout, setImmediate, I/O)        │
└─────────────────────────────────────────┘

Blocking vs Non-blocking

Operaciones Bloqueantes (Blocking)

Bloquean el Event Loop hasta que completan.

const fs = require('fs');

console.log('Antes de leer');

// BLOQUEANTE - Bloquea el Event Loop
const data = fs.readFileSync('archivo.txt', 'utf8');
console.log(data);

console.log('Después de leer');

// Ejecución:
// 1. "Antes de leer"
// 2. [ESPERA hasta que el archivo se lea completamente]
// 3. Contenido del archivo
// 4. "Después de leer"

Problemas:

El servidor no puede atender otras peticiones mientras espera
Si 1000 usuarios hacen peticiones, se formaría una cola

Operaciones No Bloqueantes (Non-blocking)

Delegan el trabajo y continúan ejecutando.

const fs = require('fs');

console.log('Antes de leer');

// NO BLOQUEANTE - Continúa inmediatamente
fs.readFile('archivo.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data);
});

console.log('Después de leer');

// Ejecución:
// 1. "Antes de leer"
// 2. "Después de leer"
// 3. [Cuando el archivo esté listo] Contenido del archivo

Comparación con Python

Python (Blocking por defecto):

import time

print("Inicio")

# Bloquea el thread durante 2 segundos
time.sleep(2)

print("Fin")

# Salida:
# Inicio
# [espera 2 segundos]
# Fin

Python con asyncio (Non-blocking):

import asyncio

async def main():
    print("Inicio")

    # No bloquea, permite que otras tareas se ejecuten
    await asyncio.sleep(2)

    print("Fin")

asyncio.run(main())

Node.js (Non-blocking por defecto):

console.log("Inicio");

// No bloquea
setTimeout(() => {
  console.log("Fin");
}, 2000);

console.log("Continúa");

// Salida:
// Inicio
// Continúa
// [después de 2 segundos]
// Fin

¿Cuándo Usar Cada Uno?

Operaciones Síncronas (Bloqueantes):

✅ Al inicio de la aplicación (cargar configuración)
✅ Scripts simples que no necesitan concurrencia
✅ Cuando el orden es crítico y no hay alternativa
❌ Durante el manejo de peticiones HTTP

Operaciones Asíncronas (No Bloqueantes):

✅ Operaciones I/O (archivos, bases de datos, red)
✅ Servidores web
✅ Cualquier operación que tome tiempo
✅ Cuando necesitas manejar múltiples operaciones concurrentes

Manejo de Asincronía

Node.js ha evolucionado en cómo maneja la asincronía:

1. Callbacks (El Patrón Original)

const fs = require('fs');

// Patrón Error-First Callback
fs.readFile('archivo1.txt', 'utf8', (err, data1) => {
  if (err) {
    console.error('Error leyendo archivo1:', err);
    return;
  }

  console.log('Archivo 1:', data1);

  // Callback anidado (Callback Hell)
  fs.readFile('archivo2.txt', 'utf8', (err, data2) => {
    if (err) {
      console.error('Error leyendo archivo2:', err);
      return;
    }

    console.log('Archivo 2:', data2);

    // Más anidación...
    fs.readFile('archivo3.txt', 'utf8', (err, data3) => {
      if (err) {
        console.error('Error leyendo archivo3:', err);
        return;
      }

      console.log('Archivo 3:', data3);
    });
  });
});

Problemas:

Callback Hell (Pirámide de la perdición)
Difícil de leer y mantener
Manejo de errores repetitivo

2. Promises (ES6)

Las Promises representan un valor que puede estar disponible ahora, en el futuro, o nunca.

const fs = require('fs').promises;

// Encadenamiento de Promises
fs.readFile('archivo1.txt', 'utf8')
  .then(data1 => {
    console.log('Archivo 1:', data1);
    return fs.readFile('archivo2.txt', 'utf8');
  })
  .then(data2 => {
    console.log('Archivo 2:', data2);
    return fs.readFile('archivo3.txt', 'utf8');
  })
  .then(data3 => {
    console.log('Archivo 3:', data3);
  })
  .catch(err => {
    console.error('Error:', err);
  });

Estados de una Promise

// PENDING (Pendiente)
const promise = new Promise((resolve, reject) => {
  // Haciendo algo asíncrono...
});

// FULFILLED (Cumplida)
const fulfilled = Promise.resolve('Éxito');

// REJECTED (Rechazada)
const rejected = Promise.reject(new Error('Falló'));

Creando Promises

function leerArchivoPromise(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) {
        reject(err); // Promise rechazada
      } else {
        resolve(data); // Promise cumplida
      }
    });
  });
}

// Uso
leerArchivoPromise('archivo.txt')
  .then(data => console.log(data))
  .catch(err => console.error(err));

Promise.all() - Paralelismo

const fs = require('fs').promises;

// Leer múltiples archivos en paralelo
Promise.all([
  fs.readFile('archivo1.txt', 'utf8'),
  fs.readFile('archivo2.txt', 'utf8'),
  fs.readFile('archivo3.txt', 'utf8')
])
.then(([data1, data2, data3]) => {
  console.log('Todos leídos:', data1, data2, data3);
})
.catch(err => {
  console.error('Al menos uno falló:', err);
});

Otros Métodos Útiles

// Promise.race() - La primera que complete
Promise.race([
  fetch('https://api1.com/data'),
  fetch('https://api2.com/data')
])
.then(response => console.log('La más rápida respondió'));

// Promise.allSettled() - Espera todas sin importar el resultado
Promise.allSettled([
  Promise.resolve('Éxito 1'),
  Promise.reject('Error 1'),
  Promise.resolve('Éxito 2')
])
.then(results => {
  // results = [
  //   { status: 'fulfilled', value: 'Éxito 1' },
  //   { status: 'rejected', reason: 'Error 1' },
  //   { status: 'fulfilled', value: 'Éxito 2' }
  // ]
});

// Promise.any() - La primera que tenga éxito
Promise.any([
  Promise.reject('Error 1'),
  Promise.resolve('Éxito 1'),
  Promise.resolve('Éxito 2')
])
.then(result => console.log(result)); // 'Éxito 1'

3. Async/Await (ES2017)

Azúcar sintáctico sobre Promises que hace el código asíncrono parecer síncrono.

const fs = require('fs').promises;

async function leerArchivos() {
  try {
    const data1 = await fs.readFile('archivo1.txt', 'utf8');
    console.log('Archivo 1:', data1);

    const data2 = await fs.readFile('archivo2.txt', 'utf8');
    console.log('Archivo 2:', data2);

    const data3 = await fs.readFile('archivo3.txt', 'utf8');
    console.log('Archivo 3:', data3);

    return 'Todos leídos exitosamente';
  } catch (err) {
    console.error('Error:', err);
    throw err;
  }
}

leerArchivos()
  .then(resultado => console.log(resultado))
  .catch(err => console.error('Error final:', err));

Reglas de Async/Await

async siempre retorna una Promise

async function ejemplo() {
  return 'Hola'; // Equivale a: return Promise.resolve('Hola')
}

ejemplo().then(console.log); // 'Hola'

await solo funciona dentro de funciones async

// ❌ Error
function normal() {
  await algo(); // SyntaxError
}

// ✅ Correcto
async function asincrona() {
  await algo();
}

await pausa la ejecución de la función (no del programa)

async function ejemplo() {
  console.log('Antes');
  await delay(1000);
  console.log('Después'); // Se ejecuta 1 segundo después
}

console.log('Inicio');
ejemplo();
console.log('Fin');

// Salida:
// Inicio
// Antes
// Fin
// [después de 1 segundo]
// Después

Paralelismo con Async/Await

// ❌ SECUENCIAL (Lento - suma los tiempos)
async function secuencial() {
  const data1 = await fs.readFile('archivo1.txt', 'utf8'); // 100ms
  const data2 = await fs.readFile('archivo2.txt', 'utf8'); // 100ms
  const data3 = await fs.readFile('archivo3.txt', 'utf8'); // 100ms
  // Total: ~300ms
}

// ✅ PARALELO (Rápido - tiempo del más lento)
async function paralelo() {
  const [data1, data2, data3] = await Promise.all([
    fs.readFile('archivo1.txt', 'utf8'), // 100ms
    fs.readFile('archivo2.txt', 'utf8'), // 100ms
    fs.readFile('archivo3.txt', 'utf8')  // 100ms
  ]);
  // Total: ~100ms
}

Top-Level Await (ES2022)

// Archivo: main.mjs (requiere .mjs o "type": "module" en package.json)

// Antes tenías que envolver en una función async
// async function main() {
//   const data = await fetch('...');
// }
// main();

// Ahora puedes usar await directamente
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);

Comparación: Callbacks vs Promises vs Async/Await

// 1. CALLBACKS
function obtenerUsuarioCallback(id, callback) {
  obtenerDeDatabaseCallback(id, (err, usuario) => {
    if (err) return callback(err);

    obtenerPostsCallback(usuario.id, (err, posts) => {
      if (err) return callback(err);

      obtenerComentariosCallback(posts[0].id, (err, comentarios) => {
        if (err) return callback(err);
        callback(null, { usuario, posts, comentarios });
      });
    });
  });
}

// 2. PROMISES
function obtenerUsuarioPromise(id) {
  return obtenerDeDatabasePromise(id)
    .then(usuario => {
      return obtenerPostsPromise(usuario.id)
        .then(posts => {
          return obtenerComentariosPromise(posts[0].id)
            .then(comentarios => {
              return { usuario, posts, comentarios };
            });
        });
    });
}

// 3. ASYNC/AWAIT (Más legible)
async function obtenerUsuarioAsync(id) {
  const usuario = await obtenerDeDatabase(id);
  const posts = await obtenerPosts(usuario.id);
  const comentarios = await obtenerComentarios(posts[0].id);
  return { usuario, posts, comentarios };
}

Manejo de Errores Avanzado

async function manejoErrores() {
  try {
    const resultado = await operacionPeligrosa();
    return resultado;
  } catch (error) {
    // Manejo específico por tipo de error
    if (error.code === 'ENOENT') {
      console.error('Archivo no encontrado');
    } else if (error.code === 'EACCES') {
      console.error('Permiso denegado');
    } else {
      console.error('Error desconocido:', error);
    }
    throw error; // Re-lanzar si es necesario
  } finally {
    // Se ejecuta siempre, haya error o no
    console.log('Limpieza');
  }
}

libuv y el Thread Pool

¿Qué es libuv?

libuv es una biblioteca multi-plataforma escrita en C que proporciona:

El Event Loop
Operaciones asíncronas de I/O
Thread Pool para operaciones que no pueden ser asíncronas
Timers
Señales de proceso
Y más...

El Thread Pool

Aunque Node.js es single-threaded para JavaScript, libuv utiliza un thread pool para operaciones que el sistema operativo no puede hacer de forma asíncrona.

Tamaño por defecto: 4 threads

// Ver el tamaño del thread pool
console.log(process.env.UV_THREADPOOL_SIZE); // undefined = 4 por defecto

// Cambiarlo (debe hacerse antes de cualquier operación que lo use)
process.env.UV_THREADPOOL_SIZE = 8;

Operaciones que Usan el Thread Pool

File System (fs) - Todas las operaciones excepto fs.watch()
DNS lookups - dns.lookup()
Crypto - Operaciones criptográficas pesadas
Zlib - Compresión/descompresión

const crypto = require('crypto');
const fs = require('fs');

// Estas operaciones usan el thread pool
crypto.pbkdf2('password', 'salt', 100000, 512, 'sha512', (err, key) => {
  console.log('Crypto completado');
});

fs.readFile('archivo.txt', (err, data) => {
  console.log('Archivo leído');
});

Operaciones Verdaderamente Asíncronas (No usan Thread Pool)

Estas usan las capacidades asíncronas del sistema operativo:

Networking (TCP/UDP)
HTTP requests
Timers (setTimeout, setInterval)

const http = require('http');

// No usa thread pool - usa epoll/kqueue del sistema operativo
http.get('http://example.com', (res) => {
  console.log('Respuesta recibida');
});

Ejemplo: Impacto del Thread Pool

const crypto = require('crypto');

const inicio = Date.now();

// Ejecutar 8 operaciones pesadas
for (let i = 0; i < 8; i++) {
  crypto.pbkdf2('password', 'salt', 100000, 512, 'sha512', () => {
    console.log(`${i + 1}: ${Date.now() - inicio}ms`);
  });
}

// Con UV_THREADPOOL_SIZE=4 (default):
// 1: 523ms
// 2: 524ms
// 3: 525ms
// 4: 526ms
// 5: 1045ms  <- Segunda tanda
// 6: 1046ms
// 7: 1047ms
// 8: 1048ms

// Con UV_THREADPOOL_SIZE=8:
// 1-8: todos ~520ms (todas en paralelo)

Arquitectura Completa

Tu Código JavaScript
        ↓
    Node.js APIs
        ↓
    ┌───────────────────────┐
    │    Event Loop         │
    │    (libuv)            │
    └───────┬───────────────┘
            │
    ┌───────┴───────────────┐
    │                       │
    ↓                       ↓
Operaciones                Thread Pool
Asíncronas Nativas         (libuv)
(epoll/kqueue)             4 threads default
- Network I/O              - File I/O
- Timers

🔹 Errores comunes y soluciones (8/8)

Pedro Alvarado — Fri, 12 Sep 2025 15:44:40 +0000

📋 Tabla de contenidos

Esta sección resume los problemas más frecuentes que encontrarás al trabajar con Hooks, muchos de los cuales son la causa raíz de bugs difíciles de rastrear.

1. Romper las reglas de los hooks

React es estricto con estas dos reglas por una razón fundamental: React depende del orden en que se llaman los Hooks para asociar el estado y otros datos con la fibra del componente correcto.

❌ No llames Hooks dentro de bucles, condicionales o funciones anidadas.
❌ No llames Hooks desde funciones JavaScript normales. (Solo desde componentes de React o Custom Hooks).

// MAL ❌
if (condicion) {
  // El orden de llamada cambia, React se pierde.
  const [valor, setValor] = useState(0);
}

Consecuencia: Errores crípticos, estado que se mezcla entre diferentes hooks, y comportamiento impredecible.
Solución: Llama siempre a los hooks en el nivel superior de tu componente. Si necesitas lógica condicional, ponla dentro del hook.

// BIEN ✅
useEffect(() => {
  if (condicion) {
    // La lógica condicional está *dentro* del hook.
    // El hook en sí se llama incondicionalmente.
  }
}, [condicion]);

2. El estado "viejo" (Stale State) por closures

Este es el concepto más difícil pero más importante de entender. Cuando un componente se renderiza, "captura" los valores de las props y el estado de ese render específico en sus funciones (closures).

// PROBLEMA 😬
function Contador() {
  const [count, setCount] = useState(0);

  const mostrarAlerta = () => {
    // Esta función "recuerda" el valor de `count`
    // del render en que fue creada.
    alert('El contador es ' + count);
  };

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={mostrarAlerta}>Mostrar Alerta</button>
    </div>
  );
}

Si haces clic en "+1" varias veces y luego en "Mostrar Alerta", la alerta mostrará el valor de count que existía cuando se renderizó el botón, no el valor actual.

Solución 1: La Actualización Funcional
Si el nuevo estado depende del anterior, usa la forma funcional de setState. React te garantiza que siempre recibirás la versión más reciente del estado.

// Ideal para eventos o intervalos
setCount(prevCount => prevCount + 1);

Solución 2: El Array de Dependencias
Para useEffect y useCallback, asegúrate de que todas las variables externas que usas estén en el array de dependencias. Esto garantiza que la función se "refresque" con los nuevos valores cuando cambien.

3. El infame array de dependencias

Omitir dependencias: Causa "stale state" porque el hook usa una versión vieja de una función o variable. El linter de React (eslint-plugin-react-hooks) es tu mejor amigo para detectar esto. ¡No lo ignores!
Dependencias que cambian demasiado: Si incluyes un objeto o una función que se redefine en cada render, el efecto se ejecutará constantemente.
- Solución: Para funciones, usa useCallback. Para objetos, usa useMemo. Para dependencias de setState de un useState, puedes omitirlas, ya que React garantiza que son estables.

4. Abuso de la optimización

No envuelvas todo en useMemo y useCallback por defecto.

Coste: Estos hooks no son gratuitos. Añaden complejidad y consumen memoria.
Cuándo usarlos:
1. Cuando pasas props a un componente hijo envuelto en React.memo.
2. Para cálculos realmente pesados que están ralentizando tu componente.
3. Para estabilizar una dependencia de otro hook (como useEffect).

Regla de oro: No optimices hasta que midas. Usa el Profiler de las React DevTools para encontrar cuellos de botella reales.

Recursos adicionales

Para seguir profundizando, estos son los mejores lugares a los que puedes acudir.

Documentación Oficial de React (en español)
- Introducción a los Hooks: La fuente de la verdad. Siempre actualizada y con excelentes explicaciones.
- Reglas de los Hooks: Lectura obligatoria.
Artículos y Guías Visuales
- A Complete Guide to useEffect (por Dan Abramov): Aunque en inglés, es la mejor explicación que existe sobre useEffect y su modelo mental.
- Visualizing React Rendering: Ayuda a entender por qué y cuándo se re-renderizan los componentes.
Herramientas
- React DevTools Profiler: Una extensión para el navegador indispensable para encontrar problemas de rendimiento y entender qué está causando los re-renderizados.
- ESLint Plugin for React Hooks: Viene incluido por defecto en Create React App. Te avisará de errores comunes, especialmente con los arrays de dependencias.

¡Feliz codeo! 🚀

🔹 Custom Hooks – Reusar lógica (7/8)

Pedro Alvarado — Fri, 12 Sep 2025 15:43:58 +0000

📋 Tabla de contenidos

useState – El fundamento del estado
useEffect – Efectos secundarios y ciclo de vida
useContext – Compartir estado sin props
useReducer – Lógica de Estado Compleja y predecible
useRef – Referencias, Almacenamiento y Escape
useMemo y useCallback – Optimizando el Rendimiento
Custom Hooks – Creando Lógica Reutilizable
Errores Comunes y Soluciones

¿Qué son y por qué son tan potentes?

Los Custom Hooks (Hooks Personalizados) son la característica más poderosa de los Hooks. Te permiten extraer y reutilizar lógica con estado de un componente. No son un hook nuevo de React, sino una convención: una función JavaScript que sigue dos reglas:

Su nombre debe empezar con use (ej. useFetch, useLocalStorage).
Puede llamar a otros hooks (como useState, useEffect, etc.).

Piensa en ellos como piezas de Lego lógicas. ¿Necesitas saber si el usuario está online? useOnlineStatus. ¿Quieres interactuar con el Local Storage? useLocalStorage. ¿Necesitas hacer fetching de datos en varios sitios? useFetch.

Creando nuestro primer Custom Hook: `useFetch`

El fetching de datos es un caso de uso perfecto. Casi siempre necesitas manejar el estado de carga, los posibles errores y los datos resultantes. Vamos a encapsular toda esa lógica en un hook reutilizable.

El código del hook useFetch.js:

// hooks/useFetch.js
import { useState, useEffect } from 'react';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Si la URL no es válida, no hacemos nada.
    if (!url) return;

    // Usamos AbortController para cancelar el fetch si el componente
    // se desmonta o la URL cambia antes de que termine.
    const controller = new AbortController();

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) {
          throw new Error(`Error: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        // Solo cambiamos loading a false si no fue un aborto
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // Función de limpieza: aborta el fetch si es necesario.
    return () => {
      controller.abort();
    };
  }, [url]); // Se vuelve a ejecutar si la URL cambia

  // El hook devuelve un objeto con el estado del fetch
  return { data, loading, error };
}

Usando `useFetch` en un componente

Ahora, consumir esta lógica compleja se vuelve trivialmente simple.

// components/GitHubUser.js
import React, { useState } from 'react';
import { useFetch } from '../hooks/useFetch';

function GitHubUser() {
  const [username, setUsername] = useState('facebook');
  const [input, setInput] = useState('facebook');

  // ¡Toda la lógica de fetch encapsulada en una sola línea!
  const { data, loading, error } = useFetch(`https://api.github.com/users/${username}`);

  const handleSubmit = (e) => {
    e.preventDefault();
    setUsername(input);
  }

  return (
    <div>
      <h3>Buscador de Usuarios de GitHub</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Introduce un usuario de GitHub"
        />
        <button type="submit">Buscar</button>
      </form>

      {loading && <p>Cargando...</p>}
      {error && <p>Error: {error}</p>}
      {data && (
        <div>
          <h4>{data.name} (@{data.login})</h4>
          <img src={data.avatar_url} alt={data.name} width="100" />
          <p>{data.bio}</p>
        </div>
      )}
    </div>
  );
}

Como puedes ver, el componente GitHubUser no sabe nada sobre useState o useEffect. Solo le interesa el resultado final: data, loading y error. Esto hace que el código sea increíblemente limpio, declarativo y fácil de mantener.

✅ Buenas practicas y patrones comunes

Nombres que empiezan con use: Es obligatorio. Esta convención permite a React y a las herramientas de linting saber que tu función es un hook y que debe seguir las reglas de los hooks.
Devuelve un array o un objeto: Si tu hook devuelve múltiples valores, devuélvelos en un objeto { valor1, valor2 } para que el consumo sea más legible. Si es un hook muy genérico y que emula a uno nativo (como useState), puedes devolver un array [valor, actualizador].
Hazlos genéricos y configurables: Un buen custom hook acepta parámetros para modificar su comportamiento. En useFetch, podría aceptar un objeto de opciones para el fetch.
No rompas las reglas de los hooks: Dentro de tu custom hook, sigue aplicando las mismas reglas: no los llames en bucles, condicionales o funciones anidadas.

🚨 Errores comunes y cómo evitarlos

Error: Olvidar el prefijo use.
- Solución: Nombra siempre tus hooks personalizados como useMiHook. Si no, React no podrá verificar que estás siguiendo las reglas de los hooks.
Error: Compartir estado entre componentes.
- Aclaración: Es un error conceptual pensar que un custom hook comparte el mismo estado entre diferentes componentes que lo usan. Cada llamada a un custom hook es completamente independiente y tiene su propio estado interno. Si quieres compartir estado, necesitas useContext o una librería de estado global.

🚀 Retos prácticos

useLocalStorage: Crea un hook que se sincronice con localStorage. Debe funcionar de manera similar a useState, pero persistiendo el valor en el navegador.
```
// Uso esperado:
const [name, setName] = useLocalStorage('username', 'Invitado');
```
useOnlineStatus: Crea un hook que devuelva true si el navegador está conectado a internet y false si no. (Pista: window.addEventListener('online', ...) y window.addEventListener('offline', ...)).
useDebounce: Un hook muy útil. Toma un valor (ej. el texto de un input) y devuelve una versión "retrasada" de ese valor que solo se actualiza después de un cierto tiempo sin cambios. Es perfecto para evitar hacer peticiones a una API en cada pulsación de tecla.
```
// Uso esperado:
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDebounce(searchTerm, 500); // 500ms de retraso
// Usa `debouncedSearchTerm` en tu `useFetch`
```

Ejemplo Práctico: useLocalStorage

Este hook personalizado nos permite manejar localStorage de forma reactiva:

💡 Tip: Puedes modificar el código en el editor de la izquierda y ver los cambios en tiempo real.

🔹`useMemo` y `useCallback` – Optimización de rendimiento (6/8)

Pedro Alvarado — Fri, 12 Sep 2025 15:42:42 +0000

📋 Tabla de contenidos

useState – El fundamento del estado
useEffect – Efectos secundarios y ciclo de vida
useContext – Compartir estado sin props
useReducer – Lógica de Estado Compleja y predecible
useRef – Referencias, Almacenamiento y Escape
useMemo y useCallback – Optimizando el Rendimiento
Custom Hooks – Creando Lógica Reutilizable
Errores Comunes y Soluciones

El problema: re-renderizados innecesarios y la igualdad referencial

Antes de entender la solución, es crucial entender el problema. En JavaScript, los objetos y las funciones son iguales por referencia, no por valor.

// A pesar de tener el mismo "valor", son dos objetos diferentes en memoria.
{} === {} // false

// Lo mismo ocurre con las funciones.
(() => {}) === (() => {}) // false

En React, cada vez que un componente se re-renderiza, las funciones y objetos declarados dentro de él se crean de nuevo. Esto significa que sus referencias cambian en cada render.

¿Por qué es un problema? Si pasas una de estas funciones u objetos como prop a un componente hijo optimizado con React.memo, el hijo se re-renderizará de todas formas, porque desde su perspectiva, la prop (onSomething) ha cambiado.

Aquí es donde entran useMemo y useCallback. Son herramientas para decir a React: "No vuelvas a crear esto a menos que sus dependencias cambien".

`useMemo`: Memorizando valores calculados

useMemo "memoriza" (cachea) el resultado de un cálculo costoso. La función que le pasas solo se volverá a ejecutar si una de las dependencias ha cambiado.

Úsalo para:

Cálculos computacionalmente caros (ej. filtrar, ordenar o transformar grandes listas).
Evitar que se creen nuevos objetos/arrays en cada render si se pasan como props a componentes optimizados.

Sintaxis:

const valorMemorizado = useMemo(() => calcularValorCostoso(a, b), [a, b]);

`useCallback`: Memorizando funciones

useCallback es muy similar, pero en lugar de memorizar el resultado de una función, memoriza la propia definición de la función.

Úsalo para:

Evitar re-renderizados en componentes hijos optimizados (React.memo) que reciben funciones como props.
Como dependencia estable en otros hooks como useEffect.

Sintaxis:

const funcionMemorizada = useCallback(() => {
  hacerAlgo(a, b);
}, [a, b]);

Es conceptualmente equivalente a: useMemo(() => () => { hacerAlgo(a, b); }, [a, b]).

Ejemplo práctico detallado: lista filtrable optimizada

Imagina una lista de usuarios que puedes filtrar. El filtrado puede ser lento si la lista es grande. Además, cada item de la lista tiene un botón para eliminarlo.

Componente UserItem (Optimizado)

import React from 'react';

// React.memo evita que este componente se re-renderice si sus props no cambian.
const UserItem = React.memo(({ user, onDelete }) => {
  console.log(`Renderizando UserItem para: ${user.name}`);
  return (
    <li>
      {user.name}
      <button onClick={() => onDelete(user.id)}>Eliminar</button>
    </li>
  );
});

Componente Principal UserList

import React, { useState, useMemo, useCallback } from 'react';

const initialUsers = [
  { id: 1, name: 'Ana' },
  { id: 2, name: 'Carlos' },
  { id: 3, name: 'Beatriz' },
  { id: 4, name: 'Daniel' },
];

function UserList() {
  const [users, setUsers] = useState(initialUsers);
  const [filter, setFilter] = useState('');
  const [theme, setTheme] = useState('light'); // Estado extra para forzar re-renders

  // 1. Optimizando el cálculo del filtrado con `useMemo`
  // Esta función solo se re-ejecutará si `users` o `filter` cambian,
  // no cuando `theme` cambie.
  const filteredUsers = useMemo(() => {
    console.log('Filtrando usuarios...');
    return users.filter(user =>
      user.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [users, filter]);

  // 2. Optimizando la función de borrado con `useCallback`
  // `handleDelete` mantiene la misma referencia mientras `users` no cambie.
  // Esto evita que todos los `UserItem` se re-rendericen cuando cambiamos el tema o el filtro.
  const handleDelete = useCallback((userId) => {
    setUsers(prevUsers => prevUsers.filter(user => user.id !== userId));
  }, []); // Dependencia vacía porque usamos la actualización funcional de `setUsers`

  return (
    <div style={{ background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Cambiar Tema
      </button>
      <hr />
      <input
        type="text"
        placeholder="Filtrar usuarios..."
        value={filter}
        onChange={e => setFilter(e.target.value)}
      />
      <ul>
        {filteredUsers.map(user => (
          <UserItem key={user.id} user={user} onDelete={handleDelete} />
        ))}
      </ul>
    </div>
  );
}

✅ Buenas practicas y patrones comunes

NO optimices prematuramente: useMemo y useCallback tienen un coste. Usarlos en todos lados puede hacer tu aplicación más lenta. Aplícalos solo cuando hayas identificado un problema de rendimiento real (puedes usar el Profiler de React DevTools).
React.memo es tu mejor amigo: useCallback por sí solo no hace nada si el componente que recibe la función no está envuelto en React.memo (o PureComponent).
Dependencias, dependencias, dependencias: El array de dependencias es la clave. Asegúrate de incluir todos los valores del scope del componente que se usan dentro de la función memorizada. El linter de React te ayudará con esto.

🚨 Errores comunes y cómo evitarlos

Error: Usar useMemo para memorizar componentes.
- Solución: Para memorizar un componente, envuélvelo en React.memo. useMemo es para valores, no para JSX.
Error: Olvidar el array de dependencias.
- Solución: Si omites el array, la función se recalculará en cada render, haciendo la optimización inútil. Si quieres que se calcule solo una vez, usa [].

Error: Pasar una función creada en el cuerpo del componente a las dependencias de useEffect.

// MAL ❌
function MiComponente() {
  const fetchData = () => { /* ... */ };
  useEffect(() => {
    fetchData();
  }, [fetchData]); // `fetchData` es nueva en cada render -> bucle infinito
}

Solución: Define la función dentro del useEffect si solo se usa ahí, o envuélvela en useCallback si se usa en varios sitios.

// BIEN ✅
const fetchData = useCallback(() => { /* ... */ }, []);
useEffect(() => {
  fetchData();
}, [fetchData]);

🚀 Retos prácticos

Cálculo de Factorial: Crea un componente con un input numérico. Calcula y muestra el factorial de ese número. El cálculo debe estar memorizado con useMemo. Añade otro estado (como un toggle de tema) para verificar que el factorial no se recalcula innecesariamente.
Lista de Hijos con React.memo: Crea un componente padre que renderiza una lista de 100 componentes hijos. Pasa una función onPress al hijo. Comprueba con un console.log cuántos hijos se re-renderizan cuando el padre cambia su estado. Luego, optimiza con useCallback y React.memo y comprueba la diferencia.
Gráfico SVG Complejo: Simula un componente que renderiza un gráfico SVG (que puede ser costoso). Las coordenadas del gráfico se calculan a partir de un array de datos. Usa useMemo para memorizar las coordenadas calculadas y evitar re-calcularlas si otras props del componente cambian.

🔹`useRef` – Referencias y valores persistentes (5/8)

Pedro Alvarado — Fri, 12 Sep 2025 15:41:24 +0000

📋 Tabla de contenidos

useState – El fundamento del estado
useEffect – Efectos secundarios y ciclo de vida
useContext – Compartir estado sin props
useReducer – Lógica de Estado Compleja y predecible
useRef – Referencias, Almacenamiento y Escape
useMemo y useCallback – Optimizando el Rendimiento
Custom Hooks – Creando Lógica Reutilizable
Errores Comunes y Soluciones

¿Qué es y para qué sirve?

useRef es un hook versátil con dos casos de uso principales que, aunque parezcan diferentes, se basan en el mismo principio: proporcionar un objeto mutable (.current) que persiste durante todo el ciclo de vida del componente sin causar re-renderizados cuando cambia.

Acceder a elementos del DOM: Es la "salida de emergencia" para interactuar directamente con un elemento del DOM, por ejemplo, para manejar el foco, medir su tamaño o integrar librerías de terceros (como D3.js).
Guardar "variables de instancia": Te permite mantener un valor mutable que no necesita disparar una nueva renderización. Es como tener una variable de instancia en un componente de clase. Perfecto para guardar IDs de timers, contadores internos, o cualquier valor que necesites que sobreviva entre renders.

Sintaxis y características clave

const miRef = useRef(valorInicial);

useRef devuelve un objeto con una única propiedad: current.
miRef.current se inicializa con valorInicial.
Puedes cambiar miRef.current directamente: miRef.current = nuevoValor.
Importante: Cambiar miRef.current NO dispara un re-renderizado.

Ejemplo práctico detallado: input con foco y contador de renders

Este ejemplo muestra ambos usos de useRef: uno para el DOM y otro para una variable persistente.

import React, { useState, useEffect, useRef } from 'react';

function FocusCounter() {
  const [inputValue, setInputValue] = useState('');

  // Caso de uso 1: Referencia al DOM
  const inputRef = useRef(null);

  // Caso de uso 2: Variable persistente
  const renderCount = useRef(0);

  useEffect(() => {
    // Se ejecuta después de cada render
    renderCount.current = renderCount.current + 1;
  });

  const handleFocus = () => {
    // Accedemos al elemento del DOM directamente
    inputRef.current.focus();
  };

  return (
    <div>
      <h3>Ejemplo de useRef</h3>
      <input
        ref={inputRef} // Conectamos la ref al elemento input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Escribe algo..."
      />
      <button onClick={handleFocus}>Poner Foco en el Input</button>

      <p>El valor del input es: "{inputValue}"</p>
      <p>Este componente se ha renderizado {renderCount.current} veces.</p>
      <p>(Nota: el contador de renders no causa re-renders por sí mismo)</p>
    </div>
  );
}

En este ejemplo:

inputRef nos da acceso directo al <input>, permitiéndonos llamar a .focus().
renderCount lleva la cuenta de las renderizaciones. Si usáramos useState para esto, cada actualización del contador causaría otro render, creando un bucle infinito. Con useRef, podemos actualizar el valor sin efectos secundarios.

✅ Buenas practicas y patrones comunes

Cuándo usar useRef vs useState:
- Usa useState si el cambio en el valor debe ser visible en la UI.
- Usa useRef si necesitas que un valor persista entre renders pero no quieres que su cambio dispare una nueva renderización.

Guardar el valor previo de props o estado: Un patrón muy útil es combinar useRef y useEffect para "recordar" un valor del render anterior.

function Componente({ valor }) {
  const valorPrevioRef = useRef();
  useEffect(() => {
    valorPrevioRef.current = valor;
  }, [valor]); // Se actualiza después de que el render se completa
  const valorPrevio = valorPrevioRef.current;
  // ...
}

Manejo de Timers: useRef es ideal para guardar el ID de setInterval o setTimeout para poder limpiarlo después.

🚨 Errores comunes y cómo evitarlos

Error: Acceder a ref.current demasiado pronto.

// MAL ❌
function MiComponente() {
  const miRef = useRef(null);
  // Aquí, durante el primer render, miRef.current es `null`
  // porque el DOM aún no existe. Esto dará un error.
  miRef.current.focus();

  return <input ref={miRef} />;
}

Solución: Accede a la ref dentro de un useEffect (que se ejecuta después del renderizado) o en manejadores de eventos (que se ejecutan por interacción del usuario).

// BIEN ✅
useEffect(() => {
  // Para el primer render, esto se ejecuta después de que el input existe.
  miRef.current.focus();
}, []); // Array vacío para que solo se ejecute una vez

Error: Mostrar el valor de una ref en la UI y esperar que se actualice.
- Solución: Si necesitas que un cambio se refleje en el render, ese valor debe estar en el estado (useState). Recuerda: useRef no notifica a React cuando cambia.

🚀 Retos prácticos

Reproductor de Video: Crea un componente que muestre un video (<video>). Usa useRef para obtener una referencia al elemento y añade botones para "Play", "Pause" y "Stop".
Cronómetro Preciso: Haz un cronómetro que use setInterval. Guarda el ID del intervalo en una ref para poder detenerlo y reiniciarlo correctamente.
Scroll a un Elemento: Crea una lista larga de elementos. Añade botones al principio que, al hacer clic, hagan scroll automáticamente a un elemento específico en medio de la lista (pista: element.scrollIntoView()).

🔹 `useReducer` – Manejar estados complejos (4/8)

Pedro Alvarado — Fri, 12 Sep 2025 15:40:33 +0000

📋 Tabla de contenidos

useState – El fundamento del estado
useEffect – Efectos secundarios y ciclo de vida
useContext – Compartir estado sin props
useReducer – Lógica de Estado Compleja y predecible
useRef – Referencias, Almacenamiento y Escape
useMemo y useCallback – Optimizando el Rendimiento
Custom Hooks – Creando Lógica Reutilizable
Errores Comunes y Soluciones

¿Qué es y para qué sirve?

useReducer es una alternativa a useState para gestionar lógicas de estado más complejas. Si te encuentras con un useState que maneja un objeto grande con muchas funciones de actualización diferentes y que se están volviendo difíciles de manejar, useReducer es la solución.

Centraliza toda la lógica de actualización del estado en una única función llamada "reducer", haciendo que el flujo de datos sea más predecible y fácil de depurar. Es conceptualmente similar a Redux, pero integrado en React.

Úsalo cuando:

El próximo estado depende de una lógica compleja basada en el estado anterior.
El estado tiene una estructura compleja (objetos anidados, arrays de objetos).
La lógica de actualización del estado necesita ser probada de forma aislada.
Quieres optimizar el rendimiento de componentes que disparan actualizaciones profundas, ya que dispatch no cambia entre renders.

Sintaxis y flujo de trabajo

const [state, dispatch] = useReducer(reducer, initialState);

reducer: Una función pura (state, action) => newState que toma el estado actual y una "acción", y devuelve el nuevo estado.
initialState: El estado inicial, similar al de useState.
state: El estado actual.
dispatch: Una función que "despacha" acciones a la función reducer. Es la única forma de desencadenar una actualización de estado. Una acción es típicamente un objeto con una propiedad type (ej. { type: 'INCREMENT' }).

El flujo es: Componente → dispatch(action) → reducer(state, action) → Nuevo Estado → Re-renderizado.

Ejemplo práctico detallado: lista de tareas (Todo List)

Este es el ejemplo canónico para useReducer, ya que implica múltiples tipos de actualizaciones sobre un array de objetos.

1. Definir el Reducer y el Estado Inicial

// components/TodoList.js

// Estado inicial: un array de tareas
const initialState = {
  todos: [
    { id: 1, text: 'Aprender useReducer', completed: true },
    { id: 2, text: 'Practicar con un ejemplo', completed: false },
  ],
};

// Acciones que podemos despachar
export const ACTIONS = {
  ADD_TODO: 'add-todo',
  TOGGLE_TODO: 'toggle-todo',
  DELETE_TODO: 'delete-todo',
};

// El reducer contiene toda la lógica de actualización
function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.payload.text, completed: false }],
      };
    case ACTIONS.TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case ACTIONS.DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload.id),
      };
    default:
      return state;
  }
}

2. Usar useReducer en el Componente

import React, { useReducer, useState } from 'react';
// (el código del reducer y el estado inicial va aquí arriba)

function TodoList() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [newTodoText, setNewTodoText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (newTodoText.trim() === '') return;
    dispatch({ type: ACTIONS.ADD_TODO, payload: { text: newTodoText } });
    setNewTodoText('');
  };

  return (
    <div>
      <h3>Lista de Tareas con useReducer</h3>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTodoText}
          onChange={(e) => setNewTodoText(e.target.value)}
          placeholder="Añadir nueva tarea"
        />
        <button type="submit">Añadir</button>
      </form>
      <ul>
        {state.todos.map(todo => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={() => dispatch({ type: ACTIONS.TOGGLE_TODO, payload: { id: todo.id } })}>
              {todo.completed ? 'Undo' : 'Completar'}
            </button>
            <button onClick={() => dispatch({ type: ACTIONS.DELETE_TODO, payload: { id: todo.id } })}>
              Eliminar
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

✅ Buenas practicas y patrones comunes

Reducers Puros: Un reducer nunca debe modificar el estado original (state) o la acción (action). Siempre debe devolver un nuevo objeto de estado. Tampoco debe realizar efectos secundarios (como llamadas a API).
Usar payload para los datos: Es una convención común pasar los datos necesarios para la actualización dentro de una propiedad payload en el objeto de la acción. Ej: { type: 'ADD', payload: { newItem } }.
Exportar constantes de acción: Definir los type de las acciones como constantes (como en el ejemplo ACTIONS) ayuda a evitar errores de tipeo y facilita el mantenimiento.
Separar el reducer: Para componentes muy complejos o para reutilizar la lógica, puedes definir el reducer y el estado inicial en un archivo separado e importarlos.

🚨 Errores comunes y cómo evitarlos

Error: Mutar el estado en el reducer.

// MAL ❌
case ACTIONS.DELETE_TODO:
  // Esto modifica el array original, es un anti-patrón.
  const index = state.todos.findIndex(t => t.id === action.payload.id);
  state.todos.splice(index, 1);
  return state;

Solución: Siempre retorna una copia nueva del estado.

// BIEN ✅
case ACTIONS.DELETE_TODO:
  return { ...state, todos: state.todos.filter(t => t.id !== action.payload.id) };

Error: Olvidar el default case en el switch.
- Solución: Si tu reducer recibe una acción que no reconoce, debería devolver el estado actual sin modificarlo. El default: return state; se encarga de esto. Sin él, tu reducer devolvería undefined y tu aplicación se rompería.

🚀 Retos prácticos

Formulario Complejo: Convierte un formulario con varios campos (useState con un objeto) a un useReducer. Crea acciones para UPDATE_FIELD y RESET_FORM.
Carrito de Compras: Gestiona un carrito de compras con acciones como ADD_ITEM, REMOVE_ITEM, INCREMENT_QUANTITY, DECREMENT_QUANTITY y CLEAR_CART.
Juego Simple: Crea un juego simple (como un "clicker" con mejoras que puedes comprar) donde el estado del juego (puntos, mejoras, etc.) se gestione con useReducer.

🔹 `useContext` – Compartir estado sin props (3/8)

Pedro Alvarado — Fri, 12 Sep 2025 15:39:40 +0000

📋 Tabla de contenidos

¿Qué es y para qué sirve?

useContext resuelve un problema muy común en React llamado "prop drilling". Esto ocurre cuando tienes que pasar props a través de múltiples niveles de componentes anidados, incluso si los componentes intermedios no las necesitan.

useContext te permite crear un "almacén" de datos global o semi-global al que cualquier componente dentro de un árbol específico puede acceder directamente, sin necesidad de recibirlo por props.

Úsalo para:

Gestionar el tema de la aplicación (oscuro/claro).
Información del usuario autenticado.
Configuraciones de idioma.
Estado de un carrito de compras.

Sintaxis y flujo de trabajo

El uso de Context API se divide en 3 pasos:

Crear el Contexto:

// theme-context.js
import { createContext } from 'react';
// El valor 'light' es el valor por defecto, solo se usa si un
// componente intenta consumir el contexto sin un Provider por encima.
export const ThemeContext = createContext('light');

Proveer el Contexto:
En algún lugar arriba en tu árbol de componentes (como App.js), envuelve a los componentes hijos con el Provider del contexto y pásale un value.

// App.js
import { ThemeContext } from './theme-context';

function App() {
  const [theme, setTheme] = useState('dark');
  // Todos los componentes dentro de este Provider podrán acceder al valor 'dark'.
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Layout />
    </ThemeContext.Provider>
  );
}

Consumir el Contexto:
Cualquier componente hijo puede usar el hook useContext para leer (y en este caso, modificar) el valor.

// Button.js
import { useContext } from 'react';
import { ThemeContext } from './theme-context';

function Button() {
  const { theme, setTheme } = useContext(ThemeContext);
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return <button onClick={toggleTheme}>Cambiar a tema {theme === 'light' ? 'oscuro' : 'claro'}</button>;
}

Ejemplo práctico detallado: proveedor de autenticación

Vamos a crear un sistema simple para manejar el estado de autenticación de un usuario en toda la app.

1. Crear el AuthContext.js

// contexts/AuthContext.js
import React, { createContext, useState, useContext } from 'react';

// 1. Crear el contexto
const AuthContext = createContext(null);

// 2. Crear el Proveedor (un componente personalizado)
export function AuthProvider({ children }) {
  const [user, setUser] = useState(null); // El usuario no está logueado por defecto

  const login = (username) => setUser({ name: username });
  const logout = () => setUser(null);

  // Pasamos tanto el estado como las funciones para modificarlo
  const value = { user, login, logout };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// 3. Crear un Custom Hook para consumir el contexto (buena práctica)
export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth debe ser usado dentro de un AuthProvider');
  }
  return context;
}

2. Envolver la App con AuthProvider

// App.js
import { AuthProvider } from './contexts/AuthContext';
import Navbar from './components/Navbar';

function App() {
  return (
    <AuthProvider>
      <h1>Mi Aplicación</h1>
      <Navbar />
      {/* ...el resto de la app... */}
    </AuthProvider>
  );
}

3. Usar el contexto en cualquier componente

// components/Navbar.js
import { useAuth } from '../contexts/AuthContext';

function Navbar() {
  const { user, login, logout } = useAuth(); // ¡Así de fácil!

  return (
    <nav>
      {user ? (
        <>
          <span>Bienvenido, {user.name}</span>
          <button onClick={logout}>Cerrar Sesión</button>
        </>
      ) : (
        <button onClick={() => login('UsuarioPrueba')}>Iniciar Sesión</button>
      )}
    </nav>
  );
}

🚀 Ver el código interactivo en CodeSandbox Haz clic para abrir el sandbox y experimentar con el código

💡 Tip: Puedes modificar el código en el editor de la izquierda y ver los cambios en tiempo real.

✅ Buenas practicas y patrones comunes

Crear un Custom Provider: Como en el ejemplo anterior, es una excelente práctica crear un componente MiProveedor que encapsule la lógica del estado (useState o useReducer) junto con el Context.Provider. Esto mantiene la lógica centralizada y el componente App más limpio.
Crear un Custom Hook consumidor: useMiContexto (como useAuth) hace que el consumo sea más declarativo y permite añadir validaciones, como comprobar si el hook se está usando dentro del proveedor correcto.
Separar contextos: No pongas todo el estado de tu aplicación en un solo contexto gigante. Divídelo por dominios: AuthContext, ThemeContext, CartContext, etc. Esto evita re-renderizados innecesarios.
Optimización de value: Cada vez que el componente que contiene al Provider se re-renderiza, se crea un nuevo objeto para value. Si este objeto contiene funciones, créalas con useCallback para evitar re-renderizados innecesarios en los componentes consumidores.

🚨 Errores comunes y cómo evitarlos

Error: Olvidar envolver los componentes con el <MiContext.Provider>.
- Solución: Asegúrate de que el Provider esté en un nivel superior en el árbol de componentes. El custom hook con la validación (como en el ejemplo de useAuth) te ayudará a detectar este error rápidamente.

Error: Re-renderizados excesivos.

// PROBLEMA 😬
function App() {
  const [count, setCount] = useState(0);
  // El objeto `value` se crea de nuevo en CADA render de App,
  // incluso si `count` es el que cambia. Esto hace que TODOS los
  // consumidores de ThemeContext se re-rendericen.
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
       <button onClick={() => setCount(c => c + 1)}>{count}</button>
       <MiComponentePesado />
    </ThemeContext.Provider>
  );
}

Solución: Saca el value del flujo del render si es estático, o memorízalo con useMemo si depende de props o estado.

// BIEN ✅
const themeValue = useMemo(() => ({ theme: 'dark' }), []);
// O mejor aún, si es totalmente estático:
const themeValue = { theme: 'dark' };
return <ThemeContext.Provider value={themeValue}>...</ThemeContext.Provider>;

🚀 Retos prácticos

Selector de tema: Crea un ThemeContext que permita a los componentes mostrar Tema actual: "Dark" o "Light". Unos botones en la Navbar deberían poder cambiar el tema de toda la aplicación.

💻 Código base (haz clic para mostrar)

import React, { createContext, useContext } from "react";

// Consejo: Define un tipo para los posibles valores del tema.
type Theme = "light" | "dark";

// Consejo: Tipa el contexto para que sepa qué tipo de valor va a manejar.
const ThemeContext = createContext<Theme | undefined>(undefined);

export default function ThemeReto(): React.ReactElement {
  // TODO: Crea un provider con valor 'light' o 'dark'
  // y un componente que use useContext para mostrarlo

  return <div>{/* TODO: Mostrar tema */}</div>;
}

Notificaciones Globales: Implementa un NotificationContext que permita a cualquier componente mostrar un mensaje de notificación (ej. "Producto añadido al carrito"). Debe tener una función showNotification(message).

💻 Código base (haz clic para mostrar)

Carrito de Compras con useReducer y useContext: Combina ambos hooks. Crea un CartContext que use un useReducer internamente para manejar la lógica de añadir, eliminar y actualizar productos en el carrito.

💻 Código base (haz clic para mostrar)

Solución reto 1

🚀 Ver el código interactivo en CodeSandbox Haz clic para abrir el sandbox y experimentar con el código

💡 Tip: Puedes modificar el código en el editor de la izquierda y ver los cambios en tiempo real.

🔹 `useEffect` – Efectos secundarios y ciclo de vida 2/8

Pedro Alvarado — Fri, 12 Sep 2025 15:36:31 +0000

📋 Tabla de contenidos

useState – El fundamento del estado
useEffect – Efectos secundarios y ciclo de vida
useContext – Compartir estado sin props
useReducer – Lógica de Estado Compleja y predecible
useRef – Referencias, Almacenamiento y Escape
useMemo y useCallback – Optimizando el Rendimiento
Custom Hooks – Creando Lógica Reutilizable
Errores Comunes y Soluciones

¿Qué es y para qué sirve?

useEffect conecta tus componentes con sistemas externos. Permite ejecutar "efectos secundarios" después de que el componente se haya renderizado. Un efecto secundario es cualquier código que afecta a algo fuera del propio componente, como:

Llamadas a una API para buscar datos.
Suscripciones a eventos (ej. window.addEventListener).
Manipulación manual del DOM.
Timers como setInterval o setTimeout.

useEffect reemplaza a los métodos de ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount de los componentes de clase.

Sintaxis y el array de dependencias

useEffect(() => {
  // ...tu código del efecto...

  return () => {
    // ...función de limpieza (opcional)...
  };
}, [dependencias]);

La parte más importante de useEffect es el array de dependencias. Controla cuándo se ejecuta el efecto:

[dependencia1, dependencia2]: El efecto se ejecuta solo si alguna de las dependencias ha cambiado desde el último render. Este es el caso más común.
[] (array vacío): El efecto se ejecuta una sola vez, justo después del renderizado inicial (equivalente a componentDidMount). Perfecto para inicializaciones o fetching de datos que no cambian.
No se proporciona el array: El efecto se ejecuta después de cada renderizado. ¡Cuidado! Esto puede causar bucles infinitos si el efecto actualiza el estado.

La función de limpieza (return) es opcional y se ejecuta:

Antes de que el efecto se vuelva a ejecutar (si una dependencia cambió).
Cuando el componente se desmonta (se elimina de la pantalla).

Es crucial para limpiar suscripciones, timers o listeners y evitar fugas de memoria.

Ejemplo práctico detallado: fetching de datos con estado de carga y error

Este es el caso de uso más común para useEffect. Vamos a buscar datos de un Pokémon y a manejar los estados intermedios.

import React, { useState, useEffect } from 'react';

function PokemonInfo({ pokemonName }) {
  const [pokemon, setPokemon] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!pokemonName) return;

    // Reseteamos los estados al empezar una nueva búsqueda
    setLoading(true);
    setError(null);
    setPokemon(null);

    fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('No se encontró el Pokémon');
        }
        return response.json();
      })
      .then(data => {
        setPokemon(data);
      })
      .catch(error => {
        setError(error.message);
      })
      .finally(() => {
        setLoading(false);
      });

  }, [pokemonName]); // El efecto depende del nombre del Pokémon

  if (loading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      {pokemon && (
        <>
          <h3>{pokemon.name}</h3>
          <img src={pokemon.sprites.front_default} alt={pokemon.name} />
        </>
      )}
    </div>
  );
}

🚀 Ver el código interactivo en CodeSandbox Haz clic para abrir el sandbox y experimentar con el código

✅ Buenas practicas y patrones comunes

Un efecto, una responsabilidad: Si tienes lógicas no relacionadas, sepáralas en varios useEffect. Uno para fetching, otro para un event listener, etc. Esto hace el código más limpio.
Limpia siempre tus efectos: Si te suscribes a algo, crea un timer o un listener, siempre devuelve una función de limpieza para cancelarlo.
No olvides las dependencias: El linter de React te suele avisar si usas una variable o función dentro del efecto pero no la incluyes en el array. ¡No lo ignores! Omitir dependencias puede causar bugs muy difíciles de rastrear.
Funciones en el array de dependencias: Si una función se usa dentro de useEffect, debe estar en el array. Pero si esa función se redefine en cada render, causará que el efecto se ejecute siempre. La solución es definir la función dentro del useEffect o memorizarla con useCallback.

🚨 Errores comunes y cómo evitarlos

Error: El bucle infinito.

// MAL ❌
const [count, setCount] = useState(0);
useEffect(() => {
  // Este efecto cambia el estado, lo que causa un re-render,
  // lo que vuelve a ejecutar el efecto, y así hasta el infinito.
  setCount(count + 1);
}); // Sin array de dependencias

Solución: Añade un array de dependencias. Si quieres que se ejecute solo una vez, que sea []. Si quieres que reaccione a un cambio, incluye la dependencia [otraVariable].

Error: Datos "viejos" (stale state) por dependencias faltantes.

// MAL ❌
const [count, setCount] = useState(0);
useEffect(() => {
  // Este intervalo siempre "verá" count como 0, porque la función
  // del intervalo se creó en el primer render y nunca se actualizó.
  const intervalId = setInterval(() => {
    console.log(`El contador es: ${count}`);
  }, 1000);
  return () => clearInterval(intervalId);
}, []); // El array vacío le dice a React: "nunca vuelvas a ejecutar esto"

Solución 1: Añadir la dependencia.

// BIEN ✅ (pero recrea el intervalo cada vez que count cambia)
useEffect(() => { ... }, [count]);

Solución 2: Usar la actualización funcional (mejor en este caso).

// EXCELENTE ✅
// Dentro de `setCount`, React siempre te da el valor más reciente.
// No necesitamos `count` como dependencia.
useEffect(() => {
  const intervalId = setInterval(() => {
     setCount(c => c + 1); // usamos la versión más reciente del estado
  }, 1000);
  return () => clearInterval(intervalId);
}, []);

🚀 Retos prácticos

Temporizador con Start/Stop/Reset: Usa useEffect y useState para crear un cronómetro funcional.

💻 Código base (haz clic para mostrar)

import React, { useState } from "react";

// Reto: Seguir el ratón
// Crea un componente que muestre las coordenadas X e Y del ratón en tiempo real.
// Pista: window.addEventListener('mousemove', ...), y no olvides limpiar el listener.

interface Coordenadas {
  x: number;
  y: number;
}

export default function SeguirRatonReto(): React.ReactElement {
  const [coordenadas, setCoordenadas] = useState<Coordenadas>({ x: 0, y: 0 });

  // TODO: Implementar useEffect para:
  // 1. Agregar un event listener para 'mousemove' en window
  // 2. Actualizar las coordenadas cuando el ratón se mueva
  // 3. Limpiar el event listener cuando el componente se desmonte

  return (
    <div style={{ padding: "20px", height: "100vh" }}>
      <h1>Seguimiento del Ratón</h1>
      <p style={{ fontSize: "1.5rem" }}>
        Coordenadas: X: {coordenadas.x}, Y: {coordenadas.y}
      </p>
      <p style={{ color: "#666" }}>
        Mueve el ratón para ver las coordenadas actualizarse en tiempo real.
      </p>
    </div>
  );
}

Seguir el ratón Crea un componente que muestre las coordenadas X e Y del ratón en tiempo real.

(Pista: window.addEventListener('mousemove', ...), y no olvides limpiar el listener).

💻 Código base (haz clic para mostrar)

import React, { useState } from "react";

// Reto: Seguir el ratón
// Crea un componente que muestre las coordenadas X e Y del ratón en tiempo real.
// Pista: window.addEventListener('mousemove', ...), y no olvides limpiar el listener.

interface Coordenadas {
    x: number;
    y: number;
}

export default function SeguirRatonReto(): React.ReactElement {
    const [coordenadas, setCoordenadas] = useState<Coordenadas>({ x: 0, y: 0 });

    // TODO: Implementar useEffect para:
    // 1. Agregar un event listener para 'mousemove' en window
    // 2. Actualizar las coordenadas cuando el ratón se mueva
    // 3. Limpiar el event listener cuando el componente se desmonte

    return (
        <div style={{ padding: "20px", height: "100vh" }}>
            <h1>Seguimiento del Ratón</h1>
            <p style={{ fontSize: "1.5rem" }}>
                Coordenadas: X: {coordenadas.x}, Y: {coordenadas.y}
            </p>
            <p style={{ color: "#666" }}>
                Mueve el ratón para ver las coordenadas actualizarse en tiempo real.
            </p>
        </div>
    );
}

Título de la página dinámico: Haz que el título del documento (document.title) se actualice para mostrar el valor de un contador o un input.

💻 Código base (haz clic para mostrar)

import React, { useState } from "react";

// Haz que el título del documento (document.title) se actualice para mostrar
// el valor de un contador o un input.

export default function TituloDinamicoReto(): React.ReactElement {
    const [contador, setContador] = useState<number>(0);
    const [textoInput, setTextoInput] = useState<string>("");

    // TODO: Implementar useEffect para actualizar document.title
    // El título debe cambiar cuando el contador o el input cambien
    // Ejemplo: "Contador: 5" o "Texto: Hola mundo"

    const incrementar = () => {
        setContador(contador + 1);
    };

    const decrementar = () => {
        setContador(contador - 1);
    };

    const reiniciar = () => {
        setContador(0);
    };

    return (
        <div style={{ padding: "20px" }}>
            <h1>Título Dinámico</h1>

            <div style={{ marginBottom: "30px" }}>
                <h2>Contador: {contador}</h2>
                <button onClick={incrementar} style={{ margin: "0 5px" }}>
                    +
                </button>
                <button onClick={decrementar} style={{ margin: "0 5px" }}>
                    -
                </button>
                <button onClick={reiniciar} style={{ margin: "0 5px" }}>
                    Reset
                </button>
            </div>

            <div>
                <h2>Input de Texto</h2>
                <input
                    type="text"
                    value={textoInput}
                    onChange={(e) => setTextoInput(e.target.value)}
                    placeholder="Escribe algo..."
                    style={{ padding: "8px", fontSize: "16px", width: "300px" }}
                />
            </div>

            <p style={{ marginTop: "20px", color: "#666" }}>
                Mira el título de la pestaña del navegador para ver los cambios.
            </p>
        </div>
    );
}

Autoguardado: Crea un textarea que guarde su contenido en localStorage automáticamente 2 segundos después de que el usuario deje de escribir.

💻 Código base (haz clic para mostrar)

import React, { useState } from "react";

// Crea un textarea que guarde su contenido en localStorage automáticamente
// 2 segundos después de que el usuario deje de escribir.

export default function AutoguardadoReto(): React.ReactElement {
    const [texto, setTexto] = useState<string>("");
    const [ultimoGuardado, setUltimoGuardado] = useState<Date | null>(null);

    // TODO: Implementar useEffect para autoguardar
    // 1. Cargar el texto guardado de localStorage al montar el componente
    // 2. Usar un setTimeout que se active 2 segundos después de que el usuario deje de escribir
    // 3. Guardar en localStorage con la clave "autoguardado-texto"
    // 4. Actualizar la fecha del último guardado
    // Pista: usar clearTimeout para cancelar el timeout anterior cuando el usuario sigue escribiendo

    return (
        <div style={{ padding: "20px", maxWidth: "600px" }}>
            <h1>Autoguardado en localStorage</h1>

            <textarea
                value={texto}
                onChange={(e) => setTexto(e.target.value)}
                placeholder="Escribe algo... Se guardará automáticamente 2 segundos después de que dejes de escribir."
                style={{
                    width: "100%",
                    height: "200px",
                    padding: "10px",
                    fontSize: "16px",
                    border: "1px solid #ccc",
                    borderRadius: "4px",
                    resize: "vertical"
                }}
            />

            <div style={{ marginTop: "10px", color: "#666" }}>
                {ultimoGuardado && (
                    <p>Último guardado: {ultimoGuardado.toLocaleTimeString()}</p>
                )}
                <p>Caracteres: {texto.length}</p>
            </div>
        </div>
    );
}

Solución reto 1

🚀 Ver el código interactivo en CodeSandbox Haz clic para abrir el sandbox y experimentar con el código

💡 Tip: Puedes modificar el código en el editor de la izquierda y ver los cambios en tiempo real.