He tenido algunos problemas con mis accesorios que no se actualizan correctamente cuando se destruyen en combinación con las dependencias de useEffect. Ahora sé cómo puedo solucionar el problema, pero no entiendo por qué sucede.
El siguiente ejemplo no funciona correctamente y no muestra cambios cuando cambia la propiedad.
const Devices = ({ apis }) => { const [ availableApis, _setAvailableApis ] = useState([]) const availableApisRef = useRef( availableApis ) const setAvailableApis = v => { availableApisRef.current = v _setAvailableApis( v ) } useEffect(() => { let availableApis = [] apis.forEach( v => { console.log(v) if( v.available === true ) { availableApis.push( v ) } }) console.log(availableApis) setAvailableApis( availableApis ) }, [ apis ]) return <somecomponent key={v.name} /> } Si reemplazo const Devices = ({ apis }) => { with const Devices = props => {
y reemplace }, [ apis ]) con }, [ props ]) se representan los cambios.
Pensé que esto tendría el mismo efecto, pero no es así.
Nota: Este problema no ocurre cuando no se usa el efecto useEffect, sino que la variable simplemente se usa en un componente.
const ApiStatus = ({ available, apiName, openLogin }) => { return ( <StatusContainer onClick={openLogin} available={available}> <p> { apiName } - { available ? "Beschikbaar" : "Uitgelogd" } </p> </StatusContainer> ) }Si reemplazo
const Devices = ({ apis }) => {withconst Devices = props => {andreplace }, [ apis ])with}, [ props ])los cambios se procesan.
Esas son cosas muy diferentes. El primero vuelve a ejecutar el efecto cuando cambia apis , ignorando cualquier otro cambio. El segundo vuelve a ejecutar el efecto cada vez que props el objeto. (Y creo que obtiene un nuevo objeto [aunque posiblemente con el mismo contenido] en cada representación del componente secundario, por lo que probablemente no quiera eso).
Si acepta props en lugar de {apis} , la matriz de dependencia equivalente para useEffect es [props.apis] .
Mirando el código de su efecto, parece que depende de apis y no de otros accesorios, por lo que tiene sentido que la matriz de dependencia sea [apis] (o [props.apis] si no se desestructura).