Вычислять, а не хранить

В этой версии приложения появилась новая кнопка «Очистить избранное» и баг. Попробуйте: отметьте звёздами две группы и нажмите «Очистить избранное». Звёзды погаснут, но в шапке по-прежнему будет 2.

Приложение хранит число избранных групп во втором состоянии, count, и каждая функция, которая меняет favorites, должна менять и count. handleToggleFavorite это делает, а handleClear забывает. Два состояния, которые должны совпадать, расходятся, как только в одном месте про одно из них забыли.

Но число уже есть в favorites: это favorites.length. Не храните в состоянии то, что можно вычислить из другого состояния или из пропсов. Вычисляйте это при отрисовке, в функции компонента:

const count = favorites.length;

Каждая отрисовка вычисляет число заново из текущего favorites, поэтому оно не может оказаться неверным, что бы ни изменило массив. То же относится ко всему, что получается из ваших данных: итогам, отфильтрованным спискам, пуст ли список. Состояние нужно только тому, что меняет пользователь, а остальное вычисляется из него.

Вычисленное значение может быть и целым списком. Какие группы избранные — это фильтр по списку участников:

const favoriteBands = bands.filter((band) => favorites.includes(band.id));

А из него можно вычислить ещё что-нибудь, например названия, соединённые в один текст с помощью map() и join().