02. useState i useReducer

O czym jest ta prezentacja?

useState i useReducer

Stan to dane, które komponent “pamięta” między renderami. useState to najprostszy sposób na stan lokalny — idealne dla pojedynczych wartości. useReducer to wzorzec dla złożonego stanu z wieloma powiązanymi akcjami — jak mini-Redux w komponencie.

Kluczowe pytania do odpowiedzi

Co to jest stan w React? — Dane, które komponent śledzi i które powodują re-render przy zmianie
Jak działa useState? — Zwraca parę: aktualna wartość + funkcja setter
Kiedy useState nie wystarczy? — Wiele powiązanych wartości, złożone przejścia stanów
Jak działa useReducer? — Czysty reducer (state, action) => newState, dispatch akcji

Zakres merytoryczny

Elementy obowiązkowe

useState — podstawy — deklaracja, odczyt, aktualizacja, re-render
Funkcja updater — setCount(c => c + 1) vs setCount(count + 1) — różnica w batching
Stan obiektowy — dlaczego nie mutować bezpośrednio, spread operator
useReducer — wzorzec — reducer, akcje, dispatch
Kiedy co używać — tabela decyzyjna: useState vs useReducer

Wymagane elementy wizualne

Schemat

Diagram przepływu: Zdarzenie użytkownika → dispatch(action) → reducer(state, action) → nowy state → re-render. Porównaj obok z useState: Zdarzenie → setState → nowy state → re-render.

Przykład kodu JSX

Ten sam licznik zaimplementowany najpierw z useState, potem z useReducer. Pokaż kiedy useReducer jest czytelniejszy (koszyk zakupów z add/remove/clear).

Warianty realizacji

Zawartość:

useState — deklaracja, odczyt, setter
Przykład: licznik, formularz z jednym polem
Schemat re-render po setState
Podstawowe reguły hooków (tylko w komponentach funkcyjnych)

Forma: 10 slajdów, 10 minut prezentacji

Ocena: 3.0

Wszystko z wariantu A, plus:

Funkcja updater vs bezpośrednia wartość — problem stale closure
useReducer — pełny przykład koszyka zakupów
Tabela: kiedy useState, kiedy useReducer
Jak stan komponentu traci się przy odmontowaniu

Forma: 12-15 slajdów, 12 minut prezentacji

Ocena: 4.0-5.0

Wszystko z wariantu B, plus:

Live demo: koszyk z useReducer — dodaj/usuń/wyczyść w czasie rzeczywistym
Porównanie z zewnętrznym Redux — kiedy opłaca się wyjść poza useReducer
Immer + useReducer — niemutowalność bez bólu

Forma: 15 slajdów + sesja Q&A

Ocena: 5.0-6.0

Scenariusze i przykłady

Przykład 1 — useState: prosty licznik

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Licznik: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

Przykład 2 — useReducer: koszyk zakupów

import { useReducer } from 'react';

const initialState = { items: [], total: 0 };

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        items: [...state.items, action.payload],
        total: state.total + action.payload.price,
      };
    case 'REMOVE_ITEM':
      return {
        items: state.items.filter(item => item.id !== action.payload),
        total: state.total - state.items.find(i => i.id === action.payload).price,
      };
    case 'CLEAR':
      return initialState;
    default:
      return state;
  }
}

function Cart() {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <div>
      <p>Produkty: {state.items.length}</p>
      <p>Suma: {state.total} zł</p>
      <button onClick={() => dispatch({ type: 'ADD_ITEM', payload: { id: 1, name: 'Kurs React', price: 99 } })}>
        Dodaj
      </button>
      <button onClick={() => dispatch({ type: 'CLEAR' })}>
        Wyczyść koszyk
      </button>
    </div>
  );
}

Przykład 3 — Pułapka stale closure (dlaczego updater jest ważny)

// ŹLE: może dać błędny wynik przy szybkim klikaniu
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1); // count może być "starym" count z closure!
    setCount(count + 1); // oba sety używają tej samej wartości count
  };
  // Wynik po kliknięciu: +1, nie +2!

  // DOBRZE: updater zawsze dostaje najnowszą wartość
  const handleClickSafe = () => {
    setCount(c => c + 1); // c = aktualna wartość
    setCount(c => c + 1); // c = zaktualizowana wartość po poprzednim secie
  };
  // Wynik po kliknięciu: +2
}

Wskazówki do wystąpienia

Zacznij od problemu

Zapytaj klasę: “Co by się stało, gdyby kliknięcie przycisku nie zapamiętało ile razy kliknęliście?” — to motywuje po co jest stan.

Wizualizacja re-renderu

Na slajdzie narysujcie dwa stany komponentu obok siebie — przed i po setState. Podświetlcie co się zmieniło w JSX.

Analogia do useReducer

useReducer to jak automat vendingowy: wrzucasz monetę (dispatch akcji), automat wykonuje logikę (reducer) i wydaje produkt (nowy stan). Nie dotykasz wewnętrznych kółek!

Typowe pytanie na Q&A

“Czy setState jest synchroniczny?” — Nie! React batches aktualizacje stanu. Nowy stan jest dostępny dopiero po re-renderze.

Zasoby

React — useState Oficjalna dokumentacja useState z przykładami.

React — useReducer Oficjalna dokumentacja useReducer.

React — Choosing the State Structure Kiedy i jak projektować strukturę stanu.

Do dzieła!

Stan to serce każdej aplikacji React!

Bez stanu aplikacja byłaby statyczną stroną. Zrozumienie useState i useReducer to klucz do tworzenia interaktywnych interfejsów. Ten temat bezpośrednio przyda się w projekcie semestralnym!