Jeden zdroj pravdy

Vaše aplikace má teď několik stavových proměnných a každá z nich je na jediném místě: oblibene a hledani v App. Každá komponenta, která je ukazuje, je dostává v props, a každá změna jde přes funkci, kterou App předala dolů. To je jeden zdroj pravdy: každý údaj je uložený jednou a všechno ostatní se z něj čte nebo počítá. Když uživatel označí kapelu hvězdou, změní se hvězda, hlavička i program najednou, protože všechny vycházejí ze stejného oblibene.

Když do aplikace přidáváte něco nového, položte si tři otázky:

1. Co mění uživatel? To je stav.
2. Které komponenty to potřebují? Stav patří do jejich nejbližšího společného rodiče a k nim se dostane v props, spolu s funkcí, která ho mění.
3. Co se dá spočítat z toho, co už máte? To spočítejte při vykreslení, neukládejte to.

Seznam může projít několika filtry po sobě. S let začne seznam jako výsledek jednoho filtru a if ho vyfiltruje znovu:

let zobrazeneKapely = kapely.filter((kapela) => kapela.podium === podium);
if (jenPatek) {
    zobrazeneKapely = zobrazeneKapely.filter((kapela) => kapela.den === "pátek");
}

Někdy musí data projít mnoha úrovněmi dolů, přes komponenty, které je samy nepoužívají a jen je posílají dál. Na to má React kontext (context), který si komponenta hluboko dole přečte, aniž by jí ho rodiče předávali. V aplikacích velikosti té vaší jsou props jednodušší a přehlednější.