useEffect

Vista previa del material en texto

UseEffect 
 
`useEffect` es otro hook en React que te permite realizar efectos secundarios en componentes 
funcionales. Los efectos secundarios son operaciones que no afectan directamente a la 
renderización del componente, como realizar solicitudes a APIs, suscribirse a eventos, manipular el 
DOM, entre otros. 
 
El hook `useEffect` se ejecuta después de cada renderizado del componente y te permite realizar 
operaciones que requieren la limpieza (cleanup) después de cada actualización del componente. 
Puedes pensar en `useEffect` como una combinación de los métodos `componentDidMount`, 
`componentDidUpdate` y `componentWillUnmount` en componentes de clase, todo en un solo 
hook. 
 
Sintaxis del hook `useEffect`: 
 
----------------------------------------------------------- 
useEffect(() => { 
 // Código de efecto secundario 
 return () => { 
 // Código de limpieza (opcional) 
 }; 
}, [dependencias]); 
----------------------------------------------------------- 
 
El `useEffect` recibe dos argumentos: una función que contiene el código del efecto secundario y un 
array opcional de dependencias. Cuando el componente se monta o se actualiza, React ejecutará la 
función del efecto secundario. Si proporcionas un array de dependencias, React realizará la 
comparación entre las dependencias actuales y las anteriores para determinar si el efecto 
secundario debe ejecutarse nuevamente. 
 
Ejemplo de cómo usar `useEffect` en un componente funcional: 
 
--------------------------------------------------------------------------------------------------------------- 
import React, { useState, useEffect } from 'react'; 
 
const Contador = () => { 
 const [count, setCount] = useState(0); 
 
 const incrementar = () => { 
 setCount(count + 1); 
 }; 
 
 const decrementar = () => { 
 setCount(count - 1); 
 }; 
 
 useEffect(() => { 
 console.log('El componente se montó o se actualizó'); 
 // Aquí puedes realizar cualquier efecto secundario, como hacer solicitudes a APIs o suscribirte a 
eventos. 
 
 return () => { 
 console.log('El componente se desmontó'); 
 // Aquí puedes realizar cualquier limpieza necesaria cuando el componente se desmonta. 
 }; 
 }, [count]); // El efecto secundario se ejecutará solo cuando la variable 'count' cambie. 
 
 return ( 
 <div> 
 <p>Contador: {count}</p> 
 <button onClick={incrementar}>Incrementar</button> 
 <button onClick={decrementar}>Decrementar</button> 
 </div> 
 ); 
}; 
 
export default Contador; 
-------------------------------------------------------------------------------------------------------- 
 
En este ejemplo, hemos agregado un `useEffect` al componente `Contador` que imprimirá mensajes 
en la consola cuando el componente se monte, se actualice o se desmonte. También hemos 
proporcionado un array `[count]` como dependencia, lo que significa que el efecto secundario se 
ejecutará solo cuando la variable `count` cambie. 
 
`useEffect` es una herramienta poderosa en React para manejar efectos secundarios y realizar tareas 
como suscripciones, limpieza, gestión de datos asíncronos, entre otros. Es una parte esencial del 
enfoque basado en hooks de React y permite mantener un código limpio y organizado en 
componentes funcionales.