React

Una biblioteca de JavaScript para construir interfaces de usuario basadas en componentes.

Una representación ligera en memoria del DOM real, utilizada para optimizar las actualizaciones.

Una extensión de sintaxis para JavaScript que permite escribir código similar a HTML dentro de JS.

State es interno y se gestiona dentro del componente; Props son externos y se pasan desde un componente padre.

Los componentes funcionales son funciones JS simples; los componentes de clase usan clases ES6 y tienen métodos de ciclo de vida.

Ayuda a React a identificar qué elementos han cambiado, se han añadido o eliminado para un renderizado eficiente.

Una sintaxis (<>...</>) para agrupar múltiples elementos sin añadir nodos extra al DOM.

Una función que recibe un componente y devuelve un nuevo componente con lógica adicional.

El algoritmo que usa React para comparar el virtual DOM y aplicar solo las actualizaciones necesarias.

Una herramienta para destacar posibles problemas en una aplicación durante el desarrollo.

Un Element es un objeto plano que describe una interfaz; un Component es la función/clase que lo devuelve.

Arquitectura basada en componentes, gran ecosistema, amigable con el SEO (con SSR) y alto rendimiento.

React fomenta el uso de la composición (anidando componentes) en lugar de la herencia para reutilizar código.

El motor de reconciliación actual, diseñado para mejorar la fluidez y soportar el renderizado incremental.

Una biblioteca de UI centrada en vistas declarativas, reutilización de componentes y renderizado eficiente mediante el Virtual DOM.

Ayudan a React a rastrear la identidad de los elementos de forma eficiente.

Rompe el algoritmo de reconciliación cuando cambia el orden de la lista.

O(n) con heurísticas usando keys.

Funciones que permiten usar el estado y otras características de React en componentes funcionales.

Se utiliza para efectos secundarios como la obtención de datos, suscripciones o manipulaciones manuales del DOM.

Declara una variable de estado que React preserva entre re-renderizados.

useEffect se ejecuta después del pintado; useLayoutEffect se ejecuta de forma síncrona antes del pintado.

Un hook que memoiza el resultado de un cálculo costoso para evitar recomputaciones innecesarias.

Un hook que memoiza una instancia de función para evitar que se vuelva a crear en cada renderizado.

Crea una referencia persistente que no provoca un re-renderizado cuando cambia su valor.

Permite acceder a datos globales (como temas o usuarios) sin hacer prop drilling manual.

Una alternativa a useState para lógica de estado compleja, similar al patrón de Redux.

1. Llámales solo en el nivel superior. 2. Llámales solo desde funciones de React o custom hooks.

Una función JS que comienza con "use" y puede llamar a otros hooks para reutilizar lógica con estado.

Una técnica para pasar un ref automáticamente a través de un componente a un hijo.

Un hook para generar IDs únicos que son estables entre el servidor y el cliente.

constructor, render, componentDidMount (Clase); useEffect con [] (Función).

componentWillUnmount (Clase); función de limpieza de useEffect (Función).

Un hook para suscribirse a stores externos (p. ej., APIs del navegador) de forma segura para el renderizado concurrente.

Cualquier operación que afecta algo fuera del ámbito de la función que se está ejecutando (p. ej., llamadas a una API).

Eliminan la complejidad de las clases y permiten reutilizar lógica mediante custom hooks.

Controla cuándo se vuelven a ejecutar los efectos mediante comparación superficial.

Una alternativa a useState para lógica de estado compleja.

Usa useEffect con limpieza y controladores de aborto (abort controllers).

Cuando los cambios no deben provocar un re-render.

Usa React.memo, useMemo, useCallback, lazy loading y evita funciones anónimas en el render.

Un higher-order component que evita que un componente funcional se rerenderice si las props no cambian.

React programa una actualización, fusiona el nuevo estado y desencadena un re-render del árbol de componentes.

React detecta los cambios por referencia; mutar el objeto original impide que se desencadene un re-render.

Un componente que devuelve la misma salida para los mismos props y estado, omitiendo renders innecesarios.

La capacidad de React para agrupar múltiples actualizaciones de estado en un único re-render para mejorar el rendimiento.

Cambios de estado, cambios de props o actualizaciones de contexto.

Se basa en cambios de referencia para detectar actualizaciones.

Permite renderizado interrumpible para una mejor UX.

Suspense maneja lo asíncrono a nivel de renderizado.

Mover el estado al ancestro común más cercano para compartir datos entre componentes hermanos.

Los componentes controlados gestionan los datos del formulario mediante state; los no controlados usan el DOM (a través de Refs).

Componentes de clase que capturan errores de JS en su árbol de hijos y muestran una UI de respaldo.

El proceso de pasar datos a través de varios niveles de componentes que no los necesitan.

Se usan para code-splitting y cargar componentes solo cuando son necesarios.

React usa SyntheticEvents, que son envoltorios cross-browser alrededor de los eventos nativos del navegador.

Una biblioteca externa para la gestión de estado global que sigue un flujo de datos unidireccional.

Proporcionan una forma de renderizar hijos en un nodo del DOM que existe fuera de la jerarquía del componente padre.

El proceso de adjuntar event listeners al HTML renderizado en el servidor para hacerlo interactivo.

Un enfoque de estilos donde el CSS se escribe usando JS (p. ej., Styled Components) para un alcance local.

Comúnmente se prueba con Jest (test runner) y React Testing Library (pruebas centradas en la UI).

Context sirve para pasar props; Redux es un sistema completo de gestión de estado con herramientas de desarrollo avanzadas.

Server-Side Rendering: renderizar la aplicación a HTML en el servidor para una carga inicial más rápida y mejor SEO.

Una forma de pasar datos sin prop drilling.

SSR mejora la carga inicial y el SEO; CSR transfiere el trabajo al cliente.

Cargar código bajo demanda para reducir el tamaño del bundle.

Patrón de flujo de datos unidireccional.

Carpetas basadas en funcionalidades, hooks compartidos, separación por dominio.

Las pruebas unitarias aíslan la lógica; las de integración verifican la interacción.

Un wrapper de React alrededor de los eventos nativos del navegador.

Inputs controlados + bibliotecas de validación.

Prevención de XSS mediante escape, evitar dangerouslySetInnerHTML.

Escapa los valores por defecto.