I'm building a react app based on TypeScript template and one of my pages is loading before the hook completes the load.
I tried makings async await but it is a hook, didn't work well.
How can I build something to wait my hook completes and then load it on the page?
My page:
export function Home(){ const { topEventsSelected } = useGetTopEvents(3); return(<div className="d-flex flex-column min-vh-100"><NavBar/><div className="container"><div className="row mt-4 mb-4 gap"><div className="col-md"><div className="card"><div className="sizingt d-flex card-body flex-column align-items-center sizingt"><h1>TOP Eventos</h1> {topEventsSelected.map((eventoInfo)=> moment(eventoInfo.dataFinal).isBefore() || eventoInfo.cancelado === 'Y' ? ( console.log() ):(<BlueCard props={eventoInfo}/> ) )}</div></div></div>Here is my hook (note that the file is .ts):
export function useGetTopEvents(quant: number){ const [eventValues, setEventValues] = useState<Evento[]>([]); const [topEvents, setTopEvents] = useState<Evento[]>([]); const [topEventsSelected, setTopEventsSelected] = useState<Evento[]>([]); function organizeEvents(){ //organazing events by confirmed users let topAllEvents = [] for(let organizer of eventValues){ if(organizer.confirmNumb > 0){ topAllEvents.push(organizer) } } topAllEvents.sort((a,b) => b.confirmNumb - a.confirmNumb) setTopEvents(topAllEvents) //organazing events by quantity selected let topSelected = topAllEvents; topSelected.sort((a,b) => b.confirmNumb - a.confirmNumb).slice(0,3); setTopEventsSelected(topSelected); } useEffect(() =>{ const eventRef = database.ref(`eventos`); eventRef.once('value', evento => { //console.log(evento.val()) const databaseEventos = evento.val(); const firebaseEvent: FirebaseEventos = databaseEventos ?? {}; const parsedEventos = Object.entries(firebaseEvent).map(([key, value])=>{ return{ id: key, autorID: value.authorID, autorNome: value.authorName, categoria: value.category, dataInicio: value.startDate, dataFinal: value.endDate, titulo: value.title, cancelado: value.canceled, confirmNumb: Object.entries(value.confirmados ?? {}).length } }) //console.log(parsedEventos) setEventValues(parsedEventos); organizeEvents(); }) }, [quant]) return{topEvents, topEventsSelected}}