Единый источник истины

В вашем приложении теперь несколько частей состояния, и каждая живёт ровно в одном месте: favorites и search — в App. Каждый компонент, которому они нужны, получает их как пропсы, и каждое изменение идёт через функцию, которую передал App. Вот что значит единый источник истины: каждый фрагмент данных хранится один раз, а всё остальное читается или вычисляется из него. Когда пользователь отмечает группу звездой, звезда, шапка и список меняются вместе, потому что все они берутся из одного и того же favorites.

Когда вы добавляете новую возможность, задайте три вопроса:

1. Что меняет пользователь? Это состояние.
2. Каким компонентам оно нужно? Состояние помещают в их ближайшего общего родителя, а вниз оно идёт пропсами вместе с функцией, которая его меняет.
3. Что можно вычислить из того, что у вас уже есть? Вычисляйте это при отрисовке, не храните.

Список может пройти через несколько фильтров один за другим. С let список начинается как результат одного фильтра, а if фильтрует его ещё раз:

let shownBands = bands.filter((band) => band.stage === stage);
if (fridayOnly) {
    shownBands = shownBands.filter((band) => band.day === "Пятница");
}

Иногда данные должны пройти много уровней вниз через компоненты, которые сами их не используют, а только передают дальше. Для этого в React есть контекст: компонент, который находится глубоко внизу, может прочитать его, а родителям не нужно ничего передавать. В приложениях вашего размера пропсы проще и понятнее.