### CONTRIBUTING

## Contribuciones

Para editar un fichero, primero entra en la pestaña _Pull Requests_ para comprobar que nadie está añadiendo la misma pregunta.

Para mejor organización, sólo debe añadirse una pregunta por Pull Requests y así evitar conflictos.

## ¿Qué preguntas se pueden añadir?

Se buscan preguntas que pueden hacerte en una entrevista técnica de React. Las preguntas deben estar enfocadas a un problema o concepto, y deben tener relación directa con React.

## Estilo de las preguntas

- Usa una respuesta lo más concisa posible y aporta ejemplos siempre que sea necesario.
- No copies y pegues respuestas de otros sitios.
- Aporta links de referencia a documentación, ejemplos, tweets o vídeos siempre que sea posible.

---

### README

<div align='center'>
  <img width="600" alt="Preguntas de entrevista para React" src="https://www.reactjs.wiki/og.jpg">
  <h1>Preguntas de entrevista para React</h1>

<i>De cero a experto. Con respuestas detalladas en Español 🇪🇸</i>

<sup>Deja tu :star: si te gusta el proyecto.</sup>

<strong>Streams</strong> de programación en Twitch: [twitch.tv/midudev](https://twitch.tv/midudev)<br />
<strong>Comunidad</strong> de desarrollo en Discord: [discord.gg/midudev](https://discord.gg/midudev)

</div>

---

## Índice

- [Índice](#índice)
  - [Principiante](#principiante)
    - [¿Qué es React?](#qué-es-react)
    - [¿Cuáles son las características principales de React?](#cuáles-son-las-características-principales-de-react)
    - [¿Qué significa exactamente que sea declarativo?](#qué-significa-exactamente-que-sea-declarativo)
    - [¿Qué es un componente?](#qué-es-un-componente)
    - [¿Qué es JSX?](#qué-es-jsx)
    - [¿Cómo se transforma el JSX?](#cómo-se-transforma-el-jsx)
    - [¿Cuál es la diferencia entre componente y elemento en React?](#cuál-es-la-diferencia-entre-componente-y-elemento-en-react)
    - [¿Cómo crear un componente en React?](#cómo-crear-un-componente-en-react)
    - [¿Qué son las props en React?](#qué-son-las-props-en-react)
    - [¿Qué es y para qué sirve la prop `children` en React?](#qué-es-y-para-qué-sirve-la-prop-children-en-react)
    - [ ¿Qué diferencia hay entre props y state?](#qué-diferencia-hay-entre-props-y-state)
    - [¿Se puede inicializar un estado con el valor de una prop? ¿Qué pasa si lo haces y qué hay que tener en cuenta?](#se-puede-inicializar-un-estado-con-el-valor-de-una-prop-qué-pasa-si-lo-haces-y-qué-hay-que-tener-en-cuenta)
    - [¿Qué es el renderizado condicional en React?](#qué-es-el-renderizado-condicional-en-react)
    - [¿Cómo puedes aplicar clases CSS a un componente en React y por qué no se puede usar `class`?](#cómo-puedes-aplicar-clases-css-a-un-componente-en-react-y-por-qué-no-se-puede-usar-class)
    - [¿Cómo puedes aplicar estilos en línea a un componente en React?](#cómo-puedes-aplicar-estilos-en-línea-a-un-componente-en-react)
    - [¿Cómo puedo aplicar estilos de forma condicional a un componente en React?](#cómo-puedo-aplicar-estilos-de-forma-condicional-a-un-componente-en-react)
    - [¿Qué es el renderizado de listas en React?](#qué-es-el-renderizado-de-listas-en-react)
    - [¿Cómo puedes escribir comentarios en React?](#cómo-puedes-escribir-comentarios-en-react)
    - [¿Cómo añadir un evento a un componente en React?](#cómo-añadir-un-evento-a-un-componente-en-react)
    - [¿Cómo puedo pasar un parámetro a una función que maneja un evento en React?](#cómo-puedo-pasar-un-parámetro-a-una-función-que-maneja-un-evento-en-react)
    - [¿Qué es el estado en React?](#qué-es-el-estado-en-react)
    - [¿Qué son los hooks?](#qué-son-los-hooks)
    - [¿Qué hace el hook `useState`?](#qué-hace-el-hook-usestate)
    - [¿Qué hace el hook `useReducer`?](#qué-hace-el-hook-usereducer)
    - [¿Qué significa la expresión "subir el estado"?](#qué-significa-la-expresión-subir-el-estado)
    - [¿Qué hace el hook `useEffect`?](#qué-hace-el-hook-useeffect)
    - [Explica casos de uso del hook `useEffect`](#explica-casos-de-uso-del-hook-useeffect)
    - [Cómo suscribirse a un evento en `useEffect`](#cómo-suscribirse-a-un-evento-en-useeffect)
    - [¿Qué hace el hook `useId`?](#qué-hace-el-hook-useid)
    - [¿Cómo podemos ejecutar código cuando el componente se monta?](#cómo-podemos-ejecutar-código-cuando-el-componente-se-monta)
    - [¿Qué son los Fragments en React?](#qué-son-los-fragments-en-react)
    - [¿Por qué es recomendable usar Fragment en vez de un div?](#por-qué-es-recomendable-usar-fragment-en-vez-de-un-div)
    - [¿Qué es el Compound Components Pattern?](#qué-es-el-compound-components-pattern)
    - [¿Cómo puedes inicializar un proyecto de React desde cero?](#cómo-puedes-inicializar-un-proyecto-de-react-desde-cero)
    - [¿Qué es React DOM?](#qué-es-react-dom)
    - [¿Qué JavaScript necesito para aprender React?](#qué-javascript-necesito-para-aprender-react)
      - [JavaScript que necesitas para aprender React](#javascript-que-necesitas-para-aprender-react)
      - [EcmaScript Modules o ESModules](#ecmascript-modules-o-esmodules)
      - [Operador condicional (ternario)](#operador-condicional-ternario)
      - [Funciones flecha o Arrow Functions](#funciones-flecha-o-arrow-functions)
      - [Parámetros predeterminados (default values)](#parámetros-predeterminados-default-values)
      - [Template Literals](#template-literals)
      - [Propiedades abreviadas](#propiedades-abreviadas)
      - [La desestructuración](#la-desestructuración)
      - [Métodos de Array](#métodos-de-array)
      - [Sintaxis Spread](#sintaxis-spread)
      - [Operador Rest](#operador-rest)
      - [Encadenamiento opcional (Optional Chaining)](#encadenamiento-opcional-optional-chaining)
    - [¿Qué es el Virtual DOM?](#qué-es-el-virtual-dom)
    - [¿Por qué no se debe mutar el estado directamente en React?](#por-qué-no-se-debe-mutar-el-estado-directamente-en-react)
    - [¿Qué es la composición de componentes y por qué React la prefiere a la herencia?](#qué-es-la-composición-de-componentes-y-por-qué-react-la-prefiere-a-la-herencia)
  - [Intermedio](#intermedio)
    - [¿Cómo crear un hook personalizado (_custom hook_)?](#cómo-crear-un-hook-personalizado-custom-hook)
    - [¿Cuántos `useEffect` puede tener un componente?](#cuántos-useeffect-puede-tener-un-componente)
    - [¿Cómo podemos ejecutar código cuando el componente se desmonta del árbol?](#cómo-podemos-ejecutar-código-cuando-el-componente-se-desmonta-del-árbol)
    - [Cómo puedes cancelar una petición a una API en `useEffect` correctamente](#cómo-puedes-cancelar-una-petición-a-una-api-en-useeffect-correctamente)
    - [¿Cuáles son las reglas de los hooks en React?](#cuáles-son-las-reglas-de-los-hooks-en-react)
    - [¿Qué diferencia hay entre `useEffect` y `useLayoutEffect`?](#qué-diferencia-hay-entre-useeffect-y-uselayouteffect)
    - [¿Qué son mejores los componentes de clase o los componentes funcionales?](#qué-son-mejores-los-componentes-de-clase-o-los-componentes-funcionales)
    - [¿Cómo mantener los componentes puros y qué ventajas tiene?](#cómo-mantener-los-componentes-puros-y-qué-ventajas-tiene)
    - [¿Qué es la hidratación (hydration) en React?](#qué-es-la-hidratación-hydration-en-react)
    - [¿Qué es el Server Side Rendering y qué ventajas tiene?](#qué-es-el-server-side-rendering-y-qué-ventajas-tiene)
    - [¿Cómo puedes crear un Server Side Rendering con React desde cero?](#cómo-puedes-crear-un-server-side-rendering-con-react-desde-cero)
    - [¿Puedes poner un ejemplo de efectos colaterales en React?](#puedes-poner-un-ejemplo-de-efectos-colaterales-en-react)
    - [¿Qué diferencia hay entre componentes controlados y no controlados? ¿Qué ventajas y desventajas tienen?](#qué-diferencia-hay-entre-componentes-controlados-y-no-controlados-qué-ventajas-y-desventajas-tienen)
    - [¿Qué son los High Order Components (HOC)?](#qué-son-los-high-order-components-hoc)
    - [¿Qué son las render props?](#qué-son-las-render-props)
    - [¿Por qué no podemos usar un `if` en el renderizado de un componente?](#por-qué-no-podemos-usar-un-if-en-el-renderizado-de-un-componente)
    - [¿Por qué debemos utilizar una función para actualizar el estado de React?](#por-qué-debemos-utilizar-una-función-para-actualizar-el-estado-de-react)
    - [¿Qué es el ciclo de vida de un componente en React?](#qué-es-el-ciclo-de-vida-de-un-componente-en-react)
    - [¿Por qué puede ser mala práctica usar el `index` como key en un listado de React?](#por-qué-puede-ser-mala-práctica-usar-el-index-como-key-en-un-listado-de-react)
    - [¿Para qué sirve el hook `useMemo`?](#para-qué-sirve-el-hook-usememo)
    - [¿Es buena idea usar siempre `useMemo` para optimizar nuestros componentes?](#es-buena-idea-usar-siempre-usememo-para-optimizar-nuestros-componentes)
    - [¿Para qué sirve el hook `useCallback`?](#para-qué-sirve-el-hook-usecallback)
    - [¿Es buena idea usar siempre `useCallback` para optimizar nuestros componentes?](#es-buena-idea-usar-siempre-usecallback-para-optimizar-nuestros-componentes)
    - [¿Cuál es la diferencia entre `useCallback` y `useMemo`?](#cuál-es-la-diferencia-entre-usecallback-y-usememo)
    - [¿Qué son las refs en React?](#qué-son-las-refs-en-react)
    - [¿Cómo funciona el hook `useRef`?](#cómo-funciona-el-hook-useref)
    - [¿Qué hace el hook `useLayoutEffect`?](#qué-hace-el-hook-uselayouteffect)
      - [Orden de ejecución del `useLayoutEffect`](#orden-de-ejecución-del-uselayouteffect)
    - [¿Qué son los componentes _stateless_?](#qué-son-los-componentes-stateless)
    - [¿Cómo puedes prevenir el comportamiento por defecto de un evento en React?](#cómo-puedes-prevenir-el-comportamiento-por-defecto-de-un-evento-en-react)
    - [¿Qué es el `StrictMode` en React?](#qué-es-el-strictmode-en-react)
    - [¿Por qué es recomendable exportar los componentes de React de forma nombrada?](#por-qué-es-recomendable-exportar-los-componentes-de-react-de-forma-nombrada)
    - [¿Cómo puedes exportar múltiples componentes de un mismo archivo?](#cómo-puedes-exportar-múltiples-componentes-de-un-mismo-archivo)
    - [¿Cómo puedo importar de forma dinámica un componente en React?](#cómo-puedo-importar-de-forma-dinámica-un-componente-en-react)
    - [¿Cuando y por qué es recomendable importar componentes de forma dinámica?](#cuando-y-por-qué-es-recomendable-importar-componentes-de-forma-dinámica)
    - [¿Sólo se pueden cargar componentes de forma dinámica si se exportan por defecto?](#sólo-se-pueden-cargar-componentes-de-forma-dinámica-si-se-exportan-por-defecto)
    - [¿Qué es el contexto en React? ¿Cómo puedo crearlo y consumirlo?](#qué-es-el-contexto-en-react-cómo-puedo-crearlo-y-consumirlo)
    - [¿Qué es el `SyntheticEvent` en React?](#qué-es-el-syntheticevent-en-react)
    - [¿Qué es `flushSync` en React?](#qué-es-flushsync-en-react)
    - [¿Qué son los Error Boundaries en React?](#qué-son-los-error-boundaries-en-react)
    - [¿Qué son las Forward Refs?](#qué-son-las-forward-refs)
    - [¿Cómo puedo validar el tipo de mis props?](#cómo-puedo-validar-el-tipo-de-mis-props)
    - [¿Cómo puedo validar las propiedades de un objeto con PropTypes?](#cómo-puedo-validar-las-propiedades-de-un-objeto-con-proptypes)
    - [¿Cómo puedo validar las propiedades de un array con PropTypes?](#cómo-puedo-validar-las-propiedades-de-un-array-con-proptypes)
    - [¿Cómo puedo inyectar HTML directamente en un componente de React?](#cómo-puedo-inyectar-html-directamente-en-un-componente-de-react)
    - [¿Por qué puede ser mala idea pasar siempre todas las props de un objeto a un componente?](#por-qué-puede-ser-mala-idea-pasar-siempre-todas-las-props-de-un-objeto-a-un-componente)
    - [¿Cuál es el propósito del atributo "key" en React y por qué es importante usarlo correctamente al renderizar listas de elementos?](#cuál-es-el-propósito-del-atributo-key-en-react-y-por-qué-es-importante-usarlo-correctamente-al-renderizar-listas-de-elementos)
    - [¿Para qué sirve el hook `useTransition` y cuándo deberías usarlo?](#para-qué-sirve-el-hook-usetransition-y-cuándo-deberías-usarlo)
    - [¿Para qué sirve el hook `useActionState`?](#para-qué-sirve-el-hook-useactionstate)
    - [¿Qué problema resuelve el hook `useOptimistic`?](#qué-problema-resuelve-el-hook-useoptimistic)
    - [¿Cómo funciona el hook `useFormStatus` y qué aporta junto a las Server Actions?](#cómo-funciona-el-hook-useformstatus-y-qué-aporta-junto-a-las-server-actions)
    - [¿Qué es el hook `useFormState` y cuándo conviene usarlo?](#qué-es-el-hook-useformstate-y-cuándo-conviene-usarlo)
    - [¿Qué son las Server Actions y cómo se usan con formularios en React?](#qué-son-las-server-actions-y-cómo-se-usan-con-formularios-en-react)
    - [¿Cuál es la diferencia entre la prop `action` y el atributo `formAction` en React/Next.js?](#cuál-es-la-diferencia-entre-la-prop-action-y-el-atributo-formaction-en-reactnextjs)
    - [¿Qué diferencia hay entre componentes de servidor y componentes de cliente en React/Next.js?](#qué-diferencia-hay-entre-componentes-de-servidor-y-componentes-de-cliente-en-reactnextjs)
    - [¿Para qué sirve el hook `useSyncExternalStore`?](#para-qué-sirve-el-hook-usesyncexternalstore)
    - [¿Cómo funciona `React.memo` y cuándo es útil?](#cómo-funciona-reactmemo-y-cuándo-es-útil)
    - [¿Qué diferencia hay entre `ReactDOM.render`, `createRoot` y `hydrateRoot`?](#qué-diferencia-hay-entre-reactdomrender-createroot-y-hydrateroot)
    - [¿Qué provoca un re-render en un componente de React?](#qué-provoca-un-re-render-en-un-componente-de-react)
    - [¿Qué es el batching de actualizaciones de estado en React?](#qué-es-el-batching-de-actualizaciones-de-estado-en-react)
    - [¿Qué es `Suspense` en React y para qué se usa?](#qué-es-suspense-en-react-y-para-qué-se-usa)
    - [¿Qué es la reconciliación (reconciliation) en React?](#qué-es-la-reconciliación-reconciliation-en-react)
    - [¿Qué es el estado derivado y por qué conviene calcularlo en el render?](#qué-es-el-estado-derivado-y-por-qué-conviene-calcularlo-en-el-render)
    - [¿Qué es una *stale closure* y cómo afecta a los hooks?](#qué-es-una-stale-closure-y-cómo-afecta-a-los-hooks)
    - [¿Cómo puedes evitar re-renders innecesarios al usar Context?](#cómo-puedes-evitar-re-renders-innecesarios-al-usar-context)
    - [¿Qué es `React.lazy` y cómo se combina con `Suspense`?](#qué-es-reactlazy-y-cómo-se-combina-con-suspense)
    - [¿Qué es `startTransition` y en qué se diferencia de actualizar el estado de forma normal?](#qué-es-starttransition-y-en-qué-se-diferencia-de-actualizar-el-estado-de-forma-normal)
    - [¿En React 19 se necesita todavía `forwardRef`?](#en-react-19-se-necesita-todavía-forwardref)
  - [Experto](#experto)
    - [¿Es React una biblioteca o un framework? ¿Por qué?](#es-react-una-biblioteca-o-un-framework-por-qué)
    - [¿Para qué sirve el hook `useImperativeHandle`?](#para-qué-sirve-el-hook-useimperativehandle)
    - [¿Para qué sirve el método `cloneElement` de React?](#para-qué-sirve-el-método-cloneelement-de-react)
    - [¿Qué son los portales en React?](#qué-son-los-portales-en-react)
    - [¿Por qué `StrictMode` renderiza dos veces la aplicación?](#por-qué-strictmode-renderiza-dos-veces-la-aplicación)
    - [¿Qué problemas crees que pueden aparecer en una aplicación al querer visualizar listas de miles/millones de datos?](#qué-problemas-crees-que-pueden-aparecer-en-una-aplicación-al-querer-visualizar-listas-de-milesmillones-de-datos)
    - [¿Cómo puedes abortar una petición fetch con `useEffect` en React?](#cómo-puedes-abortar-una-petición-fetch-con-useeffect-en-react)
    - [¿Qué solución/es implementarías para evitar problemas de rendimiento al trabajar con listas de miles/millones de datos?](#qué-soluciónes-implementarías-para-evitar-problemas-de-rendimiento-al-trabajar-con-listas-de-milesmillones-de-datos)
      - [Pagination](#pagination)
      - [Virtualization](#virtualization)
    - [¿Qué es el hook `useDebugValue`?](#qué-es-el-hook-usedebugvalue)
    - [¿Qué es el `Profiler` en React?](#qué-es-el-profiler-en-react)
    - [¿Cómo puedes acceder al evento nativo del navegador en React?](#cómo-puedes-acceder-al-evento-nativo-del-navegador-en-react)
    - [¿Cómo puedes registrar un evento en la fase de captura en React?](#cómo-puedes-registrar-un-evento-en-la-fase-de-captura-en-react)
    - [¿Cómo puedes mejorar el rendimiento del Server Side Rendering en React para evitar que bloquee el hilo principal?](#cómo-puedes-mejorar-el-rendimiento-del-server-side-rendering-en-react-para-evitar-que-bloquee-el-hilo-principal)
    - [¿Qué diferencia hay entre `renderToStaticNodeStream()` y `renderToPipeableStream()`?](#qué-diferencia-hay-entre-rendertostaticnodestream-y-rendertopipeablestream)
    - [¿Para qué sirve el hook `useDeferredValue`?](#para-qué-sirve-el-hook-usedeferredvalue)
    - [¿Para qué sirve el método `renderToReadableStream()`?](#para-qué-sirve-el-método-rendertoreadablestream)
    - [¿Qué es la función `use` en React y para qué se utiliza?](#qué-es-la-función-use-en-react-y-para-qué-se-utiliza)
    - [¿Para qué sirve el hook `useInsertionEffect`?](#para-qué-sirve-el-hook-useinsertioneffect)
    - [¿Cómo se complementan `useMemo`, `useCallback`, `useTransition` y `useDeferredValue` para optimizar el rendimiento?](#cómo-se-complementan-usememo-usecallback-usetransition-y-usedeferredvalue-para-optimizar-el-rendimiento)
    - [¿Qué es Concurrent React y qué problemas resuelve?](#qué-es-concurrent-react-y-qué-problemas-resuelve)
    - [¿Qué es React Fiber?](#qué-es-react-fiber)
    - [¿Qué es el React Compiler y qué ventajas aporta?](#qué-es-el-react-compiler-y-qué-ventajas-aporta)
    - [¿Cómo puedo hacer testing de un componente?](#cómo-puedo-hacer-testing-de-un-componente)
    - [¿Cómo puedo hacer testing de un hook?](#cómo-puedo-hacer-testing-de-un-hook)
    - [¿Qué es Flux?](#qué-es-flux)
  - [Errores Típicos en React](#errores-típicos-en-react)
    - [¿Qué quiere decir: Warning: Each child in a list should have a unique key prop?](#qué-quiere-decir-warning-each-child-in-a-list-should-have-a-unique-key-prop)
    - [React Hook useXXX is called conditionally. React Hooks must be called in the exact same order in every component render](#react-hook-usexxx-is-called-conditionally-react-hooks-must-be-called-in-the-exact-same-order-in-every-component-render)
    - [Can’t perform a React state update on an unmounted component](#cant-perform-a-react-state-update-on-an-unmounted-component)
    - [Too many re-renders. React limits the number of renders to prevent an infinite loop](#too-many-re-renders-react-limits-the-number-of-renders-to-prevent-an-infinite-loop)
    - [¿Qué diferencia existe entre Shadow DOM y Virtual DOM?](#qué-diferencia-existe-entre-shadow-dom-y-virtual-dom)
    - [¿Qué es el Binding?](#qué-es-el-binding)

---

### Principiante

#### ¿Qué es React?

**React es una biblioteca de JavaScript de código abierto para construir interfaces de usuario.** Está basada en la componetización de la UI: la interfaz se divide en componentes independientes que pueden tener estado local y recibir datos por props. Cuando cambian los datos relevantes de un componente, React vuelve a renderizar la interfaz.

Esto hace que React sea una herramienta muy útil para construir interfaces complejas, ya que permite dividir la interfaz en piezas más pequeñas y reutilizables.

Fue creada en 2011 por Jordan Walke, un ingeniero de software que trabajaba en Facebook y que quería simplificar la forma de crear interfaces de usuario complejas.

Es una biblioteca muy popular y es usada por muchas empresas como Facebook, Netflix, Airbnb, Twitter, Instagram, etc.

Enlaces de interés:

- [Curso de React.js](https://midu.link/react)
- [Documentación oficial de React en Español](https://es.reactjs.org/)
- [Introduction to React.js de Facebook (2013)](https://www.youtube.com/watch?v=XxVg_s8xAms)
- [Documentación oficial de React actualizada](https://beta.reactjs.org/) en inglés

**[⬆ Volver a índice](#índice)**

---

#### ¿Cuáles son las características principales de React?

Las características principales de React son:

- **Componentes**: React está basado en la componetización de la UI. La interfaz se divide en componentes independientes, que contienen su propio estado. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz.

- **Virtual DOM**: React usa un DOM virtual para renderizar los componentes. El DOM virtual es una representación en memoria del DOM real. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz. En lugar de modificar el DOM real, React modifica el DOM virtual y, a continuación, compara el DOM virtual con el DOM real. De esta forma, React sabe qué cambios se deben aplicar al DOM real.

- **Declarativo**: React es declarativo, lo que significa que no se especifica cómo se debe realizar una tarea, sino qué se debe realizar. Esto hace que el código sea más fácil de entender y de mantener.

- **Unidireccional**: React es unidireccional, lo que significa que los datos fluyen en una sola dirección. Los datos fluyen de los componentes padres a los componentes hijos.

- **Universal**: React se puede ejecutar tanto en el cliente como en el servidor. Además, puedes usar React Native para crear aplicaciones nativas para Android e iOS.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué significa exactamente que sea declarativo?

Que React sea declarativo significa que describimos el resultado que queremos en la interfaz para un estado concreto, en vez de programar manualmente cada paso para manipular el DOM.

Es decir: declaramos el "qué" y React se ocupa del "cómo".

Esto aporta ventajas importantes:

- Hace el código más predecible y fácil de mantener.
- Reduce errores derivados de manipulación imperativa del DOM.
- Permite razonar la UI como una función del estado.

Un ejemplo entre declarativo e imperativo:

```js
// Declarativo
const element = <h1>Hello, world</h1>

// Imperativo
const element = document.createElement('h1')
element.innerHTML = 'Hello, world'
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es un componente?

Un componente es la unidad fundamental de construcción en React. Es una pieza de interfaz autónoma y reutilizable que encapsula su estructura (JSX), su comportamiento (eventos y lógica), y en muchos casos también su estado.

Pensar en componentes es pensar en términos de composición: en lugar de construir una pantalla como un bloque monolítico, la dividimos en partes pequeñas y bien definidas (por ejemplo: `Header`, `Sidebar`, `UserCard`, `Button`). Esta forma de trabajar hace que la aplicación sea más mantenible, escalable y fácil de testear.

Un componente puede:

- Recibir datos de entrada mediante props.
- Renderizar una salida visual en función de esos datos.
- Gestionar estado interno cuando necesita recordar información entre renderizados.
- Reutilizarse en distintos contextos sin duplicar lógica.

En React moderno, los componentes se escriben principalmente como funciones. Históricamente también se han usado clases, y es importante conocerlas para leer código legado, pero hoy el enfoque recomendado es funcional junto a hooks.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es JSX?

React usa JSX para declarar qué debe renderizar. JSX es una extensión de JavaScript que permite escribir un código más cercano visualmente a HTML, que mejora la legibilidad del código y hace que sea más fácil de entender.

Sin JSX, deberíamos usar `React.createElement` para crear los elementos de la interfaz manualmente de esta forma:

```js
import { createElement } from 'react'

function Hello() {
  // un componente es una función! 👀
  return React.createElement(
    'h1', // elemento a renderizar
    null, // atributos del elemento
    'Hola Mundo 👋🌍!' // contenido del elemento
  )
}
```

Esto es muy tedioso y poco legible. Por eso, React usa JSX para declarar qué debe renderizar. Por eso usamos JSX de esta forma:

```jsx
function Hello() {
  return <h1>Hola Mundo 👋🌍!</h1>
}
```

Ambos códigos son equivalentes.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo se transforma el JSX?

**El JSX se transforma en código JavaScript compatible en el navegador usando un _transpilador_ o _compilador_**. El más famoso es a día de hoy Babel, que utiliza una serie de plugins para ser compatible con la transformación, pero existen otros como SWC.

Puedes ver cómo se transforma el JSX en el [playground de código de Babel](https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABACQKYBt10QCgJSIDeAUIogE6pQjlIA8AFgIwB8yc6AhogLLgAm2QLwbgaR3APBuBYfYCEdAPTMWxAL5A&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.25.3&externalPlugins=&assumptions=%7B%7D).

Hay casos especiales en los que un transpilador no es necesario. Por ejemplo, **Deno tiene soporte nativo para la sintaxis JSX** y no es necesario transformar el código para hacerlo compatible.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cuál es la diferencia entre componente y elemento en React?

Un componente es una función o clase que recibe props y devuelve un elemento.
Un elemento es un objeto que representa un nodo del DOM o una instancia de un componente de React.

```js
// Elemento que representa un nodo del DOM
{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

// Elemento que representa una instancia de un componente
{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo crear un componente en React?

En React, un componente es una función (o, de forma histórica, una clase) que describe una parte de la interfaz.

Hoy en día, el enfoque recomendado es crear componentes funcionales:

```jsx
function HelloWorld() {
  return <h1>Hello World!</h1>
}
```

También puedes encontrarte componentes de clase en código legado:

```jsx
import { Component } from 'react'

class HelloWorld extends Component {
  render() {
    return <h1>Hello World!</h1>
  }
}
```

Reglas básicas al crear componentes:

- El nombre debe empezar en mayúscula para que React lo interprete como componente y no como etiqueta HTML.
- Debe ser reutilizable y tener una responsabilidad clara.
- Debe recibir datos por props cuando necesite configuración externa.

Como criterio de arquitectura, cuanto más pequeños y específicos sean tus componentes, más fácil será mantener y escalar la aplicación.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son las props en React?

Las props son las propiedades de un componente. Son datos que se pasan de un componente a otro. Por ejemplo, si tienes un componente `Button` que muestra un botón, puedes pasarle una prop `text` para que el botón muestre ese texto:

```jsx
function Button(props) {
  return <button>{props.text}</button>
}
```

Podríamos entender que el componente `Button` es un botón genérico, y que la prop `text` es el texto que se muestra en el botón. Así estamos creando un componente reutilizable.

Debe considerarse además que al usar cualquier expresión JavaScript dentro de JSX debe envolverlos con `{}`, en este caso el objeto `props`, de otra forma JSX lo considerará como texto plano.

Para usarlo, indicamos el nombre del componente y le pasamos las props que queremos:

```jsx
<Button text="Haz clic aquí" />
<Button text="Seguir a @midudev" />
```

Las props son una forma de parametrizar nuestros componentes igual que hacemos con las funciones. Podemos pasarle cualquier tipo de dato a un componente, incluso otros componentes.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es y para qué sirve la prop `children` en React?

La prop `children` es una prop especial que se pasa a los componentes. Es un objeto que contiene los elementos que envuelve un componente.

Por ejemplo, si tenemos un componente `Card` que muestra una tarjeta con un título y un contenido, podemos usar la prop `children` para mostrar el contenido:

```jsx
function Card(props) {
  return (
    <div className='card'>
      <h2>{props.title}</h2>
      <div>{props.children}</div>
    </div>
  )
}
```

Y luego podemos usarlo de la siguiente forma:

```jsx
<Card title='Título de la tarjeta'>
  <p>Contenido de la tarjeta</p>
</Card>
```

En este caso, la prop `children` contiene el elemento `<p>Contenido de la tarjeta</p>`.

Conocer y saber usar la prop `children` es muy importante para crear componentes reutilizables en React.

**[⬆ Volver a índice](#índice)**

---

####  ¿Qué diferencia hay entre props y state?

Aunque ambos afectan al renderizado, cumplen funciones distintas:

- Las _props_ son datos de entrada que recibe un componente desde fuera (normalmente desde su componente padre). Dentro del componente receptor se tratan como inmutables.
- El _state_ es memoria interna del componente y representa datos que cambian con el tiempo por interacción del usuario o por lógica de negocio.

Una regla práctica para recordarlo:

- _props_ = configuración externa.
- _state_ = estado interno que evoluciona.

Entender esta diferencia es fundamental para diseñar componentes predecibles y mantener un flujo de datos unidireccional.

**[⬆ Volver a índice](#índice)**

---

#### ¿Se puede inicializar un estado con el valor de una prop? ¿Qué pasa si lo haces y qué hay que tener en cuenta?

Sí, se puede inicializar el estado con el valor de una prop. Pero hay que tener en cuenta que, si la prop cambia, el estado no se actualizará automáticamente. Esto es porque el estado se inicializa una vez, cuando el componente se monta por primera vez.

Por ejemplo, con componentes funcionales:

```jsx
const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <Count count={count} />
      <button onClick={() => setCount(count + 1)}>Aumentar</button>
    </div>
  )
}

const Count = ({ count }) => {
  const [number, setNumber] = useState(count)

  return <p>{number}</p>
}
```

En este caso, el componente `Count` inicializa su estado con el valor de la prop `count`. Pero si cambia el valor de la prop `count`, el estado no se actualizará automáticamente. Por lo que al hacer click, siempre veremos el número 0 en pantalla.

- [Código de ejemplo](https://stackblitz.com/edit/react-ts-cdf8n9?file=App.tsx)

En este ejemplo, lo mejor sería simplemente usar la prop `count` en el componente `Count` y así siempre se volvería a renderizar.

**Es una buena práctica evitar al máximo los estados de nuestros componentes y, siempre que se pueda, simplemente calcular el valor a mostrar a partir de las props.**

En el caso que necesites inicializar un estado con una prop, es una buena práctica añadir el prefijo de `initial` a la prop para indicar que es el valor inicial del estado y que luego no lo usaremos más:

```jsx
const Input = ({ initialValue }) => {
  const [value, setValue] = useState(initialValue)

  return <input value={value} onChange={e => setValue(e.target.value)} />
}
```

Es un error muy común pensar que la prop actualizará el estado, así que tenlo en cuenta.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el renderizado condicional en React?

El renderizado condicional es la forma de mostrar un componente u otro dependiendo de una condición.

Para hacer renderizado condicional en React usamos el operador ternario:

```jsx
function Button({ text }) {
  return text ? <button>{text}</button> : null
}
```

En este caso, si la prop `text` existe, se renderiza el botón. Si no existe, no se renderiza nada.

Es común encontrar implementaciones del renderizado condicional con el operador `&&`, del tipo:

```jsx
function List({ listArray }) {
  return listArray?.length && listArray.map(item => item)
}
```

Parece que tiene sentido... si el `length` es positivo (mayor a cero) pintamos el map. !Pues no! ❌ Cuidado, si tiene `length` de cero ya que se pintará en el navegador un 0.

Es preferible utilizar el operador ternario. _Kent C. Dodds_ tiene un artículo interesante hablando del tema. [Use ternaries rather than && in JSX](https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx)

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes aplicar clases CSS a un componente en React y por qué no se puede usar `class`?

Nota: aunque el enunciado hable de "componente", la prop `className` se aplica sobre los elementos JSX/HTML que el componente renderiza.

En React usamos la prop `className` para definir el valor del atributo `class` del HTML:

```jsx
function Button({ text }) {
  return <button className='button'>{text}</button>
}
```

Es decir, las clases que pones en `className` son clases HTML normales (pueden usarse para CSS, tests, selectores, utilidades, etc.). En JSX no se usa `class` porque es una palabra reservada en JavaScript, por eso React utiliza `className`.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes aplicar estilos en línea a un componente en React?

Nota: al igual que con `className`, el estilo en línea se asigna a elementos JSX/HTML renderizados por el componente.

Para aplicar estilos CSS en línea a un componente en React usamos la prop `style`. La diferencia de cómo lo haríamos con HTML, es que en React los estilos se pasan como un objeto y no como una cadena de texto (esto puede verse más claro con los dobles corchetes, los primeros para indicar que es una expresión JavaScript, y los segundos para crear el objeto):

```jsx
function Button({ text }) {
  return <button style={{ color: 'red', borderRadius: '2px' }}>{text}</button>
}
```

Fíjate que, además, los nombres de las propiedades CSS están en camelCase.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo aplicar estilos de forma condicional a un componente en React?

En la práctica, esa condición termina afectando a props de estilo (`style`, `className`) sobre los elementos renderizados por el componente.

Puedes aplicar estilos de forma condicional a un componente en React usando la prop `style` y un operador ternario:

```jsx
function Button({ text, primary }) {
  return <button style={{ color: primary ? 'red' : 'blue' }}>{text}</button>
}
```

En el caso anterior, si la prop `primary` es `true`, el botón tendrá el color rojo. Si no, tendrá el color azul.

También puedes seguir la misma mecánica usando clases. En este caso, usamos el operador ternario para decidir si añadir o no la clase:

```jsx
function Button({ text, primary }) {
  return <button className={primary ? 'button-primary' : ''}>{text}</button>
}
```

También podemos usar bibliotecas como `classnames`:

```jsx
import classnames from 'classnames'

function Button({ text, primary }) {
  return <button className={classnames('button', { primary })}>{text}</button>
}
```

En este caso, si la prop `primary` es `true`, se añadirá la clase `primary` al botón. Si no, no se añadirá. En cambio la clase `button` siempre se añadirá.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el renderizado de listas en React?

El renderizado de listas es la forma de iterar un array de elementos y renderizar elementos de React para cada uno de ellos.

Para hacer renderizado de listas en React usamos el método `map` de los arrays:

```jsx
function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}
```

En este caso, se renderiza una lista de elementos usando el componente `List`. El componente `List` recibe una prop `items` que es un array de objetos del tipo `[{ id: 1, name: "John Doe" }]`. El componente `List` renderiza un elemento `li` por cada elemento del array.

El elemento `li` tiene una prop `key` que es un identificador único para cada elemento. Esto es necesario para que React pueda identificar cada elemento de la lista y actualizarlo de forma eficiente. Más adelante hay una explicación más detallada sobre esto.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes escribir comentarios en React?

Si vas a escribir un comentario fuera del renderizado de un componente, puedes usar la sintaxis de comentarios de JavaScript sin problemas:

```jsx
function Button({ text }) {
  // Esto es un comentario
  /* Esto es un comentario
  de varias líneas */

  return <button>{text}</button>
}
```

Si vas a escribir un comentario dentro del renderizado de un componente, debes envolver el comentario en llaves y usar siempre la sintaxis de comentarios de bloque:

```jsx
function Button({ text }) {
  return (
    <button>
      {/* Esto es un comentario en el render */}
      {text}
    </button>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo añadir un evento a un componente en React?

De nuevo, estrictamente hablando, el evento se conecta en el elemento JSX renderizado (`button`, `input`, `form`, etc.), aunque lo configuremos desde el componente.

En React, los eventos se registran con props que siguen la convención `on` + nombre del evento en _camelCase_ (`onClick`, `onChange`, `onSubmit`, etc.).

La clave es pasar una función como manejador del evento, no ejecutar la función durante el render.

```jsx
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>
}
```

En este caso, `Button` recibe una prop `onClick` y delega en ella su comportamiento al hacer clic. Este patrón permite crear componentes más reutilizables y desacoplados.

Si necesitas añadir lógica intermedia (tracking, validaciones, etc.), puedes encapsularla en una función interna:

```jsx
function Button({ text, onClick }) {
  const handleClick = event => {
    // lógica previa
    onClick(event)
  }

  return <button onClick={handleClick}>{text}</button>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo pasar un parámetro a una función que maneja un evento en React?

Para pasar un parámetro a una función que maneja un evento en React podemos usar una función anónima:

```jsx
function Button({ id, text, onClick }) {
  return <button onClick={() => onClick(id)}>{text}</button>
}
```

Cuando el usuario hace clic en el botón, se ejecuta la función `onClick` pasándole como parámetro el valor de la prop `id`.

También puedes crear una función que ejecuta la función `onClick` pasándole el valor de la prop `id`:

```jsx
function Button({ id, text, onClick }) {
  const handleClick = event => {
    // handleClick recibe el evento original
    onClick(id)
  }

  return <button onClick={handleClick}>{text}</button>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el estado en React?

El estado es un objeto que contiene datos que pueden cambiar en el tiempo. En React, el estado se usa para controlar los cambios en la interfaz.

Para que entiendas el concepto, piensa en el interruptor de una habitación. Estos interruptores suelen tener dos estados: encendido y apagado. Cuando accionamos el interruptor y lo ponemos en `on` entonces la luz se enciende y cuando lo ponemos en `off` la luz se apaga.

Este mismo concepto se puede aplicar a la interfaz de usuario. Por ejemplo, el botón Me Gusta de Facebook tendría el estado de `meGusta` a `true` cuando el usuario le ha dado a Me Gusta y a `false` cuando no lo ha hecho.

No solo podemos tener en el estado valores booleanos, también podemos tener objetos, arrays, números, etc.

Por ejemplo, si tienes un componente `Counter` que muestra un contador, puedes usar el estado para controlar el valor del contador.

Para crear un estado en React usamos el hook `useState`:

```jsx
import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Aumentar</button>
    </div>
  )
}
```

Al usar el hook `useState` este devolverá un `array` de dos posiciones:

0. El valor del estado.
1. La función para cambiar el estado.

Suele usarse desestructuración para facilitar la lectura y ahorrarnos algunas líneas de código. Por otro lado, al pasarle un dato como parámetro al `useState` le estamos indicando su estado inicial.

Con un componente de clase, la creación del estado sería así:

```jsx
import { Component } from 'react'

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    return (
      <div>
        <p>Contador: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Aumentar
        </button>
      </div>
    )
  }
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son los hooks?

Los Hooks son funciones especiales de React que permiten usar estado, efectos y otras capacidades del framework dentro de componentes funcionales.

Antes de su aparición, estas capacidades se asociaban sobre todo a componentes de clase. Con hooks, el modelo funcional pasó a ser la opción principal.

Algunos hooks fundamentales son:

- `useState`: para estado local.
- `useEffect`: para sincronizar efectos secundarios.
- `useMemo` y `useCallback`: para optimización de cálculos y referencias.
- `useRef`: para referencias mutables o acceso al DOM.

Además, React permite crear _custom hooks_, que son una forma excelente de reutilizar lógica con estado entre componentes sin duplicar código.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué hace el hook `useState`?

El hook `useState` es utilizado para crear variables de estado, quiere decir que su valor es dinámico, que este puede cambiar en el tiempo y eso requiere una re-renderización del componente donde se utiliza

Recibe un parámetro:

- El valor inicial de nuestra variable de estado.

Devuelve un array con dos variables:

- En primer lugar tenemos la variable que contiene el valor
- La siguiente variable es una función set, requiere el nuevo valor del estado, y este modifica el valor de la variable que anteriormente mencionamos
- Cabe destacar que la función proporciona cómo parámetro el valor actual del propio estado. Ex: `setIsOpen(isOpen => !isOpen)`

En este ejemplo mostramos como el valor de `count` se inicializa en 0, y también se renderiza cada vez que el valor es modificado con la función `setCount` en el evento `onClick` del button:

```jsx
import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count => count + 1)}>Aumentar</button>
    </>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué hace el hook `useReducer`?

`useReducer` es un hook para gestionar estado cuando las transiciones son más complejas que un simple "setear valor".

Es especialmente útil cuando:

- El estado tiene varios campos relacionados.
- Hay varias acciones que modifican ese estado.
- Quieres centralizar la lógica de actualización en una única función (`reducer`).

Su firma básica es:

```jsx
const [state, dispatch] = useReducer(reducer, initialState)
```

- `state`: estado actual.
- `dispatch`: función para enviar acciones.
- `reducer(state, action)`: función pura que devuelve el siguiente estado.

Ejemplo:

```jsx
import { useReducer } from 'react'

const initialState = { count: 0 }

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return initialState
    default:
      return state
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <>
      <p>Contador: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </>
  )
}
```

`useState` suele ser más simple para casos sencillos; `useReducer` brilla cuando necesitas reglas de negocio más explícitas y escalables.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué significa la expresión "subir el estado"?

Cuando varios componentes necesitan compartir los mismos datos de un estado, entonces se recomienda elevar ese estado compartido hasta su ancestro común más cercano.

Dicho de otra forma. Si dos componentes hijos comparten los mismos datos de su padre, entonces mueve el estado al padre en lugar de mantener un estado local en sus hijos.

Para entenderlo, lo mejor es que lo veamos con un ejemplo. Imagina que tenemos una lista de regalos deseados y queremos poder añadir regalos y mostrar el total de regalos que hay en la lista.

```jsx
import { useState } from 'react'

export default function App() {
  return (
    <>
      <h1>Lista de regalos</h1>
      <GiftList />
      <TotalGifts />
    </>
  )
}

function GiftList() {
  const [gifts, setGifts] = useState([])

  const addGift = () => {
    const newGift = prompt('¿Qué regalo quieres añadir?')
    setGifts([...gifts, newGift])
  }

  return (
    <>
      <h2>Regalos</h2>
      <ul>
        {gifts.map(gift => (
          <li key={gift}>{gift}</li>
        ))}
      </ul>
      <button onClick={addGift}>Añadir regalo</button>
    </>
  )
}

function TotalGifts() {
  const [totalGifts, setTotalGifts] = useState(0)

  return (
    <>
      <h2>Total de regalos</h2>
      <p>{totalGifts}</p>
    </>
  )
}
```

¿Qué pasa si queremos que el total de regalos se actualice cada vez que añadimos un regalo? Como podemos ver, no es posible porque el estado de `totalGifts` está en el componente `TotalGifts` y no en el componente `GiftList`. Y como no podemos acceder al estado de `GiftList` desde `TotalGifts`, no podemos actualizar el estado de `totalGifts` cuando añadimos un regalo.

Tenemos que subir el estado de `gifts` al componente padre `App` y le pasaremos el número de regalos como prop al componente `TotalGifts`.

```jsx
import { useState } from 'react'

export default function App() {
  const [gifts, setGifts] = useState([])

  const addGift = () => {
    const newGift = prompt('¿Qué regalo quieres añadir?')
    setGifts([...gifts, newGift])
  }

  return (
    <>
      <h1>Lista de regalos</h1>
      <GiftList gifts={gifts} addGift={addGift} />
      <TotalGifts totalGifts={gifts.length} />
    </>
  )
}

function GiftList({ gifts, addGift }) {
  return (
    <>
      <h2>Regalos</h2>
      <ul>
        {gifts.map(gift => (
          <li key={gift}>{gift}</li>
        ))}
      </ul>
      <button onClick={addGift}>Añadir regalo</button>
    </>
  )
}

function TotalGifts({ totalGifts }) {
  return (
    <>
      <h2>Total de regalos</h2>
      <p>{totalGifts}</p>
    </>
  )
}
```

Con esto, lo que hemos hecho es _elevar el estado_. Lo hemos movido desde el componente `GiftList` al componente `App`. Ahora pasamos como prop los regalos al componente `GiftList` y una forma de actualizar el estado, y también hemos pasado como prop al componente `TotalGifts` el número de regalos.

- [Código de ejemplo](https://stackblitz.com/edit/react-ts-qitkys?file=App.tsx)

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué hace el hook `useEffect`?

El hook `useEffect` se usa para ejecutar código cuando se renderiza el componente o cuando cambian las dependencias del efecto.

Recibe dos parámetros:

- La función que se ejecutará al cambiar las dependencias o al renderizar el componente.
- Un array de dependencias. Si cambia el valor de alguna dependencia, ejecutará la función.

En este ejemplo mostramos un mensaje en consola cuando carga el componente y cada vez que cambia el valor de `count`:

```jsx
import { useEffect, useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('El contador se ha actualizado')
  }, [count])

  return (
    <>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Aumentar</button>
    </>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### Explica casos de uso del hook `useEffect`

Podemos usar el hook `useEffect` de diferentes formas, tales como:

- Ejecutar código cuando se renderiza el componente, cuando cambian las dependencias del efecto o cuando se desmonta el componente.
- Por eso puede ser útil para hacer llamadas a APIs, ya que sea nada más montar el componente o cuando cambian las dependencias.
- Realizar tracking de eventos, como Google Analytics, para saber qué páginas visitan los usuarios.
- Podemos validar un formulario para que cada vez que cambie el estado, podamos actualizar la UI y mostrar dónde están los errores.
- Podemos suscribirnos a eventos del navegador, como por ejemplo el evento `resize` para saber cuando el usuario cambia el tamaño de la ventana.

**[⬆ Volver a índice](#índice)**

---

#### Cómo suscribirse a un evento en `useEffect`

Dentro de `useEffect` nos podemos suscribir a eventos del navegador, como el evento `resize` para saber cuando el usuario cambia el tamaño de la ventana. Es importante que nos desuscribamos cuando el componente se desmonte para evitar fugas de memoria. Para ello, tenemos que devolver una función dentro del `useEffect` que se ejecutará cuando el componente se desmonte.

```jsx
import { useEffect } from 'react'

function Window() {
  useEffect(() => {
    const handleResize = () => {
      console.log('La ventana se ha redimensionado')
    }

    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return <p>Abre la consola y redimensiona la ventana</p>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué hace el hook `useId`?

`useId` es un hook para generar identificadores únicos que se pueden pasar a los atributos de las etiquetas HTML y es especialmente útil para accesibilidad.

Llama `useId` en el nivel superior del componente para generar una ID única:

```jsx
import { useId } from 'react'
function PasswordField() {
  const passwordHintId = useId()
  // ...
```

A continuación, pasa el ID generado a diferentes atributos:

```jsx
<>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>
```

La etiqueta `aria-describedby` te permite especificar que dos etiquetas están relacionadas entre sí, puede generar una identificación única con useId donde incluso si `PasswordField` aparece varias veces en la pantalla, las identificaciones generadas no chocarán.

El ejemplo completo sería así:

```jsx
import { useId } from 'react'

function PasswordField() {
  const passwordHintId = useId()

  return (
    <>
      <label>
        Password:
        <input type='password' aria-describedby={passwordHintId} />
      </label>
      <p id={passwordHintId}>
        El password debe ser de 18 letras y contener caracteres especiales
      </p>
    </>
  )
}

export default function App() {
  return (
    <>
      <h2>Choose password</h2>
      <PasswordField />
      <h2>Confirm password</h2>
      <PasswordField />
    </>
  )
}
```

Como ves en `App` estamos usando el componente dos veces. Si pusieramos una id a mano, por ejemplo `password`, entonces la ID no sería única y quedaría duplicada. Por eso es importante que generes la ID automáticamente con `useId`.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo podemos ejecutar código cuando el componente se monta?

Podemos ejecutar código cuando el componente se monta usando el hook `useEffect` sin pasarle ninguna dependencia. En este caso, la función que se pasa como primer parámetro se ejecutará cuando el componente se monte.

```jsx
import { useEffect } from 'react'

function Component() {
  useEffect(() => {
    console.log('El componente se ha montado')
  }, [])

  return <p>Abre la consola y re-dimensiona la ventana</p>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son los Fragments en React?

Los _Fragments_ permiten agrupar varios elementos JSX sin añadir nodos extra al DOM.

En React, un componente debe devolver un único elemento raíz. `Fragment` resuelve ese requisito sin introducir un `div` adicional que pueda afectar al layout o a los estilos.

Para crear un Fragment en React usamos el componente `Fragment`:

```jsx
import { Fragment } from 'react'

function App() {
  return (
    <Fragment>
      <h1>Titulo</h1>
      <p>Párrafo</p>
    </Fragment>
  )
}
```

También podemos usar la sintaxis de abreviatura:

```jsx
function App() {
  return (
    <>
      <h1>Titulo</h1>
      <p>Párrafo</p>
    </>
  )
}
```

Si necesitas añadir una `key` (por ejemplo, al renderizar una lista), debes usar la versión explícita con `Fragment`:

```jsx
import { Fragment } from 'react'

function List({ items }) {
  return items.map(item => (
    <Fragment key={item.id}>
      <h2>{item.title}</h2>
      <p>{item.description}</p>
    </Fragment>
  ))
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Por qué es recomendable usar Fragment en vez de un div?

Las razones por las que es recomendable usar Fragment en vez de un `div` a la hora de envolver varios elementos son:

- Los `div` añaden un elemento extra al DOM, mientras que los Fragments no. Esto hace que el número de elementos HTML y la profundidad del DOM sea menor.
- Los elementos envueltos con Fragment son afectados directamente por las propiedades _flex_ o _grid_ de CSS de su elemento padre. Si usas un `div` es posible que tengas problemas con el alineamiento de los elementos.
- Los Fragments son más rápidos que los `div` ya que no tienen que ser renderizados.
- Los `div` aplican CSS por defecto (hace que lo que envuelve el `div` se comporte como un bloque al aplicar un `display: block`) mientras que los Fragment no aplican ningún estilo por defecto.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el Compound Components Pattern?

Es un patrón de diseño de componentes que se basa en crear un componente padre con un solo objetivo, proporcionarle a sus hijos las propiedades necesarias para que se rendericen sin problemas.

Permite una estructura declarativa a la hora de construir nuevos componentes, además ayuda a la lectura del código por su simplicidad y limpieza.

Un ejemplo de este diseño sería una lista que renderiza los elementos hijos:

```jsx
<List>
  <ListItem>Cat</ListItem>
  <ListItem>Dog</ListItem>
</List>
```

```jsx
const List = ({ children, ...props }) => <ul {...props}>{children}</ul>

const ListItem = ({ children, ...props }) => {
  return <li {...props}>{children}</li>
}

export { List, ListItem }
```

Este es un ejemplo sencillo, pero los componentes pueden ser tan complejos como quieras y tanto el padre como los hijos pueden tener sus propios estados.

Enlaces de interés:

- [Lleva tu React al siguiente nivel con Compound Pattern by dezkareid en el blog de Platzi](https://platzi.com/blog/lleva-tu-react-al-siguiente-nivel-con-compound-pattern/?utm_source=twitter&utm_medium=organic&utm_campaign=PLA_TW_BLOG_202205_react_compound_pattern)

- [Compound Components by Jenna Smith](https://jjenzz.com/compound-components) <strong>en inglés</strong>
- [Compound Components Lesson by Kent C. Dodds](https://egghead.io/lessons/react-write-compound-components) <strong>en inglés</strong>

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes inicializar un proyecto de React desde cero?

Existen diversas formas de inicializar un proyecto de React desde cero. Entre las más populares están:

- [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)

```bash
npm create vite@latest my-app -- --template react
```

- [Create React App](https://create-react-app.dev/docs/getting-started)

```bash
npx create-react-app my-app
```

> La opción más popular y recomendada hoy en día es Vite. <small>Fuente [npm trends](https://npmtrends.com/@vitejs/plugin-react-vs-create-react-app).</small>

Usando un Framework, entre las más populares están:

- [Nextjs](https://nextjs.org/docs/getting-started)

```bash
npx create-next-app@latest my-app
```

- [Gatsby](https://www.gatsbyjs.com/docs/quick-start/)

```bash
npm init gatsby
```

> La opción más popular y recomendada hoy en día es Nextjs. <small>Fuente [npm trends](https://npmtrends.com/gatsby-vs-next)</small>

Cada uno de ellos es un empaquetador de aplicaciones web. Se encargan de resolver las dependencias de tu proyecto, levantar un entorno de desarrollo que se refresca automáticamente con cada cambio y de empaquetar tu aplicación para producción con todos los archivos estáticos necesarios y mucho más.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es React DOM?

React DOM es la librería que se encarga de renderizar los componentes de React para el navegador. Hay que tener en cuenta que React es una biblioteca que se puede usar en diferentes entornos (dispositivos móviles, apps de escritorio, terminal...).

Mientras que la biblioteca de _React_, a secas, es el motor de creación de componentes, hooks, sistema de props y estado... _React DOM_ es la librería que se encarga de renderizar los componentes de React específicamente en el navegador.

_React Native_, por ejemplo, haría lo mismo, pero para dispositivos móviles.

**[⬆ Volver a índice](#índice)**

#### ¿Qué JavaScript necesito para aprender React?

##### JavaScript que necesitas para aprender React

**Para aprender y dominar React necesitas saber JavaScript.** A diferencia de otros frameworks y bibliotecas, como _Angular_ y _Vue_, que se basan en su propio _DSL_ (Domain-Specific Language), React usa una extensión de la sintaxis de JavaScript llamada _JSX_. Más adelante lo veremos en detalle pero, al final, no deja de ser azúcar sintáctico para escribir menos JavaScript.

**En React todo es JavaScript.** Para bien y para mal. Este libro da por sentados unos conocimientos previos del lenguaje de programación pero antes de empezar vamos a hacer un pequeño repaso por algunas de las características más importantes que necesitarás conocer.

**Si ya dominas JavaScript puedes saltarte este capítulo** y continuar con el libro, pero recuerda que siempre podrás revisar este capítulo como referencia.

##### EcmaScript Modules o ESModules

Los **EcmaScript Modules** es la forma nativa que tiene JavaScript para importar y exportar variables, funciones y clases entre diferentes ficheros. Hoy en día, especialmente si trabajamos con un empaquetador de aplicaciones como Webpack, vamos a estar trabajando constantemente con esta sintaxis.

Por un lado podemos crear módulos exportándolos por defecto:

```js
// sayHi.js
// exportamos por defecto el módulo sayHi
export default sayHi (message) {
    console.log(message)
}

// index.js
// este módulo lo podremos importar con el nombre que queramos
import sayHi from './sayHi.js'

// al ser el módulo exportado por defecto podríamos usar otro nombre
import miduHi from './sayHi.js'
```

También podemos hacer exportaciones nombradas de módulos, de forma que un módulo tiene un nombre asignado y para importarlo necesitamos usar exactamente el nombre usado al exportarlo:

```js
// sayHi.js
// podemos usar exportaciones nombradas para mejorar esto
export const sayHi = message => console.log(message)

// y se pueden hacer tantas exportaciones de módulos nombrados como queramos
export const anotherHi = msg => alert(msg)

// index.js
// ahora para importar estos módulos en otro archivo podríamos hacerlo así
import { sayHi, anotherHi } from './sayHi.js'
```

Los _imports_ que hemos visto hasta aquí se conocen como _imports estáticos_. Esto significa que ese módulo será cargado en el momento de la carga del archivo que lo importa.

También existen los _imports dinámicos_, de forma que podamos importar módulos que se carguen en el momento de la ejecución del programa o cuando nosotros decidamos (por ejemplo, como respuesta a un click).

```js
document.querySelector('button').addEventListener('click', () => {
  // los imports dinámicos devuelven una Promesa
  import('./sayHi.js').then(module => {
    // ahora podemos ejecutar el módulo que hemos cargado
    module.default('Hola')
  })
})
```

Los imports dinámicos son útiles también cuando trabajamos con empaquetadores como Webpack o Vite, ya que esto creará unos _chunks_ (fragmentos) que se cargarán fuera del bundle general. ¿El objetivo? Mejorar el rendimiento de la aplicación.

Existen más sintaxis para trabajar con módulos, pero con saber las que hemos visto ya sería suficiente para seguir el libro.

**¿Por qué es importante?**

Para empezar React te ofrece diferentes partes de su biblioteca a través de módulos que podrás importar. Además nuestros componentes los tendremos separados en ficheros y, cada uno de ellos, se podrá importar utilizando _ESModules_.

Además, por temas de optimización de rendimiento, podremos importar de forma dinámica componentes y así mejorar la experiencia de nuestros usuarios al necesitar cargar menos información para poder utilizar la página.

##### Operador condicional (ternario)

Las ternarias son una forma de realizar condiciones sin la necesidad de usar la sintaxis con `if`. Se podría decir que es una forma de atajo para evitar escribir tanto código.

```js
if (number % 2 === 0) {
  console.log('Es par')
} else {
  console.log('Es impar')
}

// usando ternaria
number % 2 === 0 ? console.log('Es par') : console.log('Es impar')
```

**¿Por qué es importante?**

En las interfaces gráficas es muy normal que, dependiendo del estado de la aplicación o los datos que nos lleguen, vamos a querer renderizar una cosa u otra en pantalla. Para realizar esto, en lugar de utilizar `if` se usan las ternarias ya que queda mucho más legible dentro del _JSX_.

##### Funciones flecha o Arrow Functions

Las _funciones flecha_ o _arrow function_ fueron añadidas a JavaScript en el estándar ECMAScript 6 (o ES2015). En principio parece que simplemente se trata de una sintaxis alternativa más simple a la hora de crear expresiones de funciones:

```js
const nombreDeLaFuncion = function (param1, param2) {
  // instrucciones de la función
}

const nombreDeLaFuncion = (param1, param2) => {
  // con arrow function
  // instrucciones de la función
}
```

Pero además del cambio de sintaxis existen otras características de las funciones flechas que se usan constantemente en React.

```js
// return implícito al escribir una sola línea
const getName = () => 'midudev'

// ahorro de parentésis para función de un parámetro
const duplicateNumber = num => num * 2

// se usan mucho como callback en funciones de arrays
const numbers = [2, 4, 6]
const newNumbers = numbers.map(n => n / 2)
console.log(newNumbers) // [1, 2, 3]
```

También tiene algunos cambios respecto al valor de `this` pero, aunque es aconsejable dominarlo, no es realmente necesario para poder seguir con garantías el libro.

**¿Por qué es importante?**

Aunque hace unos años con React se trabajaba principalmente con clases, desde la irrupción de los hooks en la versión 16.8 ya no se usan mucho. Esto hace que se usen mucho más funciones.

Las funciones flecha, además, puedes verlas fácilmente conviviendo dentro de tus componentes. Por ejemplo, a la hora de renderizar una lista de elementos ejecutarás el método `.map` del array y, como callback, seguramente usarás una función flecha anónima.

##### Parámetros predeterminados (default values)

En JavaScript puedes proporcionar valores por defecto a los parámetros de una función en caso que no se le pase ningún argumento.

```js
// al parámetro b le damos un valor por defecto de 1
function multiply(a, b = 1) {
  return a * b
}

// si le pasamos un argumento con valor, se ignora el valor por defecto
console.log(multiply(5, 2)) // 10

// si no le pasamos un argumento, se usa el valor por defecto
console.log(multiply(5)) // 5

// las funciones flecha también pueden usarlos
const sayHi = (msg = 'Hola React!') => console.log(msg)
sayHi() // 'Hola React!'
```

**¿Por qué es importante?**

En React existen dos conceptos muy importantes: **componentes y hooks**. No vamos a entrar en detalle ahora en ellos pero lo importante es que ambos son construidos con funciones.

Poder añadir valores por defecto a los parámetros de esas funciones en el caso que no venga ningún argumento **es clave** para poder controlar React con éxito.

Los componentes, por ejemplo, pueden no recibir parámetros y, pese a ello, seguramente vas a querer que tengan algún comportamiento por defecto. Lo podrás conseguir de esta forma.

##### Template Literals

Los template literals o plantillas de cadenas llevan las cadenas de texto al siguiente nivel permitiendo expresiones incrustadas en ellas.

```js
const inicio = 'Hola'
const final = 'React'

// usando una concatenación normal sería
const mensaje = inicio + ' ' + final

// con los template literals podemos evaluar expresiones
const mensaje = `${inicio} ${final}`
```

Como ves, para poder usar los template literals, necesitas usar el símbolo ```

Además, nos permiten utilizar cadenas de texto de más de una línea.

**¿Por qué es importante?**

En React esto se puede utilizar para diferentes cosas. No sólo es normal crear cadenas de texto para mostrar en la interfaz... también puede ser útil para crear clases para tus elementos HTML de forma dinámica. Verás que los template literales están en todas partes.

##### Propiedades abreviadas

Desde _ECMAScript 2015_ se puede iniciar un objeto utilizado nombre de propiedades abreviadas. Esto es que si quieres utilizar como valor una variable que tiene el mismo nombre que la key, entonces puedes indicar la inicialización una vez:

```js
const name = 'Miguel'
const age = 36
const book = 'React'

// antes haríamos esto
const persona = { name: name, age: age, book: book }

// ahora podemos hacer esto, sin repetir
const persona = { name, age, book }
```

**¿Por qué es importante?**

En React se trata muchas veces con objetos y siempre vamos a querer escribir el menor número de líneas posible para mantener nuestro código fácil de mantener y entender.

##### La desestructuración

La sintaxis de _desestructuración_ es una expresión de JavaScript que permite extraer valores de Arrays o propiedades de objetos en distintas variables.

```js
// antes
const array = [1, 2, 3]
const primerNumero = array[0]
const segundoNumero = array[1]

// ahora
const [primerNumero, segundoNumero] = array

// antes con objetos
const persona = { name: 'Miguel', age: 36, book: 'React' }
const name = persona.name
const age = persona.age

// ahora con objetos
const { age, name } = persona

// también podemos añadir valores por defecto
const { books = 2 } = persona
console.log(persona.books) // -> 2

// también funciona en funciones
const getName = ({ name }) => `El nombre es ${name}`
getName(persona)
```

**¿Por qué es importante?**

En React hay mucho código básico que da por sentado que conoces y dominas esta sintaxis. Piensa que los objetos y los arreglos son tipos de datos que son perfectos para guardar datos a representar en una interfaz. Así que poder tratarlos fácilmente te va a hacer la vida mucho más fácil.

##### Métodos de Array

Saber manipular arreglos en JavaScript es básico para considerar que se domina. Cada método realiza una operación en concreto y devuelve diferentes tipos de datos. Todos los métodos que veremos reciben un callback (función) que se ejecutará para cada uno de los elementos del array.

Vamos a revisar algunos de los métodos más usados:

```js
// tenemos este array con diferentes elementos
const networks = [
  {
    id: 'youtube',
    url: 'https://midu.tube',
    needsUpdate: true
  },
  {
    id: 'twitter',
    url: 'https://twitter.com/midudev',
    needsUpdate: true
  },
  {
    id: 'instagram',
    url: 'https://instagram.com/midu.dev',
    needsUpdate: false
  }
]

// con .map podemos transformar cada elemento
// y devolver un nuevo array
networks.map(singleNetwork => singleNetwork.url)
// Resultado:
  [
    'https://midu.tube',
    'https://twitter.com/midudev',
    'https://instagram.com/midu.dev'
  ]

// con .filter podemos filtrar elementos de un array que no
// pasen una condición determinada por la función que se le pasa.
// Devuelve un nuevo array.
networks.filter(singleNetwork => singleNetwork.needsUpdate === true)
// Resultado:
[
  { id: 'youtube', url: 'https://midu.tube', needsUpdate: true },
  { id: 'twitter', url: 'https://twitter.com/midudev', needsUpdate: true }
]

// con .find podemos buscar un elemento de un array que
// cumpla la condición definida en el callback
networks.find(singleNetwork => singleNetwork.id === 'youtube')
// Resultado:
{ id: 'youtube', url: 'https://midu.tube', needsUpdate: true }

// con .some podemos revisar si algún elemento del array cumple una condición
networks.some(singleNetwork => singleNetwork.id === 'tiktok') // false
networks.some(singleNetwork => singleNetwork.id === 'instagram') // true
```

**¿Por qué es importante?**

En React es muy normal almacenar los datos que tenemos que representar en la UI como array. Esto hace que muchas veces necesitemos tratarlos, filtrarlos o extraer información de ellos. Es primordial entender, conocer y dominar al menos estos métodos, ya que son los más usados.

##### Sintaxis Spread

La sintaxis de spread nos permite expandir un iterable o un objeto en otro lugar dónde se espere esa información. Para poder utilizarlo, necesitamos utilizar los tres puntos suspensivos `...` justo antes.

```js
const networks = ['Twitter', 'Twitch', 'Instagram']
const newNetwork = 'Tik Tok'
// creamos un nuevo array expandiendo el array networks y
// colocando al final el elemento newNetwork
// utilizando la sintaxis de spread
const allNetworks = [...networks, newNetwork]
console.log(allNetworks)
// -> [ 'Twitter', 'Twitch', 'Instagram', 'Tik Tok' ]
```

Esto mismo lo podemos conseguir con un objeto, de forma que podemos expandir todas sus propiedades en otro objeto de forma muy sencilla.

```js
const midu = { name: 'Miguel', twitter: '@midudev' }
const miduWithNewInfo = {
  ...midu,
  youtube: 'https://youtube.com/midudev',
  books: ['Aprende React'],
}
console.log(miduWithNewInfo)
// {
//   name: 'Miguel',
//   twitter: '@midudev',
//   youtube: 'https://youtube.com/midudev',
//   books: [ 'Aprende React' ]
// }
```

Es importante notar que esto hace una copia, sí, pero superficial. Si tuviéramos objetos anidados dentro del objeto entonces deberíamos tener en cuenta que podríamos mutar la referencia. Veamos un ejemplo.

```js
const midu = {
  name: 'Miguel',
  twitter: '@midudev',
  experience: {
    years: 18,
    focus: 'javascript',
  },
}

const miduWithNewInfo = {
  ...midu,
  youtube: 'https://youtube.com/midudev',
  books: ['Aprende React'],
}

// cambiamos un par de propiedades de la "copia" del objeto
miduWithNewInfo.name = 'Miguel Ángel'
miduWithNewInfo.experience.years = 19

// hacemos un console.log del objeto inicial
console.log(midu)

// en la consola veremos que el nombre no se ha modificado
// en el objeto original pero los años de experiencia sí
// ya que hemos mutado la referencia original
// {
//   name: 'Miguel',
//   twitter: '@midudev',
//   experience: { years: 19, focus: 'javascript' }
// }
```

**¿Por qué es importante?**

En React es muy normal tener que añadir nuevos elementos a un array o crear nuevos objetos sin necesidad de mutarlos. El operador Rest nos puede ayudar a conseguir esto. Si no conoces bien el concepto de valor y referencia en JavaScript, sería conveniente que lo repases.

##### Operador Rest

La sintaxis `...` hace tiempo que funciona en JavaScript en los parámetros de una función. A esta técnica se le llamaba _parámetros rest_ y nos permitía tener un número indefinido de argumentos en una función y poder acceder a ellos después como un array.

```js
function suma(...allArguments) {
  return allArguments.reduce((previous, current) => {
    return previous + current
  })
}
```

Ahora el operador rest también se puede utilizar para agrupar el resto de propiedades un objeto o iterable. Esto puede ser útil para extraer un elemento en concreto del objeto o el iterable y crear una copia superficial del resto en una nueva variable.

```js
const midu = {
  name: 'Miguel',
  twitter: '@midudev',
  experience: {
    years: 18,
    focus: 'javascript',
  },
}

const { name, ...restOfMidu } = midu

console.log(restOfMidu)
// -> {
//   twitter: '@midudev',
//   experience: {
//     years: 18,
//     focus: 'javascript'
//   }
// }
```

También podría funcionar con arrays:

```js
const [firstNumber, ...restOfNumbers] = [1, 2, 3]
console.log(firstNumber) // -> 1
console.log(restOfNumbers) // -> [2, 3]
```

**¿Por qué es importante?**

Es una forma interesante de _eliminar_ (de forma figurada) una propiedad de un objeto y creando una copia superficial del resto de propiedades. A veces puede ser interesante para extraer la información que queremos de unos parámetros y dejar el resto en un objeto que pasaremos hacia otro nivel.

##### Encadenamiento opcional (Optional Chaining)

El operador de encadenamiento opcional `?.` te permite leer con seguridad el valor de una propiedad que está anidada dentro de diferentes niveles de un objeto.

De esta forma, en lugar de revisar si las propiedades existen para poder acceder a ellas, lo que hacemos es usar el encadenamiento opcional.

```js
const author = {
  name: 'Miguel',
  libro: {
    name: 'Aprendiendo React',
  },
  writeBook() {
    return 'Writing!'
  },
}

// sin optional chaining
author === null || author === undefined
  ? undefined
  : author.libro === null || author.libro === undefined
    ? undefined
    : author.libro.name

// con optional chaining
author?.libro?.name
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
// ❌ Mal: mutación directa
const [user, setUser] = useState({ name: 'midu', age: 30 })
user.age = 31
setUser(user) // misma referencia → React puede no re-renderizar

// ✅ Bien: nueva referencia
setUser({ ...user, age: 31 })
// o con función actualizadora
setUser(prev => ({ ...prev, age: prev.age + 1 }))
```

Con arrays pasa lo mismo: no uses `push`/`splice` sobre el array del estado; crea uno nuevo con `map`, `filter`, spread, etc.

Además, la inmutabilidad hace el código más predecible, facilita depurar y encaja con APIs como `React.memo` o el concurrent rendering.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es la composición de componentes y por qué React la prefiere a la herencia?

La **composición** consiste en combinar componentes pequeños para construir interfaces más complejas, normalmente con `children`, props de render o componentes “ranurados” (slots). React **no recomienda herencia de clases de componentes** para reutilizar UI.

```jsx
function Card({ title, children }) {
  return (
    <article className="card">
      <h2>{title}</h2>
      {children}
    </article>
  )
}

function Profile() {
  return (
    <Card title="Usuario">
      <Avatar />
      <Bio />
    </Card>
  )
}
```

Ventajas de la composición:

- Más flexible: el padre decide qué va dentro sin acoplar jerarquías rígidas.
- Más legible: el árbol JSX describe la UI.
- Encaja con patrones como Compound Components, slots o providers de contexto.

La herencia en componentes de clase suele volverse frágil y difícil de mantener; la composición escala mejor.

**[⬆ Volver a índice](#índice)**

---

### Intermedio

#### ¿Cómo crear un hook personalizado (_custom hook_)?

Un hook personalizado es una función que empieza con la palabra `use` y que puede utilizar otros hooks. Son ideales para reutilizar lógica en diferentes componentes. Por ejemplo, podemos crear un hook personalizado para extraer la gestión del estado de un contador:

```js
// ./hooks/useCounter.js

export function useCounter() {
  const [count, setCount] = useState(0)

  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)

  return { count, increment, decrement }
}
```

Para usarlo en un componente:

```js
import { useCounter } from './hooks/useCounter.js'

function Counter() {
  const { count, increment, decrement } = useCounter()

  return (
    <>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cuántos `useEffect` puede tener un componente?

Un componente puede tener tantos `useEffect` como necesite. No existe un límite práctico impuesto por React.

De hecho, en la mayoría de casos es preferible tener varios `useEffect` pequeños y bien enfocados antes que uno solo con demasiadas responsabilidades.

Buena práctica habitual:

- Un `useEffect` para suscribirse a eventos del navegador.
- Otro para sincronizar datos con una API.
- Otro para persistir estado en `localStorage`.

Separar efectos por responsabilidad mejora la legibilidad, reduce errores y hace más sencillo mantener el código.

Además, cada efecto tiene su propio ciclo de vida: React ejecuta o limpia cada uno según sus dependencias. Esto permite un control mucho más fino que concentrar toda la lógica en un único bloque.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo podemos ejecutar código cuando el componente se desmonta del árbol?

Podemos ejecutar código cuando el componente se desmonta usando el hook `useEffect` y dentro devolver una función con el código que queremos ejecutar. En este caso, la función que se pasa como primer parámetro del `useEffect` se ejecutará cuando el componente se monte, y la función que es retornada se ejecutará cuando se desmonte.

```jsx
import { useEffect } from 'react'

function Component() {
  useEffect(() => {
    console.log('El componente se ha montado')

    return () => {
      console.log('El componente se ha desmontado')
    }
  }, [])

  return <h1>Ejemplo</h1>
}
```

Esto es muy útil para limpiar recursos que se hayan creado en el componente, como por ejemplo, eventos del navegador o para cancelar peticiones a APIs.

**[⬆ Volver a índice](#índice)**

---

#### Cómo puedes cancelar una petición a una API en `useEffect` correctamente

Cuando hacemos una petición a una API, podemos cancelarla para evitar que se ejecute cuando el componente se desmonte usando `AbortController` como hacemos en este ejemplo:

```jsx
useEffect(() => {
  // Creamos el controlador para abortar la petición
  const controller = new AbortController()
  // Recuperamos la señal del controlador
  const { signal } = controller
  // Hacemos la petición a la API y le pasamos como options la señal
  fetch('https://jsonplaceholder.typicode.com/posts/1', { signal })
    .then(res => res.json())
    .then(json => setMessage(json.title))
    .catch(error => {
      // Si hemos cancelado la petición, la promesa se rechaza
      // con un error de tipo AbortError
      if (error.name !== 'AbortError') {
        console.error(error.message)
      }
    })

  // Si se desmonta el componente, abortamos la petición
  return () => controller.abort()
}, [])
```

Esto también funciona con `axios`:

```jsx
useEffect(() => {
  // Creamos el controlador para abortar la petición
  const controller = new AbortController()
  // Recuperamos la señal del controlador
  const { signal } = controller
  // Hacemos la petición a la API y le pasamos como options la señal
  axios
    .get('https://jsonplaceholder.typicode.com/posts/1', { signal })
    .then(res => setMessage(res.data.title))
    .catch(error => {
      // Si hemos cancelado la petición, la promesa se rechaza
      // con un error de tipo AbortError
      if (error.name !== 'AbortError') {
        console.error(error.message)
      }
    })

  // Si se desmonta el componente, abortamos la petición
  return () => controller.abort()
}, [])
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cuáles son las reglas de los hooks en React?

Los hooks en React tienen dos reglas fundamentales, y respetarlas es clave para evitar comportamientos impredecibles:

- Solo pueden llamarse en componentes funcionales de React o en _custom hooks_.
- Deben llamarse siempre en el nivel superior del componente o del hook, nunca dentro de condicionales, bucles o funciones internas.

¿Por qué existe esta restricción? Porque React identifica cada hook por su orden de ejecución. Si ese orden cambia entre renderizados, React puede mezclar estados y efectos, generando bugs difíciles de depurar.

Ejemplo incorrecto:

```jsx
function Component({ isOpen }) {
  if (isOpen) {
    useEffect(() => {
      console.log('abierto')
    }, [])
  }

  return <div>Hola</div>
}
```

Ejemplo correcto:

```jsx
function Component({ isOpen }) {
  useEffect(() => {
    if (isOpen) {
      console.log('abierto')
    }
  }, [isOpen])

  return <div>Hola</div>
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
function Button({ text }) {
  return <button>{text}</button>
}
```

Y si ese botón se renderiza muchas veces con las mismas props, puedes evaluar memoización:

```jsx
import { memo } from 'react'

const Button = memo(function Button({ text }) {
  return <button>{text}</button>
})
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'

const app = express()

app.get('/', (req, res) => {
  const html = renderToString(<h1>Hola mundo</h1>)
  res.send(html)
})
```

Esto nos devolverá el HTML de la aplicación al acceder a la ruta `/`.

```html
<h1 data-reactroot="">Hola mundo</h1>
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Puedes poner un ejemplo de efectos colaterales en React?

Igual que las funciones en JavaScript, los componentes de React también pueden tener _side effects_ (efectos colaterales). Un efecto colateral significa que el componente manipula o lee información que no está dentro de su ámbito.

Aquí puedes ver un ejemplo simple de un componente que tiene un efecto colateral. Un componente que lee y modifica una variable que está fuera del componente. Esto hace que sea imposible saber qué renderizará el componente cada vez que se use, ya que no sabemos el valor que tendrá `count`:

```jsx
let count = 0

function Counter() {
  count = count + 1

  return (
    <p>Contador: {count}</p>
  )
}

export default function Counters() {
  return (
    <>
      <Counter />
      <Counter />
      <Counter />
    </>
  )
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué diferencia hay entre componentes controlados y no controlados? ¿Qué ventajas y desventajas tienen?

A la hora de trabajar con formularios en React, tenemos dos tipos de componentes: los componentes controlados y los componentes no controlados.

**Componentes controlados:**
son aquellos que tienen un estado que controla el valor del componente. Por lo tanto, el valor del componente se actualiza cuando el estado cambia.

La ventaja de este tipo de componentes es que son más fáciles de testear porque no dependen de la interfaz. También nos permiten crear validaciones muy fácilmente. La desventaja es que son más complejos de crear y mantener. Además, pueden tener un peor rendimiento, ya que provocan un re-renderizado cada vez que cambia el valor del input.

**Componentes no controlados:** son aquellos que no tienen un estado que controle el valor del componente. El estado del componente lo controla el navegador de forma interna. Para conocer el valor del componente, tenemos que leer el valor del DOM.

La ventaja de este tipo de componentes es que se crean de forma muy fácil y no tienes que mantener un estado. Además, el rendimiento es mejor, ya que no tiene que re-renderizarse al cambiar el valor del input. Lo malo es que hay que tratar más con el DOM directamente y crear código imperativo.

```js
// Controlado:
const [value, setValue] = useState('')
const handleChange = () => setValue(event.target.value)

<input type="text" value={value} onChange={handleChange} />

// No controlado:
<input type="text" defaultValue="foo" ref={inputRef} />
// Usamos `inputRef.current.value` para leer el valor del input
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son los High Order Components (HOC)?

Los High Order Components son funciones que reciben un componente como parámetro y devuelven un componente.

```jsx
function withLayout(Component) {
  return function (props) {
    return (
      <main>
        <section>
          <Component {...props} />
        </section>
      </main>
    )
  }
}
```

En este caso, la función `withLayout` recibe un componente como parámetro y devuelve un componente. El componente devuelto renderiza el componente que se le pasa como parámetro dentro de un layout.

Es un patrón que nos permite reutilizar código y así podemos inyectar funcionalidad, estilos o cualquier otra cosa a un componente de forma sencilla.

Con la llegada de los hooks, los HOCs se han vuelto menos populares, pero todavía se usan en algunos casos.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son las render props?

Son un patrón de diseño de React que nos permite reutilizar código entre componentes e inyectar información en el renderizado de los componentes.

```jsx
<DataProvider render={data => <h1>Hello {data.target}</h1>} />
```

En este caso, el componente `DataProvider` recibe una función `render` como prop. Ahí le indicamos qué es lo que debe renderizar usando la información que recibe como parámetro.

La implementación del `DataProvider` con funciones podría ser la siguiente:

```jsx
function DataProvider({ render }) {
  const data = { target: 'world' }
  return render(data)
}
```

También se puede encontrar este patrón usando la prop `children` en los componentes.

```jsx
<DataProvider>{data => <h1>Hello {data.target}</h1>}</DataProvider>
```

Y la implementación sería similar:

```jsx
function DataProvider({ children }) {
  const data = { target: 'world' }
  return children(data)
}
```

Este patrón es usado por grandes bibliotecas como `react-router`, `formik` o `react-motion`.

**[⬆ Volver a índice](#índice)**

---

#### ¿Por qué no podemos usar un `if` en el renderizado de un componente?

En React, no podemos usar un `if` en el renderizado de un componente porque no es una expresión válida de JavaScript, es una declaración. Las expresiones son aquellas que devuelven un valor y las declaraciones no devuelven ningún valor.

En JSX solo podemos usar expresiones, por eso usamos ternarias, que sí son expresiones.

```jsx
// ❌ Esto no funciona
function Button({ text }) {
  return (
    <button>
      {if (text) { return text } else { return 'Click' }}
    </button>
  )
}
// ✅ Esto funciona
function Button({ text }) {
  return (
    <button>
      {text ? text : 'Click'}
    </button>
  )
}
```

De la misma forma, tampoco podemos usar `for`, `while` o `switch` dentro del renderizado de un componente.

**[⬆ Volver a índice](#índice)**

---

#### ¿Por qué debemos utilizar una función para actualizar el estado de React?

A la hora de actualizar el estado de React, debemos utilizar la función que nos facilita el hook `useState` para actualizar el estado.

```jsx
const [count, setCount] = useState(0)

setCount(count + 1)
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
const List = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3'])

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  )
}
```

En este caso, React usa el índice del elemento como `key`. Esto puede ser un problema si la lista se reordena o se eliminan elementos del array, ya que el índice de los elementos cambia.

En este caso, React no sabe qué elementos han cambiado y puede que se produzcan errores.

Un ejemplo donde se ve el problema:

```jsx
const List = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3'])

  const handleRemove = index => {
    const newItems = [...items]
    newItems.splice(index, 1)
    setItems(newItems)
  }

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {item}
          <button onClick={() => handleRemove(index)}>Eliminar</button>
        </li>
      ))}
    </ul>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useMemo`?

El hook `useMemo` es un hook que nos permite memorizar el resultado de una función. Esto quiere decir que si la función que le pasamos como parámetro no ha cambiado, no se ejecuta de nuevo y se devuelve el resultado que ya se había calculado.

```jsx
import { useMemo } from 'react'

function Counter({ count }) {
  const double = useMemo(() => count * 2, [count])

  return (
    <div>
      <p>Contador: {count}</p>
      <p>Doble: {double}</p>
    </div>
  )
}
```

En este caso, el componente `Counter` recibe una prop `count` que es un número. El componente calcula el doble de ese número y lo muestra en pantalla.

El hook `useMemo` recibe dos parámetros: una función y un array de dependencias. La función se ejecuta cuando el componente se renderiza por primera vez y cuando alguna de las dependencias cambia, en este ejemplo la prop `count`.

La ventaja es que si la prop `count` no cambia, se evita el cálculo del doble y se devuelve el valor que ya se había calculado previamente.

**[⬆ Volver a índice](#índice)**

---

#### ¿Es buena idea usar siempre `useMemo` para optimizar nuestros componentes?

No. `useMemo` es una herramienta que nos permite optimizar nuestros componentes, pero no es una herramienta mágica que nos va a hacer que nuestros componentes sean más rápidos. A veces el cálculo de un valor es tan rápido que no merece la pena memorizarlo. Incluso, en algunos casos, puede ser más lento memorizarlo que calcularlo de nuevo.

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useCallback`?

El hook `useCallback` es un hook que nos permite memorizar una función. Esto quiere decir que si la función que le pasamos como parámetro no ha cambiado, no se ejecuta de nuevo y se devuelve la función que ya se había calculado.

```jsx
import { useCallback } from 'react'

function Counter({ count, onIncrement }) {
  const handleIncrement = useCallback(() => {
    onIncrement(count)
  }, [count, onIncrement])

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={handleIncrement}>Incrementar</button>
    </div>
  )
}
```
/* Detailed source-code truncated for AI context efficiency. */
```js
const memoizedCallback = useMemo(() => {
  return () => {
    doSomething(a, b)
  }
}, [a, b])
```

Importante: no conviene usar `useMemo` y `useCallback` de forma indiscriminada. Añadir memoización sin necesidad puede aumentar complejidad y, en algunos casos, empeorar el rendimiento.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son las refs en React?

Las refs (referencias) son una vía de acceso imperativa en React. Permiten apuntar a un nodo del DOM o a un valor mutable que queremos conservar entre renderizados sin provocar un nuevo render cuando cambia.

Se utilizan principalmente en dos escenarios:

- Interactuar con el DOM de forma puntual (por ejemplo, hacer focus a un input, medir un elemento o gestionar selecciones).
- Guardar valores mutables entre renders que no forman parte de la UI (por ejemplo, un identificador de intervalo, un flag interno o el valor previo de una variable).

En componentes funcionales se usa normalmente `useRef`, y en componentes de clase se ha usado históricamente `createRef`.

Es importante entender que una ref no sustituye al estado: si un cambio debe reflejarse en la interfaz, debería gestionarse con state; si no necesita re-render, una ref suele ser la herramienta adecuada.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo funciona el hook `useRef`?

En el siguiente ejemplo vamos a guardar la referencia en el DOM a un elemento `<input>` y vamos a cambiar el foco a ese elemento cuando hacemos clic en el botón.

```jsx
import { useRef } from 'react'

function TextInputWithFocusButton() {
  const inputEl = useRef(null)

  const onButtonClick = () => {
    // `current` apunta al elemento inputEl montado
    inputEl.current.focus()
  }

  return (
    <>
      <input ref={inputEl} type='text' />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  )
}
```

Creamos una referencia `inputEl` con `useRef` y la pasamos al elemento `<input>` como prop `ref`. Cuando el componente se monta, la referencia `inputEl` apunta al elemento `<input>` del DOM.

Para acceder al elemento del DOM, usamos la propiedad `current` de la referencia.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué hace el hook `useLayoutEffect`?

`useLayoutEffect` funciona igual que el hook `useEffect`, con la excepción de que este se dispara sincrónicamente después de leer todas las mutaciones del DOM.

Llama `useLayoutEffect` en el nivel superior del componente.

```jsx
import { useLayoutEffect } from 'react'

useLayoutEffect(() => {
  return () => {}
}, [])
```

`useLayoutEffect` recibe dos argumentos:

- Una función callback que define el efecto.
- Una lista de dependencias.

Aunque el `useEffect` es el hook de renderizado más usado, si se necesita que los efectos del DOM muten cambiando la apariencia entre el efecto y el renderizado, entonces es conveniente que uses el `useLayoutEffect`.

##### Orden de ejecución del `useLayoutEffect`

El orden de ejecución del `useLayoutEffect`, ya que se ejecuta de forma síncrona, al momento en que React termina de ejecutar todas las mutaciones, pero antes de renderizarlo en pantalla, es el siguiente:

- El componente se actualiza por algún cambio de estado, props o el padre se re-renderiza
- React renderiza el componente
- Tu efecto es ejecutado
- La pantalla se actualiza “visualmente”

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son los componentes _stateless_?

Los componentes _stateless_ son componentes que no gestionan estado interno. Su salida depende exclusivamente de las props que reciben.

Por ese motivo, suelen ser más fáciles de entender, de testear y de reutilizar. También favorecen un estilo de desarrollo más predecible, cercano a los componentes puros.

En la práctica, son muy útiles para piezas de UI presentacionales (botones, tarjetas, encabezados, etiquetas, etc.) donde la lógica de estado vive en componentes contenedores o hooks.

```jsx
// Este es un ejemplo de componente stateless
function Button({ text }) {
  return <button>{text}</button>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes prevenir el comportamiento por defecto de un evento en React?

Para prevenir el comportamiento por defecto de un evento en React, se usa el método `preventDefault()` sobre el objeto del evento.

Esto es habitual en formularios, enlaces o cualquier interacción donde quieras mantener el control del flujo desde JavaScript en lugar de dejar que actúe el comportamiento nativo del navegador.

```jsx
function Form({ onSubmit }) {
  const handleSubmit = event => {
    event.preventDefault()
    onSubmit()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' />
      <button type='submit'>Enviar</button>
    </form>
  )
}
```

En este ejemplo, evitamos que el formulario recargue la página al hacer submit, para poder validar y procesar los datos de forma controlada.

Nota útil: `preventDefault()` evita la acción por defecto, pero no detiene la propagación del evento. Si también necesitas evitar que el evento siga propagándose, debes usar además `stopPropagation()`.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el `StrictMode` en React?

`StrictMode` es una herramienta de desarrollo que activa comprobaciones adicionales en una parte del árbol de componentes para detectar malas prácticas antes de llegar a producción.

No añade interfaz visual y no cambia el comportamiento funcional en producción. Su valor está en detectar problemas de calidad durante el desarrollo, por ejemplo:

- Efectos con limpieza incompleta.
- Side effects ejecutados en sitios inadecuados (como el render).
- Uso de APIs obsoletas o patrones no recomendados.
- Código no idempotente que falla si se ejecuta más de una vez.

Por eso, cuando activas `StrictMode`, es normal ver ejecuciones extra en desarrollo: no es un error, es una estrategia deliberada para exponer fragilidades de tu código cuanto antes.

```jsx
import { StrictMode } from 'react'

function App() {
  return (
    <StrictMode>
      <Component />
    </StrictMode>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Por qué es recomendable exportar los componentes de React de forma nombrada?

Los componentes de React se pueden exportar de dos formas:

- Exportación por defecto
- Exportación nombrada

Para exportar un componente por defecto, usamos la palabra reservada `default`:

```jsx
// button.jsx
export default function Button() {
  return <button>Click</button>
}

// App.jsx
import Button from './button.jsx'

function App() {
  return <Button />
}
```

La gran desventaja que tiene la exportación por defecto es que a la hora de importarlo puedes usar el nombre que quieras. Y esto trae problemas, ya que puedes no usar siempre el mismo en el proyecto o usar un nombre que no sea correcto con lo que importas.

```jsx
// button.jsx
export default function Button() {
  return <button>Click</button>
}

// App.jsx
import MyButton from './button.jsx'

function App() {
  return <MyButton />
}

// Otro.jsx
import Button from './button.jsx'

function Otro() {
  return <Button />
}
```

Los exports nombrados nos obligan a usar el mismo nombre en todos los archivos y, por tanto, nos aseguramos de que siempre estamos usando el nombre correcto.

```jsx
// button.jsx
export function Button() {
  return <button>Click</button>
}

// App.jsx
import { Button } from './button.jsx'

function App() {
  return <Button />
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes exportar múltiples componentes de un mismo archivo?

Para exportar múltiples componentes desde un mismo archivo, lo habitual es usar exportaciones nombradas (named exports). Este enfoque es especialmente útil cuando los componentes están relacionados entre sí (por ejemplo, variantes de un mismo componente o piezas de un patrón compuesto).

Además, las exportaciones nombradas suelen mejorar la mantenibilidad porque:

- Hacen explícito qué se exporta públicamente.
- Facilitan el autocompletado y los refactors en el editor.
- Evitan ambiguedades típicas de mezclar demasiados default exports.

Ejemplo:

```jsx
// button.jsx
export function Button({ children }) {
  return <button>{children}</button>
}

export function ButtonSecondary({ children }) {
  return <button class='btn-secondary'>{children}</button>
}
```

Y luego se importan así:

```jsx
import { Button, ButtonSecondary } from './button.jsx'
```

Si en algún caso quieres renombrar una exportación al importar, también puedes hacerlo:

```jsx
import { ButtonSecondary as SecondaryButton } from './button.jsx'
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo importar de forma dinámica un componente en React?

Para importar de forma dinámica un componente en React debemos usar la función `import()`, el método `lazy()` de React y el componente `Suspense`.

```jsx
// App.jsx
import { lazy, Suspense } from 'react'

const Button = lazy(() => import('./button.jsx'))

export default function App() {
  return (
    <Suspense fallback={<div>Cargando botón...</div>}>
      <Button />
    </Suspense>
  )
}

// button.jsx
export default function Button() {
  return <button>Botón cargado dinámicamente</button>
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import { useState } from 'react'
// importamos de forma estática el componente de la Modal
import { SuperBigModal } from './super-big-modal.jsx'

// mostrar modal si el usuario da click en un botón
export default function App() {
  const [showModal, setShowModal] = useState(false)

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Mostrar modal</button>
      {showModal && <SuperBigModal />}
    </div>
  )
}
```

Este componente `SuperBigModal` se importa de forma estática, por lo que se carga desde el principio. Pero, ¿qué pasa si el usuario no da click en el botón para mostrar la modal? En este caso, está cargando el componente pese a que no lo está usando.

Si queremos ofrecer la mejor experiencia a nuestros usuarios, debemos intentar que la aplicación cargue lo más rápido posible. Por eso, es recomendable importar de forma dinámica los componentes que no se van a usar desde el principio.

```jsx
import { useState, lazy, Suspense } from 'react'
// importamos de forma dinámica el componente de la Modal
const SuperBigModal = lazy(() => import('./super-big-modal.jsx'))

// mostrar modal si el usuario da click en un botón
export default function App() {
  const [showModal, setShowModal] = useState(false)

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Mostrar modal</button>
      <Suspense fallback={<div>Cargando modal...</div>}>
        {showModal && <SuperBigModal />}
      </Suspense>
    </div>
  )
}
```

De esta forma, la parte de código que importa el componente `SuperBigModal` se carga de forma dinámica, es decir, cuando el usuario da click en el botón para mostrar la modal.

Dependiendo del empaquetador de aplicaciones web que uses y su configuración, es posible que el resultado de la carga sea diferente (algunos creará un archivo a parte del _bundle_ principal, otros podrían hacer un streaming del HTML...) pero la intención del código es la misma.

Así que siempre debemos intentar cargar los componentes de forma dinámica cuando no se vayan a usar desde el principio, sobretodo cuando están detrás de la interacción de un usuario. Lo mismo podría ocurrir con rutas completas de nuestra aplicación. ¿Por qué cargar la página de _About_ si el usuario está visitando la página principal?

**[⬆ Volver a índice](#índice)**

---

#### ¿Sólo se pueden cargar componentes de forma dinámica si se exportan por defecto?

No, no es necesario que los componentes se exporten por defecto para poder cargarlos de forma dinámica. Podemos exportarlos de forma nombrada y cargarlos de forma dinámica... pero no es lo más recomendable ya que el código necesario es mucho más lioso.

```jsx
// button.jsx
// exportamos el componente Button de forma nombrada
export function Button() {
  return <button>Botón cargado dinámicamente</button>
}

// app.jsx
import { lazy, Suspense } from 'react'

// Al hacer el import dinámico, debemos especificar el nombre del componente que queremos importar
// y hacer que devuelva un objeto donde la key default pasar a ser el componente nombrado
const Button = lazy(() =>
  import('./button.jsx').then(({ Button }) => ({ default: Button }))
)

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>Cargando botón...</div>}>
        <Button />
      </Suspense>
    </div>
  )
}
```

Otra opción es tener un fichero intermedio que exporte el componente de forma por defecto y que sea el que importemos de forma dinámica.

```jsx
// button-component.jsx
// exportamos el componente Button de forma nombrada
export function Button() {
  return <button>Botón cargado dinámicamente</button>
}

// button.jsx
export { Button as default } from './button-component.jsx'

// app.jsx
import { lazy, Suspense } from 'react'

const Button = lazy(() => import('./button.jsx'))

export default function App () {
  return (
    <div>
      <Suspense fallback={<div>Cargando botón...</div>}>
        <Button />
      </Suspense>
    </div>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el contexto en React? ¿Cómo puedo crearlo y consumirlo?

El contexto es una forma de pasar datos a través de la jerarquía de componentes sin tener que pasar props manualmente en cada nivel.

Para crear un contexto en React usamos el hook `createContext`:

```jsx
import { createContext } from 'react'

const ThemeContext = createContext()
```

Para usar el contexto, debemos envolver el árbol de componentes con el componente `Provider`:

```jsx
<ThemeContext.Provider value='dark'>
  <App />
</ThemeContext.Provider>
```

Para consumir el contexto, debemos usar el hook `useContext`:

```jsx
import { useContext } from 'react'

function Button() {
  const theme = useContext(ThemeContext)
  return <button className={theme}>Haz clic aquí</button>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el `SyntheticEvent` en React?

`SyntheticEvent` es la capa de abstracción de eventos que React usa sobre los eventos nativos del navegador. Su objetivo es ofrecer una API homogénea y consistente entre navegadores.

En la práctica, cuando trabajas con eventos en React (`onClick`, `onChange`, etc.), el objeto `event` que recibes es un `SyntheticEvent`, no directamente un evento nativo.

Ventajas de este enfoque:

- API consistente entre navegadores.
- Misma interfaz para distintos tipos de evento.
- Integración con el sistema de eventos de React.

Si en algún caso necesitas el evento nativo real, puedes acceder mediante `event.nativeEvent`.

```jsx
function App() {
  function handleClick(event) {
    console.log(event) // SyntheticEvent
  }

  return <button onClick={handleClick}>Haz clic aquí</button>
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es `flushSync` en React?

`flushSync(callback)` Obliga a React a ejecutar de manera síncrona todas las actualizaciones de los state dentro del callback proporcionado. Así se asegura que el DOM se actualiza inmediatamente.

```jsx
import { flushSync } from 'react-dom'

function App() {
  const handleClick = () => {
    setId(1)
    // component no hace re-render 🚫
    flushSync(() => {
      setId(2)
      // component re-renderiza aquí 🔄
    })
    // component ha sido re-renderizado y el DOM ha sido actualizado ✅
    flushSync(() => {
      setName('John')
      // component no hace re-render 🚫
      setEmail('john@doe.com')
      // component re-renderiza aquí 🔄
    })
    // component ha sido re-renderizado y el DOM ha sido actualizado ✅
  }

  return <button onClick={handleClick}>Haz clic aquí</button>
}
```

NOTA: `flushSync` puede afectar significativamente el rendimiento. Úsalo con moderación.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son los Error Boundaries en React?

Los Error Boundaries son componentes que nos permiten manejar los errores que se producen en el árbol de componentes. Para crear un Error Boundary, debemos crear un componente que implemente el método `componentDidCatch`:

```jsx
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return <h1>Algo ha ido mal</h1>
    }

    return this.props.children
  }
}
```

De esta forma podemos capturar los errores que se producen en el árbol de componentes y mostrar un mensaje de error personalizado mientras evitamos que nuestra aplicación se rompa completamente.

Ahora podemos envolver el árbol de componentes con el componente `ErrorBoundary`:

```jsx
<ErrorBoundary>
  <App />
</ErrorBoundary>
```

Podemos crear un Error Boundary en cualquier nivel del árbol de componentes, de esta forma podemos tener un control más granular de los errores.

```jsx
<ErrorBoundary>
  <App />
  <ErrorBoundary>
    <SpecificComponent />
  </ErrorBoundary>
</ErrorBoundary>
```

Por ahora no existe una forma nativa de crear un Error Boundary en una función de React. Para crear un Error Boundary en una función, puedes usar la librería [react-error-boundary](https://github.com/bvaughn/react-error-boundary).

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son las Forward Refs?

El reenvío de referencia o _Forward Refs_ es una técnica que nos permite acceder a una referencia de un componente hijo desde un componente padre.

```jsx
// Button.jsx
import { forwardRef } from 'react'

export const Button = forwardRef((props, ref) => (
  <button ref={ref} className='rounded border border-sky-500 bg-white'>
    {props.children}
  </button>
))

// Parent.jsx
import { Button } from './Button'
import { useRef } from 'react'

const Parent = () => {
  const ref = useRef()

  useEffect(() => {
    // Desde el padre podemos hacer focus
    // al botón que tenemos en el hijo
    ref.current?.focus?.()
  }, [ref.current])

  return <Button ref={ref}>My button</Button>
}
```

En este ejemplo, recuperamos la referencia del botón (elemento HTML `<button>`) y la recupera el componente padre (`Parent`), para poder hacer focus en él gracias al uso de `forwardRef` en el componente hijo (`Button`).

Para la gran mayoría de componentes esto no es necesario pero puede ser útil para sistemas de diseño o componentes de terceros reutilizables.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo validar el tipo de mis props?

React proporciona una forma de validar el tipo de las props de un componente en tiempo de ejecución y en modo desarrollo. Esto es útil para asegurarnos de que los componentes se están utilizando correctamente.

El paquete se llama `prop-types` y se puede instalar con `npm install prop-types`.

```jsx
import PropTypes from 'prop-types'

function App(props) {
  return <h1>{props.title}</h1>
}

App.propTypes = {
  title: PropTypes.string.isRequired,
}
```

En este ejemplo, estamos validando que la prop `title` sea de tipo `string` y que sea obligatoria.

Existen una colección de _PropTypes_ ya definidas para ayudarte a comprobar los tipos de las props más comunes:

```js
PropTypes.number // número
PropTypes.string // string
PropTypes.array // array
PropTypes.object // objeto
PropTypes.bool // un booleano
PropTypes.func // función
PropTypes.node // cualquier cosa renderizable en React, como un número, string, elemento, array, etc.
PropTypes.element // un elemento React
PropTypes.symbol // un Symbol de JavaScript
PropTypes.any // cualquier tipo de dato
```

A todas estas se le puede añadir la propiedad `isRequired` para indicar que es obligatoria.

> Otra opción es usar TypeScript, un lenguaje de programación que compila a JavaScript y que ofrece validación de tipos de forma estática. Ten en cuenta que mientras que TypeScript comprueba los tipos en tiempo de compilación, las PropTypes lo hacen en tiempo de ejecución.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo validar las propiedades de un objeto con PropTypes?

Para validar una prop de tipo objeto se suele usar `PropTypes.shape`, donde defines la estructura esperada campo por campo.

Esto es útil para documentar contratos de componente y detectar usos incorrectos en tiempo de ejecución durante desarrollo.

```jsx
import PropTypes from 'prop-types'

function App({ title }) {
  const { text, color } = title
  return <h1 style={{ color }}>{text}</h1>
}

App.propTypes = {
  title: PropTypes.shape({
    text: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired,
  }),
}
```

Si quieres una validación más estricta (sin permitir propiedades adicionales), puedes usar `PropTypes.exact`.

```jsx
App.propTypes = {
  title: PropTypes.exact({
    text: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired,
  }).isRequired,
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo validar las propiedades de un array con PropTypes?

Para validar arrays en PropTypes se usa `PropTypes.arrayOf`, indicando el tipo que debe tener cada elemento.

Cuando los elementos son objetos, es habitual combinar `arrayOf` con `shape` o `exact`.

```jsx
import PropTypes from 'prop-types'

function App({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.text}>{item.text}</li>
      ))}
    </ul>
  )
}

App.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      text: PropTypes.string.isRequired,
    })
  ).isRequired,
}
```

En este caso estamos validando que `items` sea un array y que cada uno de sus elementos sea un objeto con la propiedad `text` de tipo `string`. Además, la prop es obligatoria.

Si tu lista necesita campos adicionales (por ejemplo `id`, `text`, `completed`), lo recomendable es declararlos todos para tener una validación más expresiva y detectar errores antes.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo inyectar HTML directamente en un componente de React?

Una de las razones por las que se creó React es para evitar los ataques XSS (_Cross-Site Scripting_), impidiendo que un usuario pueda inyectar código HTML en la página.

Por ello, React al intentar evaluar un string que contiene HTML lo escapa automáticamente. Por ejemplo, si intentamos renderizar el siguiente string:

```jsx
const html = '<h1>My title</h1>'

function App() {
  return <div>{html}</div>
}
```

Veremos que en lugar de renderizar el HTML, lo escapa:

```html
<div>&lt;h1&gt;My title&lt;/h1&gt;</div>
```

Sin embargo, hay ocasiones en las que es necesario inyectar HTML directamente en un componente. Ya sea por traducciones que tenemos, porque viene el HTML desde el servidor y ya viene saneado, o por un componente de terceros.

Para ello, podemos usar la propiedad `dangerouslySetInnerHTML`:

```jsx
const html = '<h1>My title</h1>'

function App() {
  return <div dangerouslySetInnerHTML={{ __html: html }} />
}
```

Ahora sí veremos el HTML renderizado:

```html
<div><h1>My title</h1></div>
```

Como ves, **el nombre ya nos indica que es una propiedad peligrosa y que debemos usarla con cuidado.** Intenta evitarla siempre que puedas y sólo recurre a ella cuando realmente no tengas otra opción.

**[⬆ Volver a índice](#índice)**

---

#### ¿Por qué puede ser mala idea pasar siempre todas las props de un objeto a un componente?

Digamos que tenemos un componente `App` que recibe un objeto `props` con todas las props que necesita:

```jsx
function App(props) {
  return <h1>{props.title}</h1>
}
```

Y que tenemos otro componente `Layout` que recibe un objeto `props` con todas las props que necesita:

```jsx
function Layout(props) {
  return (
    <div>
      <App {...props} />
    </div>
  )
}
```

En este caso, `Layout` está pasando todas las props que recibe a `App`. Esto puede ser una mala idea por varias razones:

- Si `Layout` recibe una prop que no necesita, la pasará a `App` y éste puede que no la use. Esto puede ser confuso para el que lea el código.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cuál es el propósito del atributo "key" en React y por qué es importante usarlo correctamente al renderizar listas de elementos?

El propósito del atributo "key" en React es proporcionar una identificación única a cada elemento en una lista renderizada dinámicamente. Esto permite a React identificar qué elementos han cambiado, añadido o eliminado de la lista cuando se realiza una actualización.

Cuando se renderiza una lista en React sin el atributo "key", React puede tener dificultades para identificar correctamente los cambios en la lista, lo que puede resultar en un comportamiento inesperado, como la re-renderización innecesaria de elementos o la pérdida de estado de los componentes.

Por lo tanto, es importante utilizar el atributo "key" de manera correcta y única para cada elemento de la lista, preferiblemente utilizando identificadores únicos de cada elemento en lugar de índices de array, para garantizar un rendimiento óptimo y un comportamiento predecible en la aplicación.

Ejemplo de cómo utilizar el atributo "key" en React:

```jsx
import React from 'react'

const ListaItems = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.nombre}</li>
      ))}
    </ul>
  )
}

export default ListaItems
```

---

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useTransition` y cuándo deberías usarlo?

El hook `useTransition` etiqueta como “no urgentes” las actualizaciones que envuelves con `startTransition`, permitiendo que la UI siga respondiendo a interacciones prioritarias mientras React calcula los cambios costosos. Devuelve `[isPending, startTransition]`; `isPending` indica si hay una transición en curso.

```jsx
import { useState, useTransition } from 'react'

function FilterableList({ items }) {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState(items)
  const [isPending, startTransition] = useTransition()

  const handleChange = event => {
    const value = event.target.value
    setQuery(value)
    startTransition(() => {
      const filtered = items.filter(item =>
        item.toLowerCase().includes(value.toLowerCase())
      )
      setResults(filtered)
    })
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <p>Cargando resultados...</p>}
      <ul>
        {results.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  )
}
```

Úsalo cuando una actualización de estado dispara renders pesados (filtrar, ordenar, pintar cientos de filas) y quieres mantener la sensación de fluidez.

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useActionState`?

`useActionState` simplifica el ciclo de vida de formularios que ejecutan Server Actions. Devuelve `[state, action, isPending]`: `state` es la respuesta más reciente, `action` se pasa al `<form action={...}>` y `isPending` indica si hay una petición en curso.

```jsx
'use client'

import { useActionState } from 'react'

async function createTodo(prevState, formData) {
  'use server'
  const title = formData.get('title')
  if (!title) return { error: 'El título es obligatorio' }
  await saveTodoInDb(title)
  return { ok: true }
}

export function TodoForm() {
  const [state, action, isPending] = useActionState(createTodo, { ok: false })

  return (
    <form action={action}>
      <input name='title' placeholder='Comprar leche' />
      <button disabled={isPending}>{isPending ? 'Creando…' : 'Crear'}</button>
      {state.error && <p>{state.error}</p>}
      {state.ok && <p>Todo creado ✅</p>}
    </form>
  )
}
```

Así evitas crear estados manuales para “loading”, errores o resultados.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué problema resuelve el hook `useOptimistic`?

`useOptimistic` permite mostrar datos temporales (optimistas) inmediatamente tras la interacción del usuario, antes de recibir la confirmación del servidor. Devuelve `[optimisticState, addOptimisticValue]` y una función reductora que decide cómo combinar el estado actual con el optimista.

```jsx
'use client'

import { useOptimistic } from 'react'

export function Comments({ initialComments, submitComment }) {
  const [comments, addOptimisticComment] = useOptimistic(
    initialComments,
    (current, optimistic) => [optimistic, ...current]
  )

  const handleSubmit = async event => {
    event.preventDefault()
    const formData = new FormData(event.currentTarget)
    const message = formData.get('message')?.toString() ?? ''
    const id = crypto.randomUUID()

    addOptimisticComment({ id, message, pending: true })
    await submitComment(formData)
    event.currentTarget.reset()
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <textarea name='message' />
        <button>Enviar</button>
      </form>
      <ul>
        {comments.map(comment => (
          <li key={comment.id}>
            {comment.message} {comment.pending && <small>(enviando…)</small>}
          </li>
        ))}
      </ul>
    </>
  )
}
```

Si la acción falla, deberás revertir manualmente el estado optimista (por ejemplo, eliminando el comentario temporal y mostrando un error).

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo funciona el hook `useFormStatus` y qué aporta junto a las Server Actions?

`useFormStatus` (desde `react-dom`) expone el estado de envío del formulario que lo contiene: `pending`, `action`, `method` y el `formData` más reciente. Es ideal para deshabilitar botones o mostrar feedback sin levantar estados en el componente padre.

```jsx
'use client'

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button disabled={pending}>{pending ? 'Guardando…' : 'Guardar'}</button>
  )
}

export function ProfileForm({ updateProfile }) {
  return (
    <form action={updateProfile}>
      <input name='name' />
      <SubmitButton />
    </form>
  )
}
```

Cada botón o indicador dentro del formulario accede al mismo estado sin necesidad de prop drilling.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el hook `useFormState` y cuándo conviene usarlo?

`useFormState` enlaza el resultado más reciente de una Server Action con la UI del formulario. Recibe la acción y el estado inicial y devuelve `[state, formAction]`. Es perfecto para mostrar mensajes de error o éxito justo después del envío.

```jsx
'use client'

import { useFormState } from 'react-dom'

async function updatePassword(prevState, formData) {
  'use server'
  const password = formData.get('password')?.toString() ?? ''
  if (password.length < 12) {
    return { error: 'Debe tener al menos 12 caracteres' }
  }
  await savePassword(password)
  return { success: true }
}

export function PasswordForm() {
  const [state, action] = useFormState(updatePassword, { success: false })

  return (
    <form action={action}>
      <input name='password' type='password' />
      <button>Cambiar contraseña</button>
      {state.error && <p>{state.error}</p>}
      {state.success && <p>Contraseña actualizada ✅</p>}
    </form>
  )
}
```

Mantienes toda la lógica de validación en el servidor mientras la UI reacciona al instante.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son las Server Actions y cómo se usan con formularios en React?

Las Server Actions son funciones marcadas con `'use server'` que React ejecuta en el backend. Pueden acceder a bases de datos, secretos o SDKs privados y se integran directamente con formularios y botones.

```jsx
'use server'

export async function createPost(formData) {
  const title = formData.get('title')
  await db.post.create({ data: { title } })
}

;('use client')
import { createPost } from './actions'

export function PostForm() {
  return (
    <form action={createPost}>
      <input name='title' />
      <button>Publicar</button>
    </form>
  )
}
```

Cuando envías el formulario, React serializa el `FormData`, ejecuta la acción en el servidor y retorna la respuesta al cliente sin que tengas que crear endpoints manuales.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cuál es la diferencia entre la prop `action` y el atributo `formAction` en React/Next.js?

- `action` en un `<form>` define la acción predeterminada para todo el formulario (Enter o botón por defecto).
- `formAction` en un `<button>` o `<input type='submit'>` sobrescribe la acción solo para ese control. Es ideal cuando un mismo formulario puede “Publicar” o “Guardar borrador”.

```jsx
'use client'

import { publishPost, saveDraft } from './actions'

export function EditorForm() {
  return (
    <form action={publishPost}>
      <textarea name='content' />
      <button>Publicar</button>
      <button type='submit' formAction={saveDraft}>
        Guardar borrador
      </button>
    </form>
  )
}
```

Ambas props aceptan una URL o una Server Action; elige `formAction` para botones alternativos sin duplicar formularios.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué diferencia hay entre componentes de servidor y componentes de cliente en React/Next.js?

Los componentes de servidor se renderizan en el backend, pueden acceder a datos protegidos y devuelven HTML y payloads serializados. No pueden usar hooks del navegador (`useState`, `useEffect`). Los componentes de cliente se ejecutan en el navegador, escuchan eventos y pueden usar todos los hooks tradicionales.

Para marcar un archivo como componente de cliente añade `'use client'` en la primera línea. Las Server Actions usan `'use server'` dentro de la función. Combinar ambos tipos te permite cargar datos en el servidor y mantener la interactividad solo donde es necesaria, reduciendo el JavaScript que llega al cliente.

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useSyncExternalStore`?

`useSyncExternalStore` conecta React con una fuente de datos externa (Redux, Zustand, APIs del navegador) ofreciendo lecturas consistentes en renderizados concurrentes y durante la hidratación.

```jsx
import { useSyncExternalStore } from 'react'

function subscribe(callback) {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  mediaQuery.addEventListener('change', callback)
  return () => mediaQuery.removeEventListener('change', callback)
}

function getSnapshot() {
  return window.matchMedia('(prefers-color-scheme: dark)').matches
}

export function ThemeIndicator() {
  const isDark = useSyncExternalStore(subscribe, getSnapshot, () => false)
  return <p>Modo {isDark ? 'oscuro' : 'claro'}</p>
}
```

Si renderizas en el servidor, proporciona un tercer argumento (`getServerSnapshot`) para evitar discrepancias entre el HTML inicial y la hidratación.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo funciona `React.memo` y cuándo es útil?

`React.memo` memoriza el resultado de un componente funcional y solo lo vuelve a renderizar si sus props cambian tras una comparación superficial. Es útil para componentes que renderizan listas grandes o cálculos pesados con props estables.

```jsx
const PriceTag = React.memo(function PriceTag({ value, currency }) {
  return (
    <span>
      {value.toLocaleString('es-ES', { style: 'currency', currency })}
    </span>
  )
})

export function Cart({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name} <PriceTag value={item.price} currency='EUR' />
        </li>
      ))}
    </ul>
  )
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
function handleClick() {
  setCount(c => c + 1)
  setFlag(f => !f)
  // Un solo re-render con ambos estados actualizados
}

setTimeout(() => {
  setCount(c => c + 1)
  setFlag(f => !f)
  // También se agrupan (React 18+)
}, 0)
```

Si en un caso muy concreto necesitas forzar un flush síncrono (por ejemplo leer el DOM justo después), usa `flushSync` de `react-dom`, sabiendo que puede degradar el rendimiento.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es `Suspense` en React y para qué se usa?

`Suspense` permite mostrar un **fallback** mientras un hijo “espera” algo: código cargado con `React.lazy`, o datos con APIs que se integran con Suspense (por ejemplo `use` con promesas, o frameworks como Next.js/Remix).

```jsx
import { lazy, Suspense } from 'react'

const Comments = lazy(() => import('./Comments'))

function Post() {
  return (
    <article>
      <h1>Artículo</h1>
      <Suspense fallback={<p>Cargando comentarios…</p>}>
        <Comments />
      </Suspense>
    </article>
  )
}
```

Ideas clave:

- El fallback se muestra **hasta que el árbol hijo puede renderizarse**.
- Puedes anidar varios límites de `Suspense` para granular la UX (spinner solo en una sección).
- Se combina bien con streaming SSR y con Error Boundaries (Suspense no sustituye el manejo de errores).

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es la reconciliación (reconciliation) en React?

La **reconciliación** es el proceso por el que React compara el árbol de elementos anterior con el nuevo y decide **qué nodos del DOM actualizar, crear o eliminar**.

Reglas importantes que usa React:

- Si el **tipo de elemento cambia** (`div` → `span`, o un componente por otro), desmonta el árbol viejo y monta uno nuevo.
- Si el tipo es el mismo, **reutiliza** el nodo y actualiza solo props/atributos que cambiaron.
- En **listas**, la prop `key` ayuda a identificar cada hijo entre renders y evitar reutilizar el componente equivocado.

Por eso las keys deben ser **estables e identificativas** (un id), no el índice si la lista se reordena, y nunca un valor aleatorio en cada render.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el estado derivado y por qué conviene calcularlo en el render?

El **estado derivado** es un valor que se puede obtener a partir de props u otro estado ya existente. En la mayoría de casos **no debes guardarlo en un `useState` aparte**: calcúlalo durante el render.

```jsx
// ❌ Redundante y propenso a desincronizarse
const [items, setItems] = useState([])
const [count, setCount] = useState(0)
// hay que recordar actualizar count cada vez que cambia items

// ✅ Derivado en render
const [items, setItems] = useState([])
const count = items.length
const expensive = useMemo(() => compute(items), [items]) // solo si es costoso
```

Ventajas: menos bugs de sincronización, menos renders por dobles `setState`, y la fuente de verdad es única.

Usa estado solo para datos **independientes** que cambian con el tiempo por interacción o efectos; todo lo demás, derívalo.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es una *stale closure* y cómo afecta a los hooks?

Una **stale closure** (clausura obsoleta) ocurre cuando una función “recuerda” valores de un render anterior en lugar de los más recientes. Es un clásico con `useEffect`, `setTimeout`, suscripciones o callbacks memorizados.

```jsx
function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => {
      // ❌ puede leer siempre el count inicial (0)
      setCount(count + 1)
    }, 1000)
    return () => clearInterval(id)
  }, []) // deps vacías → la función captura count=0

  // ✅ forma funcional: siempre parte del valor actual
  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1)
    }, 1000)
    return () => clearInterval(id)
  }, [])
}
```

Cómo evitarlas:

- Incluye en el array de dependencias todo valor reactivo que uses.
- Prefiere la forma funcional de `setState` cuando actualices basándote en el valor anterior.
- Para lecturas “siempre frescas” sin re-subscribir, a veces se usa un ref (`useRef`) o patrones más avanzados.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes evitar re-renders innecesarios al usar Context?

El Context es práctico, pero **cualquier cambio en el `value` del Provider re-renderiza a todos los consumidores**, aunque solo usen una parte del valor.

Estrategias habituales:

1. **Partir el contexto**: uno para datos que cambian poco (tema, user) y otro para acciones/dispatch estables.
2. **Memoizar el value** del Provider para no crear un objeto nuevo en cada render del padre.
3. **Colocar el estado cerca** de quien lo necesita (no subas al contexto global lo que solo usan dos componentes).
4. En casos extremos, bibliotecas de estado con suscripciones selectivas (Zustand, Jotai, Redux) o `useSyncExternalStore`.

```jsx
const value = useMemo(
  () => ({ user, login, logout }),
  [user] // login/logout con useCallback estables
)

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
```

Si el contexto cambia muy a menudo (input en cada tecla), casi seguro no debería vivir en un Provider de alto nivel.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es `React.lazy` y cómo se combina con `Suspense`?

`React.lazy` permite **cargar un componente bajo demanda** (code splitting) con un import dinámico. Debe envolver el resultado en un límite de `Suspense` que muestre un fallback mientras llega el chunk.

```jsx
import { lazy, Suspense } from 'react'

const Dashboard = lazy(() => import('./Dashboard'))

export function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  )
}
```

Notas:

- Tradicionalmente el módulo debe exportar el componente por **default** (o adaptar el import).
- Ideal para rutas o paneles pesados que no se ven en el primer paint.
- En SSR el code splitting con `lazy` requiere soporte del framework o alternativas; en apps 100 % cliente es directo.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es `startTransition` y en qué se diferencia de actualizar el estado de forma normal?

`startTransition` marca una actualización de estado como **no urgente**. React puede interrumpirla o posponerla para mantener prioritarias las interacciones del usuario (escribir en un input, clic).

```jsx
import { useState, startTransition } from 'react'

function Search({ items }) {
  const [query, setQuery] = useState('')
  const [filtered, setFiltered] = useState(items)

  function onChange(e) {
    const value = e.target.value
    setQuery(value) // urgente: el input no debe ir retrasado
    startTransition(() => {
      setFiltered(items.filter(i => i.includes(value))) // no urgente
    })
  }

  return (
    <>
      <input value={query} onChange={onChange} />
      <List items={filtered} />
    </>
  )
}
```

Diferencias con un `setState` normal:

- Las actualizaciones urgentes se sienten instantáneas.
- Las de transición pueden quedar “atrás” o mostrarse con `isPending` vía `useTransition`.
- No sustituye a `useMemo`/`useCallback`; ataca otro problema: **prioridad del render**.

**[⬆ Volver a índice](#índice)**

---

#### ¿En React 19 se necesita todavía `forwardRef`?

En la mayoría de casos **ya no**. Desde React 19, `ref` es una **prop normal** en componentes de función: puedes recibirla y asignarla sin `forwardRef`.

```jsx
// React 19+
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />
}

// Antes (sigue funcionando)
const InputLegacy = forwardRef(function Input(props, ref) {
  return <input ref={ref} {...props} />
})
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import { useRef, useImperativeHandle } from 'react'

function TextInput(props, ref) {
  const inputEl = useRef(null)

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputEl.current.focus()
    },
  }))

  return <input ref={inputEl} type='text' />
}
```

Creamos una referencia `inputEl` con `useRef` y la pasamos al elemento `<input>` como prop `ref`. Cuando el componente se monta, la referencia `inputEl` apunta al elemento `<input>` del DOM.

Para acceder al elemento del DOM, usamos la propiedad `current` de la referencia.

Para que el componente padre pueda acceder al método `focus`, usamos el hook `useImperativeHandle`. Este hook recibe dos parámetros: una referencia y una función que devuelve un objeto con las propiedades y métodos que queremos que sean accesibles desde el componente padre.

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el método `cloneElement` de React?

Te permite clonar un elemento React y añadirle o modificar las props que recibe.

```jsx
import { cloneElement } from 'react'

const Hello = ({ name }) => <h1>Hello {name}</h1>

const App = () => {
  const element = <Hello name='midudev' />

  return (
    <div>
      {cloneElement(element, { name: 'TMChein' })}
      {cloneElement(element, { name: 'Madeval' })}
      {cloneElement(element, { name: 'Gorusuke' })}
    </div>
  )
}
```

En este ejemplo, clonamos `element` que tenía la prop `midudev` y le pasamos una prop `name` diferente cada vez. Esto renderizará tres veces el componente `Hello` con los nombres `TMChein`, `Madeval` y `Gorusuke`. Sin rastro de la prop original.

Puede ser útil para modificar un elemento que ya nos viene de un componente padre y del que no tenemos posibilidad de re-crear con el componente.

- [Código de ejemplo](https://stackblitz.com/edit/react-ts-tc39vr?file=App.tsx)

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué son los portales en React?

Los portales nos permiten renderizar un componente en un nodo del DOM que no es hijo del componente que lo renderiza.

Es perfecto para ciertos casos de uso como, por ejemplo, modales:

```jsx
import { createPortal } from 'react-dom'

function Modal() {
  return createPortal(
    <div className='modal'>
      <h1>Modal</h1>
    </div>,
    document.getElementById('modal')
  )
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import { useEffect, useState } from 'react'

function Movies() {
  const [movies, setMovies] = useState([])

  useEffect(() => {
    // creamos un controlador para abortar la petición
    const abortController = new AbortController()

    // pasamos el signal al fetch para que sepa que debe abortar
    fetchMovies({ signal: abortController.signal })
      .then(() => {
        setMovies(data.results)
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('fetch aborted')
        }
      })

    return () => {
      // al desmontar el componente, abortamos la petición
      // sólo funcionará si la petición sigue en curso
      abortController.abort()
    }
  })

  // ...
}

// Debemos pasarle el parámetro signal al `fetch`
// para que enlace la petición con el controlador
const fetchMovies = ({ signal }) => {
  return fetch('https://api.themoviedb.org/3/movie/popular', {
    signal, // <--- pasamos el signal
  }).then(response => response.json())
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import { useDebugValue } from 'react'

function useCustomHook() {
  const value = 'custom value'
  useDebugValue(value)
  return value
}
```

En este ejemplo, React DevTools mostrará `custom value` como información adicional del hook.

Es especialmente útil en hooks reutilizables complejos (por ejemplo, hooks de formularios, sockets, estado remoto o sincronización).

Si quieres, también puedes formatear el valor para mostrar información más clara:

```jsx
useDebugValue(status, value => `Estado: ${value}`)
```

Aunque no suele tener impacto significativo, se usa principalmente con propósito de desarrollo y diagnóstico.

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es el `Profiler` en React?

`Profiler` es una herramienta de React para medir el coste de renderizado de un subárbol de componentes.

Su objetivo es ayudarte a detectar cuellos de botella de rendimiento y validar si una optimización realmente mejora tiempos de render.

```jsx
import { Profiler } from 'react'

function App() {
  return (
    <Profiler
      id='App'
      onRender={(id, phase, actualDuration) => {
        console.log({ id, phase, actualDuration })
      }}
    >
      <Component />
    </Profiler>
  )
}
```

El componente `Profiler` recibe dos props clave:

- `id`: es un identificador único para el componente
- `onRender`: es una función que se ejecuta cada vez que el componente se renderiza

Con esos datos puedes saber, por ejemplo, qué componentes renderizan más de lo esperado o cuáles tardan demasiado en actualizarse.

Recomendación práctica: úsalo en desarrollo para auditar zonas críticas, y combina sus resultados con React DevTools Profiler para obtener una visión completa del rendimiento.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes acceder al evento nativo del navegador en React?

En React, el manejador recibe un `SyntheticEvent`. Si necesitas acceder al evento nativo del navegador, puedes hacerlo con `event.nativeEvent`.

Esto es útil en casos avanzados donde necesitas una propiedad específica del evento nativo o integrarte con librerías que esperan ese objeto.

```jsx
function Button({ onClick }) {
  return <button onClick={e => onClick(e.nativeEvent)}>Haz clic aquí</button>
}
```

En la mayoría de escenarios no hace falta bajar al evento nativo: con la API de `SyntheticEvent` suele ser suficiente y más portable.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes registrar un evento en la fase de captura en React?

En React, los eventos se manejan por defecto en fase de burbuja. Si necesitas capturarlos antes de que lleguen al objetivo o de que suban por el árbol, debes usar la versión con sufijo `Capture`.

React sigue la convención:

- Burbuja: `onClick`, `onChange`, `onFocus`, etc.
- Captura: `onClickCapture`, `onChangeCapture`, `onFocusCapture`, etc.

Ejemplo:

```jsx
function Button({ onClick }) {
  return <button onClickCapture={onClick}>Haz clic aquí</button>
}
```

Usar la fase de captura es útil cuando quieres interceptar eventos de forma temprana (por ejemplo, logging global, analítica o reglas de interacción antes de que se ejecute la lógica de componentes hijos).

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedes mejorar el rendimiento del Server Side Rendering en React para evitar que bloquee el hilo principal?

Aunque puedes usar el método `renderToString` para renderizar el HTML en el servidor, este método es síncrono y bloquea el hilo principal. Para evitar que bloquee el hilo principal, debemos usar el método `renderToPipeableStream`:

```jsx
let didError = false
const stream = renderToPipeableStream(<App />, {
  onShellReady() {
    // El contenido por encima de los límites de Suspense ya están listos
    // Si hay un error antes de empezar a hacer stream, mostramos el error adecuado
    res.statusCode = didError ? 500 : 200
    res.setHeader('Content-type', 'text/html')
    stream.pipe(res)
  },
  onShellError(error) {
    // Si algo ha ido mal al renderizar el contenido anterior a los límites de Suspense, lo indicamos.
    res.statusCode = 500
    res.send(
      '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>'
    )
  },
  onAllReady() {
    // Si no quieres hacer streaming de los datos, puedes usar
    // esto en lugar de onShellReady. Esto se ejecuta cuando
    // todo el HTML está listo para ser enviado.
    // Perfecto para crawlers o generación de sitios estáticos
    // res.statusCode = didError ? 500 : 200
    // res.setHeader('Content-type', 'text/html')
    // stream.pipe(res)
  },
  onError(err) {
    didError = true
    console.error(err)
  },
})
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué diferencia hay entre `renderToStaticNodeStream()` y `renderToPipeableStream()`?

`renderToStaticNodeStream()` devuelve un stream de nodos estáticos, esto significa que no añade atributos extras para el DOM que React usa internamente para poder lograr la hidratación del HTML en el cliente. Esto significa que no podrás hacer el HTML interactivo en el cliente, pero puede ser útil para páginas totalmente estáticas.

`renderToPipeableStream()` devuelve un stream de nodos que contienen atributos del DOM extra para que React pueda hidratar el HTML en el cliente. Esto significa que podrás hacer el HTML interactivo en el cliente pero puede ser más lento que `renderToStaticNodeStream()`.

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useDeferredValue`?

El hook `useDeferredValue` nos permite renderizar un valor con una prioridad baja. Esto es útil para renderizar un valor que no es crítico para la interacción del usuario.

```jsx
function App() {
  const [text, setText] = useState('¡Hola mundo!')
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 })

  return (
    <div className='App'>
      {/* Seguimos pasando el texto actual como valor del input */}
      <input value={text} onChange={handleChange} />
      ...
      {/* Pero la lista de resultados se podría renderizar más tarde si fuera necesario */}
      <MySlowList text={deferredText} />
    </div>
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el método `renderToReadableStream()`?

Este método es similar a `renderToNodeStream`, pero está pensado para entornos que soporten Web Streams como `Deno`.

Un ejemplo de uso sería el siguiente:

```jsx
const controller = new AbortController()
const { signal } = controller

let didError = false

try {
  const stream = await renderToReadableStream(
    <html>
      <body>Success</body>
    </html>,
    {
      signal,
      onError(error) {
        didError = true
        console.error(error)
      },
    }
  )

  // Si quieres enviar todo el HTML en vez de hacer streaming, puedes usar esta línea
  // Es útil para crawlers o generación estática:
  // await stream.allReady

  return new Response(stream, {
    status: didError ? 500 : 200,
    headers: { 'Content-Type': 'text/html' },
  })
} catch (error) {
  return new Response(
    '<!doctype html><p>Loading...</p><script src="clientrender.js"></script>',
    {
      status: 500,
      headers: { 'Content-Type': 'text/html' },
    }
  )
}
```

**[⬆ Volver a índice](#índice)**

---

#### ¿Qué es la función `use` en React y para qué se utiliza?

La función `use` permite esperar promesas o leer recursos asíncronos directamente dentro de un componente sin tener que encadenar hooks adicionales. React suspende el componente hasta que la promesa se resuelva (o se rechace) y reanuda el render con el valor devuelto.

Se usa principalmente en componentes de servidor, pero también funciona en componentes cliente que reciben recursos que implementan el contrato de suspenso.

```jsx
import { use } from 'react'

async function fetchProduct(id) {
  const response = await fetch(`https://api.example.com/products/${id}`, {
    cache: 'no-store',
  })
  if (!response.ok) throw new Error('Producto no encontrado')
  return response.json()
}

export default function ProductPage({ params }) {
  const product = use(fetchProduct(params.id))

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  )
}
```

También puedes usar `use` con funciones como `cache` o `resources` que devuelven un objeto con un método `read()`, simplificando la lectura de datos sin boilerplate.

**[⬆ Volver a índice](#índice)**

---

#### ¿Para qué sirve el hook `useInsertionEffect`?

`useInsertionEffect` se ejecuta de forma sincrónica justo antes de que React inserte mutaciones en el DOM. Es perfecto para librerías de CSS-in-JS que necesitan inyectar estilos antes de que el navegador pinte los cambios, evitando parpadeos (`FOUC`).

No debe usarse para lógica que lea o escriba en el DOM: para eso siguen existiendo `useLayoutEffect` o `useEffect`. El objetivo es añadir estilos (o anotaciones) en el orden correcto.

```jsx
import { useInsertionEffect } from 'react'

function useCss(className, rules) {
  useInsertionEffect(() => {
    const styleTag = document.createElement('style')
    styleTag.dataset.injected = className
    styleTag.append(rules)
    document.head.append(styleTag)

    return () => {
      styleTag.remove()
    }
  }, [className, rules])
}

export function Button({ children }) {
  useCss('btn', '.btn{padding:0.75rem 1rem;border-radius:9999px;}')
  return <button className='btn'>{children}</button>
}
```

Si no necesitas inyectar estilos dinámicamente, usa hojas de estilo tradicionales o CSS Modules; `useInsertionEffect` está pensado para casos muy concretos.

> Este hook está pensado para bibliotecas de CSS en JS y no para uso directo en aplicaciones. Si no estás creando una librería de estilos, probablemente no necesites usarlo.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo se complementan `useMemo`, `useCallback`, `useTransition` y `useDeferredValue` para optimizar el rendimiento?

Cada una de estas APIs ataca un cuello de botella distinto; combinarlas ayuda a mantener la UI fluida sin caer en micro-optimizaciones innecesarias:

- `useMemo` memoriza valores derivados costosos (cálculos, filtros) mientras sus dependencias no cambien.
- `useCallback` memoriza funciones para evitar recrearlas en cada render y que componentes memoizados se vuelvan a renderizar sin necesidad.
- `useTransition` baja la prioridad de actualizaciones no urgentes (por ejemplo, recalcular una lista) para que la UI siga respondiendo.
- `useDeferredValue` retrasa la lectura de un valor concreto, útil cuando el input del usuario debe sentirse inmediato pero el resultado puede llegar con un pequeño retraso.

```jsx
function SearchProducts({ products }) {
  const [query, setQuery] = useState('')
  const [isPending, startTransition] = useTransition()
  const deferredQuery = useDeferredValue(query)

  const filtered = useMemo(() => {
    const normalized = deferredQuery.trim().toLowerCase()
    return products.filter(product =>
      product.name.toLowerCase().includes(normalized)
    )
  }, [products, deferredQuery])

  const handleChange = useCallback(event => {
    const value = event.target.value
    startTransition(() => setQuery(value))
  }, [])

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <p>Filtrando...</p>}
      <ul>
        {filtered.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </>
  )
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  )
}

test('Counter incrementa al hacer clic', async () => {
  const user = userEvent.setup()
  render(<Counter />)

  expect(screen.getByText('Count: 0')).toBeInTheDocument()
  await user.click(screen.getByRole('button', { name: 'Increment' }))
  expect(screen.getByText('Count: 1')).toBeInTheDocument()
})
```

Buenas prácticas: consulta por rol/texto (`getByRole`, `getByLabelText`), evita acoplarte a classNames internos y prueba comportamientos, no implementación.

**[⬆ Volver a índice](#índice)**

---

#### ¿Cómo puedo hacer testing de un hook?

Puedes probar un hook con `renderHook` de `@testing-library/react` (ya no hace falta el paquete antiguo `@testing-library/react-hooks` en versiones recientes).

```jsx
import { renderHook, act } from '@testing-library/react'

function useCounter() {
  const [count, setCount] = useState(0)
  const increment = () => setCount(c => c + 1)
  return { count, increment }
}

test('useCounter', () => {
  const { result } = renderHook(() => useCounter())

  expect(result.current.count).toBe(0)
  act(() => {
    result.current.increment()
  })
  expect(result.current.count).toBe(1)
})
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
// ❌ código incorrecto por saltar las reglas de los hooks
function Counter() {
  const [count, setCount] = useState(0)

  // de forma condicional, creamos un estado con el hook useState
  // lo que rompe la regla de los hooks
  if (count > 0) {
    const [name, setName] = useState('midu')
  }

  return (
    <div>
      {count} {name}
    </div>
  )
}
```

También el siguiente código sería incorrecto, aunque no lo parezca, ya que estamos usando el segundo `useState` de forma condicional (pese a no estar dentro de un `if`) ya que se ejecutará sólo cuando `count` sea diferente a `0`:

```jsx
// ❌ código incorrecto por saltar las reglas de los hooks
function Counter() {
  const [count, setCount] = useState(0)

  // si count es 0, no se ejecuta el siguiente hook useState
  // ya que salimos de la ejecución aquí
  if (count === 0) return null

  const [name, setName] = useState('midu')

  return (
    <div>
      {count} {name}
    </div>
  )
}
```

Ten en cuenta que si ignoras este error, es posible que tus componentes no se comporten de forma correcta y tengas comportamientos no esperados en el funcionamiento de tus componentes.

Para arreglar este error, como hemos comentado antes, debes asegurarte de que los hooks se llaman en el mismo orden en cada renderizado. El último ejemplo quedaría así:

```jsx
function Counter() {
  const [count, setCount] = useState(0)
  // movemos el hook useState antes del if
  const [name, setName] = useState('midu')

  if (count === 0) return null

  return (
    <div>
      {count} {name}
    </div>
  )
}
```

Recomendamos revisar las siguientes secciones:

- [¿Cuáles son las reglas de los hooks en React?](#cuales-son-las-reglas-de-los-hooks-en-react)

**[⬆ Volver a índice](#índice)**

---

#### Can’t perform a React state update on an unmounted component

Este error se produce cuando intentamos actualizar el estado de un componente que ya no está montado. Esto puede ocurrir cuando el componente se desmonta antes de que se complete una petición asíncrona, por ejemplo:

```jsx
function Movies() {
  const [movies, setMovies] = useState([])

  useEffect(() => {
    fetchMovies().then(() => {
      setMovies(data.results)
    })
  })

  if (!movies.length) return null

  return (
    <section>
      {movies.map(movie => (
        <article key={movie.id}>
          <h2>{movie.title}</h2>
          <p>{movie.overview}</p>
        </article>
      ))}
    </section>
  )
}
```

Parece un código inofensivo, pero imagina que usamos este componente en una página. Si el usuario navega a otra página antes de que se complete la petición, el componente se desmontará y React lanzará el error, ya que intentará ejecutar el `setMovies` en un componente (Movies) que ya no está montado.

Para evitar este error, podemos usar una variable booleana con `useRef` que nos indique si el componente está montado o no. De esta manera, podemos evitar que se ejecute el `setMovies` si el componente no está montado:

```jsx
function Movies() {
  const [movies, setMovies] = useState([])
  const mounted = useRef(false)

  useEffect(() => {
    mounted.current = true

    fetchMovies().then(() => {
      if (mounted.current) {
        setMovies(data.results)
      }
    })

    return () => (mounted.current = false)
  })

  // ...
}
```

Esto soluciona el problema pero **no evita que se haga la petición aunque el componente ya no esté montado**. Para cancelar la petición y así ahorrar transferencia de datos, podemos abortar la petición usando la API `AbortController`:

```jsx
function Movies() {
  const [movies, setMovies] = useState([])

  useEffect(() => {
    // creamos un controlador para abortar la petición
    const abortController = new AbortController()

    // pasamos el signal al fetch para que sepa que debe abortar
    fetchMovies({ signal: abortController.signal })
      .then(() => {
        setMovies(data.results)
      })
      .catch(error => {
        if (error.name === 'AbortError') {
          console.log('fetch aborted')
        }
      })

    return () => {
      // al desmontar el componente, abortamos la petición
      // sólo funcionará si la petición sigue en curso
      abortController.abort()
    }
  })

  // ...
}

// Debemos pasarle el parámetro signal al `fetch`
// para que enlace la petición con el controlador
const fetchMovies = ({ signal }) => {
  return fetch('https://api.themoviedb.org/3/movie/popular', {
    signal, // <--- pasamos el signal
  }).then(response => response.json())
}
```

Sólo ten en cuenta la compatibilidad de `AbortController` en los navegadores. En [caniuse](https://caniuse.com/#feat=abortcontroller) puedes ver que no está soportado en Internet Explorer y versiones anteriores de Chrome 66, Safari 12.1 y Edge 16.

**[⬆ Volver a índice](#índice)**

---

#### Too many re-renders. React limits the number of renders to prevent an infinite loop

Este error indica que algo dentro de nuestro componente está generando muchos pintados que pueden desembocar en un _loop_ (bucle) infinito. Algunas de las razones por las que puede aparecer este error son las siguientes:

1. **Llamar a una función que actualiza el estado en el renderizado del componente.**

```jsx
function Counter() {
  const [count, setCount] = useState(0)

  // ❌ código incorrecto
  // no debemos actualizar el estado de manera directa
  setCount(count + 1)

  return <div>{count}</div>
}
```

Lo que sucede en este ejemplo, es que al _renderizarse_ el componente, se llama a la función `setCount` para actualizar el estado. Una vez el estado es actualizado, se genera nuevamente un _render_ del componente y se repite todo el proceso infinitas veces.

Una posible solución sería:

```jsx
function Counter() {
  // ✅ código correcto
  // se pasa el valor inicial deseado en el `useState`
  const [count, setCount] = useState(1)

  return <div>{count}</div>
}
```

**Llamar directamente a una función en un controlador de eventos.**

```jsx
function Counter() {
  const [count, setCount] = useState(0)

  // ❌ código incorrecto
  //se ejecuta directamente la función `setCount` y provoca un renderizado infinito
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={setCount(count + 1)}>Incrementar</button>
    </div>
  )
}
```

En este código, se está ejecutando la función `setCount` que actualiza el estado en cada renderizado del componente, lo que provoca renderizaciones infinitas.

La manera correcta sería la siguiente:

```jsx
function Counter() {
  const [count, setCount] = useState(0)

  // ✅ código correcto
  // se pasa un callback al evento `onClick`
  // esto evita que la función se ejecute en el renderizado
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  )
}
```

**Usar incorrectamente el Hook de `useEffect`.**

Al ver este ejemplo:

```jsx
function Counter() {
  const [count, setCount] = useState(0)

  // ❌ código incorrecto
  useEffect(() => {
    setCounter(counter + 1)
  }) // 👈️ no colocar el array de dependencias

  return <div>{count}</div>
}
```

Lo que ocurre, es que al no colocar un array de dependencias en el hook de `useEffect`, estamos provocando que el código que se encuentre dentro se ejecute en cada renderizado del componente. Al llamar al `setCounter` y actualizar el estado, obtenemos nuevamente renderizaciones infinitas.

Para solucionarlo, podemos hacer lo siguiente:

```jsx
function Counter() {
  const [count, setCount] = useState(0)

  // ✅ código correcto
  // estamos indicando que sólo queremos que el código se ejecute una vez
  useEffect(() => {
    setCounter(counter + 1)
  }, []) //colocamos un array de dependencias vacío.

  return <div>{count}</div>
}
```
/* Detailed source-code truncated for AI context efficiency. */
```jsx
import React, { useState } from 'react'

function OneWayBindingExample() {
  const [name, setName] = useState('midu')

  return (
    <div>
      <p>Hello, {name}</p>
      <input
        type='text'
        placeholder='Enter your name'
        onChange={e => setName(e.target.value)}
      />
    </div>
  )
}

export default OneWayBindingExample
```

_En este ejemplo, el componente tiene un estado inicial llamado **name** con el valor **midu**. La función **setName** se utiliza para actualizar el estado **name** cuando se produce un evento **onChange** en el input. Sin embargo, la **vista** (la linea que muestra **Hello, {name}**) no tiene la capacidad de actualizar el estado **name**._

**Two-Way Binding** _(Enlace bidireccional)_:

Se refiere a la capacidad de un componente para actualizar su estado y su vista de manera automática tanto cuando cambia el estado como cuando se produce un evento en la vista. En otras palabras, el **Two-Way Binding** significa que el flujo de datos es bidireccional, desde el estado hacia la vista y desde la vista hacia el estado. Para lograr esto se utilizan en conjunto con los eventos, como **onChange**, para capturar la información de los inputs y actualizar el estado, _React no proporciona un mecanismo nativo para two-way binding, pero se puede lograr utilizando librerías como react-forms o formik._

Por ejemplo:

```jsx
import React, { useState } from 'react'

function TwoWayBindingExample() {
  const [name, setName] = useState('midu')

  return (
    <div>
      <p>Hello, {name}</p>
      <input
        type='text'
        placeholder='Enter your name'
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  )
}

export default TwoWayBindingExample
```

_En este ejemplo, el componente tiene un estado inicial llamado **name** con el valor **midu**. La función **setName** se utiliza para actualizar el estado **name** cuando se produce un evento **onChange** en el input, y se puede ver reflejado en el valor del input. Sin embargo, en este caso se está utilizando el atributo **value** para que el valor del input sea actualizado con el valor del estado, es decir, se está actualizando tanto el estado como el input._

**Por si no quedó claro:**

En términos sencillos, el **Binding** en React puede compararse con una cafetera y una taza de café. **El estado** del componente sería la _cafetera_, y **la vista** del componente sería _la taza de café_.

En el caso del **One-Way Binding**, la cafetera solo puede verter café en una dirección, hacia la taza de café. Esto significa que la cafetera puede llenar automáticamente la taza de café con café fresco, pero la taza de café no puede devolver automáticamente el café a la cafetera. De esta manera, **el estado** del componente _(la cafetera)_ puede actualizar automáticamente **la vista** _(la taza de café)_ cuando cambia, pero la **vista** no puede actualizar automáticamente el **estado**.

En el caso del **Two-Way Binding**, la cafetera puede verter y recibir café en ambas direcciones, hacia y desde la taza de café (no sé por qué alguien necesitaría hacer algo así). Esto significa que la cafetera puede llenar y vaciar automáticamente la taza de café con café fresco. De esta manera, tanto **el estado** del componente como **la vista** pueden actualizarse automáticamente entre sí.

Sí quieres saber más comparto el siguiente enlace:  
[How To Bind Any Component to Data in React: One-Way Binding](https://www.telerik.com/blogs/how-to-bind-any-component-data-react-one-way-binding)

**[⬆ Volver a índice](#índice)**

---

---