Índice del contenido[Esconder][Espectáculo]
Si eres un desarrollador de React que aún no conoce los ganchos de React, ahora es el momento. Esta publicación analizará en detalle el useEffect React Hook. Es el gancho equivalente a una navaja suiza. Resuelve una variedad de problemas, por ejemplo, cómo obtener datos cuando se monta un componente, cómo ejecutar código cuando cambia un estado o una propiedad, cómo configurar temporizadores o intervalos, etc.
Un useEffect se usa para prácticamente cualquier cosa que desee "hacer" en un componente React que no devuelve JSX (cualquier tipo de efecto secundario). También puede tener varios efectos de uso por componente.
Todo este poder tiene un costo: a menos que comprenda cómo funciona, puede resultar desconcertante. En esta publicación, veremos una variedad de ejemplos para que pueda comprender el modelo conceptual y aplicarlo a su propio código.
Reaccionar ganchos – ¿Qué está tratando de resolver?
Los ganchos se introdujeron por primera vez en la versión 16.8 de React y ahora los utilizan muchos proyectos de React. Hooks supera el problema de la repetición de código entre componentes. Están escritos sin el uso de clases. Esto no implica que React esté abandonando clases; los ganchos son simplemente un método alternativo.
React le permite crear rápidamente componentes sofisticados con lógica de estado. Es difícil separar estos componentes ya que la clase se basa en React Lifecycle Methods. Aquí es donde entran los React Hooks.
Le permiten dividir un componente en funciones más pequeñas. En lugar de dividir el código en partes más pequeñas según los métodos del ciclo de vida, ahora puede organizar y separar el código en unidades más pequeñas según la funcionalidad.
¿Qué es useEffect Hook?
Los ganchos son funciones que le permiten acceder al estado y otras capacidades de reacción sin tener que escribir clases ES6. La API de ganchos de reacción tiene un gancho llamado useEffect. Si está familiarizado con los ciclos de vida de reacción, el enlace useEffect es el mismo que el componentDidMount, componentDidUpdatey componentWillUnmount combinación de métodos de ciclo de vida.
Según la documentación de React Hooks, se creó para resolver algunos de los problemas con los métodos del ciclo de vida de los componentes de la clase ES6.
Sintaxis
El primer argumento es una función de devolución de llamada, que se ejecuta de forma predeterminada después de cada procesamiento. El segundo parámetro es una matriz de dependencia opcional que le indica al gancho que devuelva la llamada solo si cambia el estado del objetivo.
El Hook compara los estados históricos y actuales de cada dependencia. Si los dos valores no coinciden, Hook invoca la devolución de llamada especificada en el primer parámetro. Las matrices de dependencia alteran el comportamiento de devolución de llamada habitual y garantizan que Hook ignore todos los demás componentes en el alcance del componente.
Uso básico
Para guardar un mensaje, estoy usando React useState en el ejemplo de código anterior. Después de eso, tomo la variable de estado de mi mensaje y la imprimo en la pantalla. Sin embargo, ahora quiero usarEffect para modificar el mensaje un segundo después de que se haya montado el componente.
He insertado mi efecto detrás de la línea useState después de importar useEffect del framework React. El primer parámetro de useEffect es una función. Cuando se ejecuta este controlador de función, se encargará de cualquier efecto secundario que proporcione. La función es una función de devolución de llamada que se llama cuando ocurre uno de los eventos del ciclo de vida del componente React.
¿Cuándo usarlo?
El hook useEffect puede ser útil en una variedad de situaciones. Los siguientes son los más cruciales:
- Podemos cambiar este parámetro desde el lado del cliente cuando deseamos obtener datos según un argumento proporcionado. Se recuperará después de que el parámetro se haya actualizado con datos nuevos.
- Si queremos recuperar datos de un punto final de API y mostrarlos en el lado del cliente. Cuando nuestro componente se procesa, se ejecuta la función o el controlador asignado al enlace useEffect y se recuperan los datos en los estados del componente. Estos estados se emplean luego en los componentes de la interfaz de usuario.
- Cuando su componente se basa en datos del mundo exterior y no podemos garantizar que los datos lleguen, debemos usarEffect (quizás el servidor esté ahí abajo). En lugar de generar problemas y evitar que se muestren otros componentes, colóquelos en el enlace useEffect.
Use cases
Si el componente se vuelve a renderizar después de la primera ejecución, no se ejecutará.
Cada vez que un componente se renderiza o vuelve a renderizar, siempre debe ejecutarse.
Por defecto, el programa solo se ejecuta una vez. Luego, si los valores de prop cambian, ejecute:
Para actividades asincrónicas, utilice siempre useEffect.
Los bloques de código useEffect son marcadores obvios de trabajos asincrónicos para sus compañeros desarrolladores. Es posible crear código asincrónico sin usar useEffect, pero este no es el "método React" y aumenta tanto la complejidad como el riesgo de errores.
El uso de useEffect en lugar de escribir código asíncrono que puede detener la interfaz de usuario es una técnica bien conocida en la comunidad de React, especialmente por la forma en que el equipo de React lo ha creado para generar un efecto secundario.
Otra ventaja de utilizarlo es que los desarrolladores pueden simplemente revisar el código e inmediatamente detectar el código que se ejecuta "fuera del flujo de control", lo que se vuelve importante solo después del primer ciclo de renderizado. Además, los bloques son adecuados para la extracción en Hooks personalizados reutilizables e incluso más semánticos.
Un ejemplo
Usando el código useEffect, incremente un número por segundo.
Conclusión
Comprender los principios de diseño subyacentes y las mejores prácticas de useEffect Hook, en mi opinión, es una habilidad fundamental que debe aprender si desea convertirse en un desarrollador de React del siguiente nivel.
Para resumir, useEffect Hook recibe una función que incluye una lógica completa imperativa y potencialmente efectiva. La matriz de dependencia, que es el segundo parámetro, se puede utilizar para influir en la ejecución. Al tratar con él, también es necesario escribir un código de limpieza usando la función de retorno.
Háganos saber en los comentarios si el artículo fue útil.
Deje un comentario