React Hooks: Loading state displaying twice

Question

I have an isLoading useState variable. In the code below purposefully commented out the isLoading(false) to force the Loading UI to test it. However I'm seeing it render twice, any idea why?

API Call

export default function App() { 
  const [upcoming, setUpcoming] = useState([]); 
  const [isLoading, setIsLoading] = useState(false);

 useEffect(() => {
    const fetchUpcoming = async () => {
      setIsLoading(true);

      const res = await fetch(
        "https://api.themoviedb.org/3/movie/upcoming?api_key={API_KEY}&language=en-US&page=1"
      );
      const data = await res.json();
      const results = data.results;

      setUpcoming(results);
      // setIsLoading(false);
    };

    fetchUpcoming();
  }, []);

return (
    <div className="App">
      <Recommendations title={"Upcoming"} data={upcoming} loading={isLoading} />
    </div>
  );
}

Render Results

export default function Recommendations({ title, data, loading }) {
  return (
    <div className="recommendationSection">
      <h3>{title}</h3>
      {loading ? (
        <h3>Loading...</h3>
      ) : (
        data.map((movie) => {
          return (
            <div className="banner" key={movie.title}>
              <img
                src={
                  movie.poster_path
                    ? `https://image.tmdb.org/t/p/original/${movie.poster_path}`
                    : "https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg"
                }
                alt={movie.title}
              />
            </div>
          );
        })
      )}
    </div>
  );
}

Answer 1

Found the answer here: https://github.com/kenwheeler/slick/issues/940#issuecomment-181815974

I found the second instance had a class of slick-cloned and basically since i'm using Slick Slider, it's making a clone of my element. The fix is to add infinite: false in my slider settings.