Когда меняется день

Программа выросла, и теперь на сервере по одному файлу на каждый день: friday.json и saturday.json. Приложение показывает один день за раз, а кнопки выбирают, какой. Выбранный день хранится в состоянии, сначала это "friday":

const [day, setDay] = useState("friday");

Эффект должен загружать файл выбранного дня, `${day}.json`. Но у него по-прежнему зависимости [], поэтому он запускается только один раз, в начале. После щелчка по кнопке «Суббота» day равно "saturday", но эффект не запускается снова, и страница продолжает показывать пятницу.

Как только эффект использует day, day должно попасть в его зависимости:

useEffect(() => {
    async function loadBands() {
        const response = await fetch(`${day}.json`);
        // Остальное остаётся как было.
    }
    loadBands();
}, [day]);

Теперь React запускает эффект после первой отрисовки, когда day равно "friday", а потом после каждой отрисовки, в которой day изменилось. Щелчок по «Суббота» меняет состояние, React снова отрисовывает страницу, пока ещё с группами пятницы, а затем запускает эффект, который загружает saturday.json. Второй щелчок по «Суббота» не меняет day, поэтому ничего не загружается заново.

Для этого и нужны зависимости: эффект запускается снова ровно тогда, когда изменилось то, от чего он зависит. Массив можно представить как список значений, при изменении которых результат работы эффекта устаревает.