Tengo este fragmento de código:

 export default function CloseInquiryComponent(props) { const auth = getAuth(); const db = getFirestore(); const { id } = useParams(); const [someVar, setSomeVar] = useState(""); // get user const [user, authLoading, authErr] = useAuthState(auth); // get user data of a collection const [userData, userDataLoading, dataErr] = useDocumentData( user ? doc(db, `users/${user.uid}`) : null, ); // get the inquiry data const [inquiry, inquiryLoading, inquiryError] = useDocumentData(doc(db, "תקלות", id)); // show loading until data is done loading if(inquiryLoading) { return <LoadingComponent/> } // this causes an error because there is a return before it. setSomeVar(inquiry.SomeData);

Si elimino la declaración if y trato de configurarla allí, podría ser nula. Si intento algo como:

 if(!inquiryLoading) { setSomeVar(inquiry.SomeData); return <pagehtmlhere/> }

Recibo un error "demasiadas re-renderizaciones".

cada renderización llama a la función y establece la variable, lo que provoca más renderizaciones.

¿Cómo puedo configurar los datos una vez que se han cargado, teniendo en cuenta las reglas de reacción?