tengo una app en react, en un useEffect hago una request a una api rest y hago un dispatch, al hacer esto useEffect requiere agregar como segundo parametro opcional el dispatch porque cree que este va a cambiar su valor, lo agrego y este useEffect se queda en bucle haciendo peticiones y dispatch todo el rato, en un bucle, cuando agrego el [], como segundo parametro como es comun para que solo se ejecute una vez el useEffect, esto funciona pero el linter molesta por eso y me pregunto si existe otra forma de controlar ese problema?
1 respuesta
En React, el segundo parametro del useEffect debe contener todos los elementos mutables. Esto para garantizar que se tiene la última versión de los datos de cada state (del componente, context o redux) en el momento de la ejecución del state.
React se programa de forma reactiva no imperativa. Esto quiere decir que los códigos se ejecutan siempre pero puede controlar cuando se deben actualizar dependiendo de los valores que participan la función. Esto mismo pasa con la actualización de componentes según sus props que se puede controlar con el segundo paramentro de React.memo.
En la práctica esto se traduce en que su useEffect debe tener un if que verfique que los valores cambiaron.
const [arrayJson, setArrayJson] = useState(undefined);
const getData = async () => {
const resp = fetch('getJson');
const data = resp.json();
setArrayJson(data);
}
useEffect(() => {
if(!arrayJson) {
getData();
}
}
return (
<div>
<ul>
{arrayJson && arrayJson.map(aj =>
<li key={aj.id}>{aj.name}</li>
)
}
</ul>
</div>
)