Bug list of React users

Question

I’m trying to list a list of users of the database, but it does not load when starting the application and not even if I update the emulator of android studio by pressing 'RR', already tested on my mobile and also happens the same thing, but the strange thing is that if I give a Ctrl+s in vscode (which I’m using to codate) the list loads. I’m using Hooks and firebase to do this; in order to get the listing right, I had to use list.push(), I think that’s what’s bugging the app, I should use setlist(), but setlist() only runs once inside snapshot.foreach()I’ve been doing some research and found that doing this is not good practice, so what can I do to list users and get this bug?

Here is the code:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { firebase } from '@react-native-firebase/database';

export default function App(){
    const [list, setList] = useState([]);
    const [load, setLoad] = useState(true);

    useEffect(()=>{
        async function loadList(){
            if(list.length < 1){
                let ref = await firebase.database().ref('usuarios');

                const listener = await ref.on('value', (snapshot)=>{
                    snapshot.forEach((childItem)=>{
                        let key = childItem.key;
                        let nome = snapshot.child(key).val().nome;
                        let idade = snapshot.child(key).val().idade;

                        list.push({ key, nome, idade });     
                    });

                    return () => listener()

                });
                setLoad(false);
            }
        }
        loadList();
    }, []);

    if(load){
        return <ActivityIndicator size='large' color='#CCC'/>
    }else{
        return (
            <View>    
                <FlatList
                    data={list}
                    renderItem={({item})=><Text>{item.nome}</Text>}
                /> 
            </View>
        );
    }
}

put a if(list.length < 1) because the list when it was uploaded, it was loading duplicate, I don’t know why.

Answer 1

I’m not sure that’s it, but I think the problem is because you’re changing the state variable directly. Create an outside variable to change. Status variables are not meant to be updated manually, but using their setState. Example:

useEffect(()=>{
    async function loadList(){
        if(list.length < 1){
            let ref = await firebase.database().ref('usuarios');

            let dataToLoad = [];

            const listener = await ref.on('value', (snapshot)=>{
                snapshot.forEach((childItem)=>{
                    let key = childItem.key;
                    let nome = snapshot.child(key).val().nome;
                    let idade = snapshot.child(key).val().idade;

                    dataToLoad.push({ key, nome, idade });     
                });

                return () => listener()

            });

            setList(dataToLoad);
            setLoad(false);
        }
    }
    loadList();
}, []);

Only in this case it will render the screen twice because you are setting the list and the load. I recommend that you create a state just like this:

First creating an initial state outside the function:

const initialState = {
    load: false,
    list: []
}

Then when creating the state go to initial state:

const [state, setState] = useState(initialState)

When setting values, use the spread to bring the current state plus the new fields:

setState({ ...state, load:true, list: dataToLoad })