Introducción al uso de hooks en React js
- 1. React JS
- 2. Hooks En Octubre del 2008 el equipo de Facebook presento a la comunidad una nueva propuesta: los Hooks. Los Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes de función. Los hooks no funcionan dentro de las clases — te permiten usar React sin clases.
- 3. Hooks • React proporciona algunos Hooks incorporados como useState. También puedes crear tus propios Hooks para reutilizar el comportamiento con estado entre diferentes componentes. Primero veremos los Hooks incorporados.
- 4. Hooks de estado El estado permite que un componente «recuerde» información como la entrada de un usuario. Por ejemplo, un componente de formulario puede utilizar un estado para guardar la entrada del valor mientras que un componente de galería de imágenes puede utilizar un estado para guardar el índice de la imagen seleccionada.
- 5. Hooks de contexto El contexto permite a un componente recibir información de padres lejanos sin pasarlas como props. Por ejemplo, el componente en el nivel superior de tu aplicación puede pasar el actual tema de la UI a todos los componentes dentro, sin importar la profundidad dentro del componente.
- 6. Hooks de refs Las refs le permiten a un componente mantener alguna información que no es utilizada para el renderizado. A diferencia del estado, actualizar una ref no vuelve a renderizar tu componente. Las refs son una «puerta de escape» del paradigma de React. Son útiles cuando necesitas trabajar con sistemas distintos de React, como las APIs integradas del navegador.
- 7. El Hook de Efecto permite a un componente conectarse y sincronizarse con sistemas externos. Esto incluye lidiar con la red, el DOM del navegador, animaciones, widgets escritos utilizando una biblioteca de UI diferente y otro código que no es de React.
- 8. Hooks de efecto Una forma común de optimizar el rendimiento del re renderizado es evitar trabajo innecesario. Por ejemplo, puedes decirle a React que reutilice un cálculo guardado en caché o que se salte un re renderizado si los datos no han cambiado desde el renderizado anterior.