Estoy leyendo de mi base de datos en tiempo real de firebase cuando mi componente se carga para actualizar un estado con los datos devueltos. Cada vez que se carga el componente, obtiene los datos de la base de datos 8 veces, y esto hace que React dé un error ya que el estado se actualiza demasiadas veces en rápida sucesión.

Intenté usar tanto el oyente onValue como la función get , y ambos hacen lo mismo al cargar la página. Si, en cambio, no los llamo en la carga de la página, y onValue o get ejecutan manualmente o desde la base de datos que se está actualizando, se ejecuta solo una vez como se esperaba.

El componente:

 export default function FoodItem(props) { const [foods, setFoods] = useState() const db = getDatabase() // creating the onValue listener (below) creates the same issue // const mealRef = ref(db, (props.userId + "/" + props.date + "/" + props.meal)) // onValue(mealRef, (snapshot) => { // const data = snapshot.val() // console.log(data) // setFoods(data) // }) useEffect(() => { console.log("getFoods") const dbRef = ref(getDatabase()) get(child(dbRef, (props.userId + "/" + props.date + "/" + props.meal))).then((snapshot) => { if (snapshot.exists()) { console.log(snapshot.val()) // setFoods(data) } else { console.log("No data available") } }).catch((error) => { console.error(error) }) }, []) return ( ... ) }

La salida de la consola del código anterior

Si en lugar de usar useEffect , llamo a get con una función (por ejemplo, con onClick , solo obtiene los datos una vez como se esperaba:

 function getFoods() { console.log("getFoods") const dbRef = ref(getDatabase()) get(child(dbRef, (props.userId + "/" + props.date + "/" + props.meal))).then((snapshot) => { if (snapshot.exists()) { console.log(snapshot.val()) // setFoods(data) } else { console.log("No data available") } }).catch((error) => { console.error(error) }) }

¿Cómo hago para que solo se ejecute una vez cuando se carga el componente?