Understanding State

Ale existuje třetí ingredience, která transformuje statickou React komponentu na něco interaktivního a dynamického: state.

State — konkrétně schopnost komponenty vlastnit a spravovat svá vlastní data v čase — je to, co dělá React mocným nástrojem pro vytváření moderních rozhraní. Bez něj by React nebyl nic víc než templating engine.

Pojďme prozkoumat, proč state existuje, proč běžné JavaScript proměnné nestačí a jak useState řeší tento problém.

Proč Plain JavaScript Proměnné Nefungují jako State

Představte si, že vytváříte malou komponentu počítadla, která zobrazuje, kolikrát uživatel stiskl tlačítko. Pokud uvažujete pouze v JavaScriptu, první pokus by mohl vypadat takto:

export default function Counter() {
  let clicks = 0

  function increment() {
    clicks += 1
  }

  return (
    <button onClick={increment}>
      {clicks}
    </button>
  )
}

Na první pohled to vypadá rozumně. Komponenty jsou funkce. Funkce mohou mít proměnné. Proměnné se mohou měnit. Takže by to mělo fungovat… že?

Bohužel to úplně selže. Důvod je jednoduchý:

To není React zvláštnost. Je to čisté chování JavaScriptu.

Abychom viděli základní mechanismy jasněji, odstraňme React z rovnice:

function runCounter() {
  let value = 0
  value += 1
  return value
}

console.log(runCounter()) // 1
console.log(runCounter()) // 1
console.log(runCounter()) // 1

Každé volání funkce začíná z čistého scope, vytváří svou vlastní hodnotu. Žádné informace se nepřenášejí mezi voláními.

React se chová stejně. Každé renderování je jen další volání funkce. Takže pokud React neposkytuje způsob, jak zachovat data mezi voláními, nemůžete ukládat state uvnitř funkce.

Vstup useState: React Hook pro Správu State

React řeší tento problém pomocí hooks. Hooks jsou speciální funkce, které vám umožňují deklarovat, že vaše komponenta potřebuje určitou React schopnost — jako state, context, přístup k lifecycle nebo refs.

První hook, se kterým se setkáte, je obvykle useState.

const result = React.useState("initial value")
const currentValue = result[0]
const updateValue = result[1]

useState dělá dvě věci:

• •Říká Reactu, aby si zapamatoval hodnotu mezi renderováními
• •Poskytuje funkci, která aktualizuje tuto hodnotu a spustí re-render

Přístup k vrácenému poli pomocí indexování je však neohrabaný. Místo toho používáme destrukturalizaci pole.

Čistší Kód s Destrukturalizací Pole

JavaScript nám umožňuje vytáhnout položky z pole přímo:

const numbers = [3, 6, 9]
const [a, b, c] = numbers

Stejný vzor můžeme aplikovat na useState:

const [value, setValue] = React.useState("Initial value")

Mnohem snadnější na čtení a jasně vyjadřuje záměr.

Přepsání Počítadla pomocí useState

Pojďme se vrátit k našemu rozbitému počítadlu a přestavět ho pomocí useState. Zde je nový příklad, odlišný od původního:

export default function ClickTracker() {
  const [totalClicks, setTotalClicks] = React.useState(0)

  function handlePress() {
    setTotalClicks(prev => prev + 1)
  }

  return (
    <button onClick={handlePress}>
      Clicked {totalClicks} times
    </button>
  )
}

Nyní to funguje přesně podle očekávání.

Proč?

Protože React:

• •Ukládá totalClicks někde interně
• •Zavolá vaši komponentu znovu, kdykoli zavoláte setTotalClicks
• •Poskytne uloženou hodnotu zpět do komponenty při každém renderování
• •Přestaví UI na základě nejnovějšího state

Vaše komponenta se stává čistou funkcí aktuálního state a props.

Kdy React Re-renderuje?

Toto téma má svou vlastní kapitolu ve většině React kurzů, ale zde je destilované pravidlo:

Mentální model:

V příkladu ClickTracker každé stisknutí tlačítka:

• •Zavolá setTotalClicks
• •Aktualizuje interní state
• •Spustí re-render
• •Vypíše nové UI, které odráží aktualizované číslo

Tato smyčka — změna state, re-render, aktualizace UI — je základem interaktivních React aplikací.

Shrnutí

State je klíčová ingredience, která odemkne schopnost Reactu vytvářet dynamická UI.

Pochopení, proč se plain JavaScript proměnné resetují, jak useState zachovává hodnoty mezi renderováními a proč React re-renderuje, je zásadní pro zvládnutí frameworku.

Jak budete pokračovat, setkáte se s dalšími hooks — useEffect, useRef, useMemo a dalšími — ale useState zůstává nejzákladnějším nástrojem: jednoduchý, mocný a vždy relevantní.