Почему мое приложение React постоянно отправляет запросы к API YouTube после первоначального рендеринга?

Я изо всех сил пытаюсь понять, что именно происходит с API Youtube.

Кажется, приложение, которое я разработал в React, постоянно отправляет запросы к API Youtube даже после завершения первоначального рендеринга. Мне пришлось вернуться и освежить свое понимание useEffect, и я понял, что он настроен правильно, а затем, даже после того, как я реализовал способ кэширования первоначальных запросов, похоже, он все еще отправляет запросы, судя по тому, что я могу сказать на вкладке сети, и очевидно, это съедает мою квоту.

Я начал замечать это после того, как разработал собственный крючок для хранения восьми очень специфических видео с YouTube. Это мой useVideos индивидуальный крючок:

import { useState, useEffect } from "react";
import youtube from "../apis/youtube";

const useVideos = () => {
  const [videos, setVideos] = useState(() => {
    const cachedVideos = localStorage.getItem("cachedVideos");
    return cachedVideos ? JSON.parse(cachedVideos) : [];
  });

  useEffect(() => {
    if (videos.length === 0) {
      fetchSpecificVideos();
    }
  }, []);

  const fetchSpecificVideos = async () => {
    try {
      const videoIds = [
        "VIDEO_1",
        "VIDEO_2",
        "VIDEO_3",
        "VIDEO_4",
        "VIDEO_5",
        "VIDEO_6",
        "VIDEO_7",
        "VIDEO_8",
      ];
      const videoData = [];

      for (const videoId of videoIds) {
        const response = await youtube.get("/videos", {
          params: {
            id: videoId,
            part: "snippet",
            maxResults: 8,
          },
        });
        if (response.data.items && response.data.items.length > 0) {
          videoData.push(response.data.items[0]);
        }
      }

      setVideos(videoData);
      localStorage.setItem("cachedVideos", JSON.stringify(videoData));
    } catch (error) {
      console.error("Error fetching videos:", error);
    }
  };

  return [videos, fetchSpecificVideos];
};

export default useVideos;

ПРИМЕЧАНИЕ. Я заменил фактические идентификаторы на те, которые вы видите выше.

В моем фактическом файле API у меня есть следующее:

import axios from "axios";

const KEY = "my-youtube-api-key";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {
    part: "snippet",
    maxResults: 8,
    key: KEY,
  },
});

Я добавляю скриншот вкладки сети, возможно, я неправильно понимаю, что происходит, но для меня это выглядит как множество запросов всего на 8 очень конкретных видео, которые загружаются один раз при рендеринге приложения. Это происходит с реализацией localStorage или без нее:

Мне интересно, относится ли это к какому-то типу запоминания.

Коллега предположил, что если несколько (N) компонентов используют специальный крючок useVideo, то все эти компоненты инициируют асинхронный запрос, что имеет смысл, однако только родительский компонент приложения использует этот пользовательский крючок. Я размещаю здесь компонент App.js:

import React, { useState, useEffect } from "react";
import Header from "./Header";
import VideoList from "./VideoList";
import VideoDetail from "./VideoDetail";
import useVideos from "../hooks/useVideos";

const App = () => {
  const [selectedVideo, setSelectedVideo] = useState(null);
  const [videos, fetchSpecificVideos] = useVideos();

  useEffect(() => {
    if (videos.length === 0) {
      fetchSpecificVideos();
    }
  }, [videos, fetchSpecificVideos]);

  useEffect(() => {
    if (videos.length > 0) {
      setSelectedVideo(videos[0]);
    }
  }, [videos]);

  return (
    <div className = "ui container">
      <div className = "ui inverted menu">
        <Header />
      </div>
      <VideoList
        onVideoSelect = {setSelectedVideo}
        videos = {videos}
        selectedVideo = {selectedVideo}
      />
      <VideoDetail video = {selectedVideo} />
    </div>
  );
};

export default App;

Пользовательский хук не используется ни в каких других компонентах.