Tengo dos problemas con mi código. La primera es que los datos no están definidos, no estoy obteniendo datos de la API. La segunda es que el gancho useEffect no funciona como debería, como componendidmount, y está en un bucle que vuelve a representar el componente. este es mi codigo:

 import { StatusBar } from 'expo-status-bar'; import React ,{useState,useEffect} from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { const [loading, setLoading] = useState(true); const [users, setUsers] = useState([]); const fetch = async () =>{ try{ let data = await fetch("https://api.sampleapis.com/coffee/hot", {method: 'GET'}); let json = await data.json(); setUsers(json); setLoading(false); } catch(err){ console.log("Im catching the error"); console.log(err); setUsers([]); setLoading(false); } } useEffect(() => { fetch(); },[]) return ( <View style={styles.container}> {loading?<><Text>Loading...</Text></>:<Text>Data fetched</Text>} </View> ); }