Tengo un componente que llama a una API de forma asíncrona y representa otras cosas hasta que se resuelve la promesa. Pero ahora quiero la respuesta de esa llamada para renderizar condicionalmente, pero al hacer esto sigo encontrándome con errores como 'Renderizado más ganchos que durante el renderizado anterior'. ¿Alguien puede sugerir cómo puedo convertir lo siguiente en espera?

 export default function HomePage(props) { const {response, err} = useAsync({promiseFn:getUserDetails}) const [globalState] = useContext(Context); const userClass = globalState.isUserStudent; getStudentService(userClass); useEffect(()=>{ setSession() },[]) if(err){ return( <> <div>{state.defaultUser}</div> </> ) } if(response){ const userName = response.Name; return ( <> <div>{userName}</div> </> ) } return null }

Ahora quiero enviar 1 parámetro más en getStudentService, es decir, el valor de respuesta de getUserDetails. Si hago una promise.Resolve, no aparece nada en pantalla y veo si me llaman 3 veces. Si muevo el código de llamada getStudentService dentro de if(response), obtengo el error Rendered too many times.

¿Cómo resolver esto?