Estoy tratando de obtener una base de datos en tiempo real de firebase usando react useState. soy un novato con reaccionar especialmente con ganchos. Recibí un error como este Error no detectado: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito. . Creo que esto se debe a que useState asume que onValue da un bucle infinito. ¿Debo aplicar un setTimeOut? o usando otro gancho? este es mi código
import React, { useState } from 'react' // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import {getDatabase,ref,onValue} from 'firebase/database' import firebaseConfig from '../config/fbConfig' // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries function SensorCard() { const [data,setData] = useState(0); initializeApp(firebaseConfig); const db = getDatabase() const soilTemp = ref(db, '/sensor/kelembabanTanah') onValue(soilTemp, (snapshot) => { setData(snapshot.val()) }) return ( <> <div className=' border border-green-900 '> <div>Temperature</div> <div> <div>{data}</div> <div>C</div> </div> </div> </> ) } export default SensorCardGracias