Estoy obteniendo datos JSON de mi servidor Firebase y, a veces, tiene campos desordenados.
Quiero ejecutar un useEffect cuando cambia el contenido del objeto json... pero intento hacer lo siguiente
useEffect(() => {}, [JSON.stringify(data)]);no funciona correctamente debido a los campos desordenados.
He hecho una merienda, simulando mi escenario actual.
¿Como puedo resolver esto?
Nota: Parece que sería mejor evitar la actualización de estado... ¿alguna idea?
De esta respuesta: https://stackoverflow.com/a/3849480/8861638
Podemos comparar dos objetos profundamente con esta función, ya que usa la recursividad, está garantizado para llegar hasta el final.
function countProps(obj) { var count = 0; for (k in obj) { if (obj.hasOwnProperty(k)) { count++; } } return count; }; function objectEquals(v1, v2) { if (typeof(v1) !== typeof(v2)) { return false; } if (typeof(v1) === "function") { return v1.toString() === v2.toString(); } if (v1 instanceof Object && v2 instanceof Object) { if (countProps(v1) !== countProps(v2)) { return false; } var r = true; for (k in v1) { r = objectEquals(v1[k], v2[k]); if (!r) { return false; } } return true; } else { return v1 === v2; } } Ahora, podemos aprovechar la función objectEquals para hacer una comparación entre la propiedad de datos nueva y existente en ese componente.
Primero, queremos realizar un seguimiento de los datos cuando lleguen para poder compararlos con los futuros, podemos usar el useRef de manera integral para no activar ningún renderizado.
// data is our initial state. const savedData = useRef(data || {}); Luego, podemos personalizar useEffect para escuchar la comparación de los savedData y los nuevos datos que vienen y ver si hay un cambio o no.
const dataChanged = objectEquals(data, savedData.current); useEffect(() => { if (dataChanged) { savedData.current = data; // Do something... } }, [dataChanged])