Hooks integrados en React
Hooks de estado
El Estado permite a un componente Por ejemplo, un componente de formulario puede usar el estado para almacenar el valor de entrada, mientras que un componente de galería de imágenes puede usar el estado para almacenar el indicé de la imagen seleccionada.
Para añadir un estado a un componente, usa de estos Hooks:
- declara un estado variable que puedes actualizar directamente.
- declara un estado variable con la lógica de actualización dentro de una
Hooks de Contexto
El Contexto permite a un componente Por ejemplo, tu componente en el nivel más alto de tu aplicación puede pasar el tema de interfaz de usuario actual a todos los componentes debajo, no importa que tan profundo estén.
- lee y se suscribe a un Contexto.
Hooks Ref
Los Refs permiten a un componente como un nodo del DOM or el ID de un timeout. A diferencia del estado, actualizar un ref no no vuelve a renderizar tu componente. Los refs son una “puerta de escape” del paradigma de React. Son útiles cuando necesitas trabajar con sistemas que no son de React, como son las APIs integradas del navegador.
- declara un ref. Puedes conservar cualquier valor en él, pero más frecuentemente se utiliza para conservar un node del DOM.
- te permite personalizar el ref expuesto por tu componente. Es raramente utilizado.
Hooks de Efecto
Los Efectos permiten a un componente Esto incluye lidiar con la red, el DOM del navegador, animaciones, widgets escritos usando una biblioteca UI distinta, y otro código que no sea de React.
- conecta un componente a un sistema externo.
Los Efectos son una “puerta de escape” del paradigma de React. No utilices los Efectos para orquestar el flujo de los datos de tu aplicación. Si no estas interactuando con un sistema externo,
Hay dos variaciones raramente usadas de useEffect con diferencias en la sincronización:
- se activa antes de que el navegador vuelve a pintar la pantalla. Puedes medir la maquetación aquí.
- se activa antes de que React realice cambios al DOM. Las bibliotecas pueden insertar CSS dinámico aquí.
Hooks de rendimiento
Una forma común de optimizar el rendimiento del re-renderizado es saltarse el trabajo innecesario. Por ejemplo, puedes decirle a React que reutilice cálculos que están en la caché o que se salte un re-renderizado si los datos no han cambiado desde el renderizado anterior.
Para saltarse cálculos y re-renderizados innecesarios, usa uno de estos Hooks:
- te permite almacenar en caché el resultado de un cálculo costoso.
- te permite almacenar en caché la definición de una función antes de pasarla a un componente optimizado.
A veces, no podrás saltarte re-renderizados porque la pantalla realmente necesita actualizarse. En ese caso, puede mejorar el rendimiento separando actualizaciones bloqueantes que deben ser síncronas (como escribir en un input) desde actualizaciones no bloqueantes las cuales no necesitan bloquear la interfaz de usuario (como actualizar una gráfica).
Para priorizar el renderizado, usa uno de estos Hooks:
- te permite marcar un estado de transición como no bloqueante y permite a otras actualizaciones interrumpirlo.
- te permite aplazar la actualización de una parte no critica de la UI y permite a las otras partes actualizarse primero.
Otros Hooks
Estos Hooks son mayormente útiles para los autores de bibliotecas y no son comúnmente utilizados para el código de una aplicación.
- te permite personalizar la etiqueta que las herramientas de desarrollo de muestran para tu Hook personalizado.
- permite a un componente se asocie a sí mismo un identificador único. Típicamente es usado con APIs de accesibilidad.
- permite a un componente suscribirse a una store externo.
- allows you to manage state of actions.
Tus propios Hooks
Puedes también como funciones de JavaScript.