andrekovac · webbrain-one · Aug 8, 2026
diff --git a/README.es-ES.md b/README.es-ES.md
@@ -0,0 +1,234 @@
+
+
+# Taller de React Hooks
+
+Un taller que profundiza en todos los hooks incorporados de React
+
+## Para comenzar
+
+### Requisitos previos
+
+- Node.js >= 20.0.0
+- npm o yarn como administrador de paquetes
+
+### Instalación
+
+1. Clona el repositorio:
+
+   ```bash
+   git clone https://github.com/andrekovac/react-hooks-workshop.git
+   cd react-hooks-workshop
+   ```
+
+2. Instala las dependencias:
+
+   ```bash
+   npm install
+   ```
+
+3. Inicia el servidor de desarrollo:
+
+   ```bash
+   npm run dev
+   ```
+
+4. Abre tu navegador y navega a la URL que se muestra en la terminal (típicamente `http://localhost:5173`)
+
+### Scripts disponibles
+
+- `npm run dev` - Inicia el servidor de desarrollo
+- `npm run build` - Compila el proyecto para producción
+- `npm run preview` - Vista previa de la compilación de producción localmente
+- `npm run lint` - Ejecuta ESLint para verificar la calidad del código
+
+### Configuración de React Compiler
+
+Este proyecto incluye soporte para React Compiler. Puedes habilitarlo o deshabilitarlo en `vite.config.ts`:
+
+```typescript
+const ReactCompilerConfig = {
+  sources: (_filename: string) => {
+    return true; // true = habilitado, false = deshabilitado
+  },
+};
+```
+
+Consulta la [sección de React Compiler](./sections/react-compiler.md) para ejemplos interactivos y ejercicios de aprendizaje.
+
+## Estructura de este documento
+
+- El corazón de este documento son los enlaces "**CodeSandBox**". La mayoría están escritos en TypeScript, algunos en JavaScript (marcados con "**(JS)**")
+- Una parte del documento es un recorrido que introduce gradualmente los hooks a través de escenarios `<Counter />`.
+- Además, hay otros ejemplos que cubren otros hooks o puntos interesantes relacionados con ellos.
+
+## Temas
+
+1. [Definición de hooks de React](./sections/definition.md)
+2. [Conceptos básicos del estado en React](./sections/react-state-basics.md)
+3. [Configuración y recuperación asíncrona](./sections/async-setting-and-retrieval.md)
+4. [Hook `useRef`](./sections/useRef.md)
+5. [Hook `useEffect`](./sections/useEffect.md)
+
+   - matriz de dependencias
+   - cómo prevenir condiciones de carrera al obtener datos
+
+6. [Hook `useCallback`](./sections/useCallback.md)
+
+   - Cubre la heurística "Eliminar dependencias: **funciones**"
+
+7. [hooks personalizados](./sections/custom-hook.md)
+8. [Interacción entre `useEffect` y `useState`](./sections/use-effect-use-state-interplay.md)
+
+   - Cubre la heurística "Eliminar dependencias: **valores**"
+
+9. [`useReducer`](./sections/useReducer.md)
+10. [`useLayoutEffect`](./sections/useLayoutEffect.md)
+
+    Temas cubiertos:
+
+    - `useLayoutEffect` frente a `useEffect`
+    - uso atípico de la función setter de `useState`
+    - matriz de dependencias de `useEffect`/`useLayoutEffect` con **refs**
+    - **ciclo de vida** de los hooks de React
+
+11. [Componentes de clase frente a función](./sections/class-vs-function-component.md)
+12. [Mejora de rendimiento del HOC `React.memo`](./sections/react-memo.md)
+
+    Temas cubiertos:
+
+    - cómo evitar renderizados innecesarios en React
+    - Interacción con el hook `useCallback`
+    - Cómo los cambios en las props desencadenan renderizados
+    - Discusión sobre la organización del código
+
+13. [React Compiler (React 19+)](./sections/react-compiler.md)
+
+    Temas cubiertos:
+
+    - Memorización automática frente a optimización manual
+    - Qué puede y no puede optimizar React Compiler
+    - Ejemplos interactivos con ejercicios de habilitar/deshabilitar
+    - Limitaciones de React Compiler y consideraciones del mundo real
+    - Cuándo seguir utilizando `React.memo`, `useCallback` y `useMemo`
+    - Estabilidad de referencias y comparación de props
+
+14. [Hook `useMemo`](./sections/useMemo.md)
+15. [Hook `useImperativeHandle`](./sections/useImperativeHandle.md)
+16. [Hook `useSyncExternalStore` (React 18)](./sections/useSyncExternalStore.md)
+17. [Hook `useEffectEvent` (React 19.2+)](./sections/useEffectEvent/README.md)
+
+    Temas cubiertos:
+
+    - Leer las últimas props/estado en Effects sin re-ejecuciones
+    - Patrones de análisis y registro (logging)
+    - Reglas de Effect Event y aplicación con ESLint
+    - Comparación con `useCallback`
+
+18. [Contexto + hook `useContext`](./sections/useContext.md)
+19. [Depuración (incl. hook `useDebugValue`)](./sections/debugging.md)
+20. [Modo Concurrente](./sections/concurrentMode/index.md)
+
+    Temas cubiertos:
+
+    - Componente `Suspense`
+    - Componente `ErrorBoundary`
+    - Hook `useTransition`
+    - Hook `useDeferredValue`
+    - Interacción entre `useTransition` y `useDeferredValue`
+    - `useTransition` y `useDeferredValue` con `useEffect`
+
+## Extra
+
+- [Hook `usePrevious`](./sections/extra-usePrevious-hook.md)
+- [Error de `useState`: `setState` en componente desmontado](./sections/setState-on-unmounted-component.md)
+- [Llamadas agrupadas a `useState`](./sections/batched-useState-calls.md)
+- [React StrictMode](./sections/StrictMode.md)
+- [Composición](./sections/composition.md)
+
+---
+
+## Comentarios adicionales
+
+- Los enlaces proporcionados a la biblioteca de React provienen de su implementación de `server`. Sin embargo, ejemplifican su funcionamiento mejor que las definiciones de hooks en otras partes de la base de código de React, ya que allí son más abstractas.
+- Completar todos los ejemplos como parte de un taller tomará al menos un día, más realistamente 1.5 días.
+- Este es un documento vivo y está lejos de ser perfecto. Lo iré mejorando gradualmente aquí y allá, y añadiré nuevas notas y ejemplos.
+
+## Agradecimientos
+
+Este curso es una colección de ejemplos de código inspirados en otros artículos de blog y fragmentos de código escritos por maravillosos desarrolladores. A veces simplemente los adapté de otros. Aprendí mucho de ellos mientras trabajaba con sus artículos y ejemplos. ¡Muchas gracias! Algunas secciones contienen enlaces a otros artículos útiles.
+
+Debo destacar un artículo en particular aquí: muchos ejemplos de este curso se basan en el artículo de blog de [Dan Abramov](https://github.com/gaearon) [A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/). ¡Gracias por esta lectura muy esclarecedora!
+
+Y un gran agradecimiento a todos mis alumnos con quienes trabajé los ejemplos. Sus preguntas y comentarios están mejorando continuamente este curso. ¡Gracias!
+
+## Enlaces de StackBlitz
+
+Abre cualquier ejemplo directamente en StackBlitz:
+
+**Conceptos básicos del estado en React:**
+
+- [Estado interno frente a externo](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/InternalVsExternalStatePage.tsx)
+- [Mutable frente a inmutable](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/MutableVsImmutablePage.tsx)
+- [Un cambio de estado, todo nuevo](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/OneStateChangeAllNewPage.tsx)
+- [El setter crea nuevos objetos](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/SetterCreatesNewObjectsPage.tsx)
+- [useState Básico](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/reactStateBasics/UseStateBasicPage.tsx)
+
+**Configuración y recuperación asíncrona:**
+
+- [Configuración asíncrona](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/asyncSettingAndRetrieval/AsyncSettingPage.tsx)
+- [Recuperación asíncrona (Primitivo)](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/asyncSettingAndRetrieval/AsyncRetrievalPage.tsx)
+- [Recuperación asíncrona (Objeto)](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/asyncSettingAndRetrieval/AsyncRetrievalObjectPage.tsx)
+
+**useRef:**
+
+- [Ref frente a estado frente a local](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useRef/RefVsStateVsLocal.tsx)
+- [Ref frente a variable externa](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useRef/RefVsExternalVariable.tsx)
+- [Ref de timeout de estado asíncrono](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useRef/AsyncStateTimeoutRef.tsx)
+
+**useEffect:**
+
+- [Obtener películas](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffect/FetchMoviesPage.tsx)
+- [Condición de carrera](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffect/RaceConditionPage.tsx)
+- [Interacción useEffect/useState](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffectUseStateInterplay/UseEffectUseStateInterplayPage.tsx)
+
+**useReducer:**
+
+- [Demo de useReducer](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useReducer/UseReducerPage.tsx)
+
+**Clase frente a función:**
+
+- [Clase frente a función](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/classVsFunction/ClassVsFunctionPage.tsx)
+
+**Rendimiento:**
+
+- [Vista general del rendimiento](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/ReactMemoPage.tsx)
+- [Parte 1: Prevención de renderizados](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/ReactMemoPage1.tsx)
+- [Parte 2: Memorización con manejadores](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/ReactMemoPage2.tsx)
+
+**React Compiler:**
+
+- [React Compiler - Problema Página 1](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page1/Problem.tsx)
+- [React Compiler - Solución Página 1](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page1/Solution2Memo.tsx)
+- [React Compiler - Problema Página 2](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page2/Problem.tsx)
+- [React Compiler - Solución Página 2](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/performance/page2/Solution2UseCallback.tsx)
+
+**Hook personalizado:**
+
+- [Demo de hook personalizado](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/customHook/CustomHookPage.tsx)
+
+**useEffectEvent:**
+
+- [Demo de useEffectEvent](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useEffectEvent/UseEffectEventPage.tsx)
+
+**useLayoutEffect:**
+
+- [Demo de useLayoutEffect](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useLayoutEffect/UseLayoutEffectPage.tsx)
+
+**useCallback:**
+
+- [Demo de useCallback](https://stackblitz.com/github/andrekovac/react-hooks-workshop?file=src/pages/useCallback/UseCallbackPage.tsx)
+
+## Recursos destacados
+
+- [React eli5](https://github.com/reactwg/react-18/discussions/46)
+  Eli5 (explicado como a un niño de 5 años) son excelentes artículos para cada tema. Es genial que también haya uno para React.