Buen día comunidad, quiera saber por qué sale primero la impresión de un array vacío y luego si sale el objeto con la información de Json...

Hola sebas,

Eso es por el funcionamiento de nuestros hooks useEffect y useState.

La variable donde para guardaremos el estado y la variable con la que actualizaremos el estado. Nuestro hook useState y el elemento que queremos inicializar en este caso un array porque así necesitamos la respuesta de la API

const [videos, setVideos] = useState([])

Ahora en el ciclo de vida de componentes nuestro hook se renderiza cuando se renderiza la página nuestro efecto surte efecto se inicializa como un array vacío, hace una llamada pidiendo datos, esa llamada regresa cuando tiene regresar en forma de promesa, se resuelve y trae la información.

 useEffect(
    () => {
      fetch(API)
        .then(res => res.json())
        .then(data => {
          setVideos(data);
        });
    },
    [name]
  );