Trasfondo

Estaba creando una aplicación usando Firebase en React y me sorprendió descubrir que había alcanzado mi límite de lectura de 50k para el día. No podía entender cómo diablos eso era posible ya que mi aplicación solo se ejecuta localmente en mi máquina, y yo era el ÚNICO usuario.

El problema al que me enfrenté estaba relacionado con el montaje de mi componente al realizar una llamada asíncrona que cambiaba la variable de estado.

Este es un ejemplo de una manera deficiente de realizar una llamada asíncrona usando useEffect.

import {useEffect} from 'react'
function Example() {
    const [vehicles, setVehicles] = useState([])
    const vehiclesRef = collection(db, 'vehicles')

    useEffect(() => {
        const getVehicles = async () => {
            const data = await getDocs(vehiclesRef)
            setVehicles(data.docs.map( doc => ( // memory leaks 
                        {
                            ...doc.data(), 
                            id:doc.id 
                        }
                    )
                )
            )
        }

        getVehicles()
    },[vehicles])       
}

Advertencia: no se puede realizar una actualización de estado de React en un componente desmontado. Esto no es operativo, pero indica una pérdida de memoria en su aplicación. Para solucionarlo, cancele todas las suscripciones y tareas asincrónicas en una función de limpieza useEffect.

Al llamar setState, su componente se volverá a procesar para actualizar el DOM con los cambios en ese valor. Esto significa que setVehicles()continuará inicializándose cada vez que se monte el componente. Esto provocará un ciclo interminable de renderizado, lo que le costará mucho dinero al realizar costosas llamadas a funciones.

Así es como lo arreglé.

import {useEffect, useRef} from 'react'
function Example() {
    const [vehicles, setVehicles] = useState([])
    const vehiclesRef = collection(db, 'vehicles')

    useEffect(() => {
        let isMounted = true

        const getVehicles = async () => {
            const data = await getDocs(vehiclesRef)
            
            if(isMounted){
                setVehicles(data.docs.map( doc => (
                            {
                                ...doc.data(), 
                                id:doc.id 
                            }
                        )
                    )
                )
            }
        }

        getVehicles()

        console.log(vehicles)

        return () => { isMounted = false }
    }, [vehicles]) 
}

Cuando isMounted es false, el código no se ejecutará hasta que ese valor se establezca en verdadero, cuando el componente se vuelva a montar.

¡Espero que esto ayude!

Codificación de nivel superior

¡Gracias por ser parte de nuestra comunidad! Antes de que te vayas:

• Aplaude la historia y sigue al autor
• Ver más contenido en la publicación Level Up Coding
• Síguenos: Twitter | LinkedIn | Boletin informativo