Why am i getting and empty array when fetching an api with react hooks?

The useEffect() hook runs after the first render. Since you've initialized the data state with an empty array, the first render returns an empty array.

If you're component depends on data to render, you can always conditionally return null until your data is loaded.

Also, I recommend using an async function for api requests, it allows you to use the await keyword which makes your code easier to read. The only caveat, is that you cannot pass an async function to useEffect, instead define an async function inside your hook, and then call it.

import React, { useState, useEffect } from "react";

const API = "https://example.com/data";

const GetSlides = (props) => {
  const [data, setData] = useState();

  useEffect(() => {
    async function getData() {
      const request = fetch(API);
      const response = await request;
      const parsed = await response.json();
      setData(parsed);
    }

    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (data === undefined) {
    return null;
  }

  return <>data</>;
};

export default GetSlides;

Of course, you can still use Promise chaining if you desire.

  useEffect(() => {
    async function getData() {
      await fetch(API)
        .then((res) => res.json())
        .then((data) => setData(data));
    }
    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

<GetSlides api="https://yay.com" />

react components need to be title case

import React, { useState, useEffect } from 'react'

const GetSlides = ({ api }) => {
  const [data, setData] = useState(null)

  const getData = async () =>
    await fetch(`${api}`)
      .then((res) => res.json())
      .then((data) => setData(data))

  useEffect(() => {
    getData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  console.log(data)

  return <div>slides</div>
}

export default GetSlides

The effect callback function is called after the render of your component. (Just like componentDidMount) So during the first render phase, the data state has not been set yet.

You initialize your data with and empty array here:

const[data,setData] = useState([] <- empty array);

useEffect runs after your component is mounted, and then calls the API, that it might take a few seconds or minutes to retrieve the data, but you return the data right away before knowing if the API finished its call.

If you want to return the data after it has been retrieved from the API, you should declare and async method

const getSlides = async (API) => {
 try {
  const res = await fetch(API);
  const data = await res.json();

   return data;
  } catch (e) {
    throw new Error(e);
  }
}

Note that it is not necessary hooks for this function