Consumo de APIs con fetch: PokeApi

En estos casos, lo más probable es querer guardar los datos de url en una variable de entorno.

• En caso de React Native CLI, se puede utilizar react-native-config para configurarlas.

• En caso de Expo, una de las formas más utilizadas es react-native-dotenv

useEffect
es un hook que recibe como parametro una funcion que se ejecutara cada vez que nuestro componente se renderice, ya se por un cambio de estado, por recibir props nuevas o porque es la primera vez que se monta
useState
podremos añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos.
nos devuelve un array que tendrá el valor del estado y un método para actualizar el estado.

Yo implemente el useRffect de esta manera y tambien me funciono.

  useEffect(() => {
    const loadPokmons = async () => {
      try {
        const response = await getPokemonsApi();
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
    return loadPokmons;
  }, [])

En este caso, creo que quedaria mejor con una promesa en mi opinion

export default function Pokedex() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    getPokemonsApi()
      .then((res) => console.log("res", res))
      .catch((e) => console.log(e));
  }, []);

  return (
    <View>
      <Text>Pokedex</Text>
    </View>
  );
}

en el Pokedex.js yo realice la peticion directamente de la siguiente forma

const Pokedex = () => {
    useEffect(() => {
        (async () => {
            try {
                const url = `${API_HOST}/pokemon?limit=20&offset=0`;
                const response = await fetch(url);
                const result = await response.json();
                console.log('yes', result)
            } catch (error) {
                throw error;
                console.log('no', error)
            }
        })()
    }, []);

    return (
        <SafeAreaView>
            <Text>This is my Pokedex</Text>
        </SafeAreaView>
    );
}

export default Pokedex;

Yo use react-native-config para tener las variables de entorno en un .env, si les da error sigan los pasos del Manual Link (Android) / (iOS) pero no deberia darlo ya que react-native usa Autolinking y ahorra esa configuración y según estoy viendo los archivos de la dependecia tienen soporte para autolinking

De todos los cursos de Hooks de Platzi es el que mejor explica useState y useEffect

Yo en mi caso preferí usar axios en vez de fetch.