Tengo una variable de estado que se define de la siguiente manera
const [val, setVal] = useState({ notdone: [], done: [] }) donde done tiene la siguiente estructura
[ { col: "val1", field: "val1", values: [1,2,3]}, { col: "val2", filed: "val2", values:[] } Quiero ejecutar el efecto de uso cuando se done algunos cambios en la matriz de values y también en cada objeto. En mi caso, useEffect se activa cuando elimino/agrego objetos a done . Pero no cuando ocurren algunos cambios dentro de la matriz de values de cada objeto.
¿Cómo puedo tener un reloj en ambos cambios?
useEffect(() => { callback(); }, [val.done.length]); Se puede lograr usando use-deep-compare-effect , pero ¿hay alguna manera de hacerlo sin usar este paquete externo?
la ayuda sería apreciada
Usar solo la longitud de la matriz externa no es una comparación lo suficientemente fuerte. El mejor contraejemplo en su contra es una mutación de matriz donde se elimina un elemento mientras se agrega otro, el resultado es una matriz de la misma longitud.
La verificación de igualdad Object.is de React tampoco realiza la verificación de igualdad profunda que busca.
La única forma que conozco de hacer esto sin una dependencia externa es un poco complicado, pero funciona, es JSON stringify * la matriz para que se use una comparación de cadena completa.
useEffect(() => { callback(); }, [JSON.stringify(val.done)]);* La fuente es básicamente una conversación de Twitter de Dan Abramov
Los controles profundos de igualdad son generalmente una mala idea. Si las entradas son lo suficientemente superficiales como para pensar que la igualdad profunda aún sería rápida, considere usar [JSON.stringify(obj)] en su lugar. Tenga en cuenta que no comparará funciones.