Cerita latar

Saya sedang membuat aplikasi menggunakan Firebase di React, dan saya terkejut saat mengetahui bahwa saya telah mencapai batas baca 50k untuk hari itu. Saya tidak tahu bagaimana hal itu mungkin terjadi karena aplikasi saya hanya berjalan secara lokal di mesin saya, dan saya adalah SATU-SATUNYA pengguna.

Masalah yang saya hadapi terkait dengan pemasangan ulang komponen saya saat melakukan panggilan asinkron yang mengubah variabel status.

Berikut adalah contoh cara yang buruk untuk melakukan panggilan asinkron menggunakan 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])       
}

Peringatan: Tidak dapat melakukan pembaruan status React pada komponen yang dilepas. Ini adalah no-op, tetapi ini menunjukkan kebocoran memori di aplikasi Anda. Untuk memperbaiki, batalkan semua langganan dan tugas asinkron dalam fungsi pembersihan useEffect.

Saat memanggil setState, komponen Anda akan merender ulang untuk memperbarui DOM dengan perubahan pada nilai tersebut. Ini berarti setVehicles()akan terus melakukan inisialisasi setiap kali komponen dipasang. Ini akan menyebabkan perulangan tanpa henti, yang akan menghabiskan banyak uang saat melakukan panggilan fungsi yang mahal.

Inilah cara saya memperbaikinya.

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]) 
}

Kapan isMounted , falsekode tidak akan berjalan hingga nilai tersebut disetel ke true, saat komponen dipasang kembali.

Semoga ini membantu!

Tingkatkan Pengkodean

Terima kasih telah menjadi bagian dari komunitas kami! Sebelum kamu pergi:

• Tepuk tangan untuk ceritanya dan ikuti penulisnya
• Lihat lebih banyak konten di publikasi Level Up Coding
• Ikuti kami: Twitter | LinkedIn | Buletin