Zarządzanie stanem w aplikacjach React

Zarządzanie stanem (state management) to jeden z najważniejszych elementów tworzenia aplikacji w React. Każda interaktywna aplikacja internetowa wymaga zarządzania danymi, które mogą zmieniać się w czasie. W tym artykule pokażemy Ci, jak efektywnie pracować ze stanem w aplikacjach React – od podstaw po zaawansowane techniki.

Czym jest stan (state) w React?

Stan w React to dane, które mogą zmieniać się w trakcie życia komponentu. React umożliwia zarządzanie stanem zarówno na poziomie pojedynczych komponentów, jak i w ujęciu globalnym.

Jakie praktyczne znaczenie ma zarządzanie stanem?

Efektywne zarządzanie stanem pozwala na:

• Zachowanie danych i ich dynamiczną aktualizację w aplikacji.
• Minimalizację niepotrzebnych ponownych renderów komponentów.
• Łatwiejsze skalowanie i utrzymanie kodu.

1. Lokalny stan w React: useState

Najprostszym sposobem zarządzania stanem jest użycie useState, który przechowuje dane bezpośrednio w komponencie.

import { useState } from "react";

function Licznik() {
    const [liczba, setLiczba] = useState(0);

    return (
        <div>
            <p>Liczba kliknięć: {liczba}</p>
            <button onClick={() => setLiczba(liczba + 1)}>Kliknij</button>
        </div>
    );
}

Wyjaśnienie:

• useState definiuje zmienną stanu liczba oraz funkcję setLiczba do jej aktualizacji.
• Każde kliknięcie przycisku zwiększa wartość liczba o 1.

2. Bardziej złożony stan: useReducer

Gdy stan aplikacji jest bardziej złożony, zaleca się użycie useReducer, który działa podobnie do Redux.

import { useReducer } from "react";

const reducer = (state, action) => {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            return state;
    }
};

function Licznik() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Liczba: {state.count}</p>
            <button onClick={() => dispatch({ type: "increment" })}>+1</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-1</button>
        </div>
    );
}

Kiedy używać useReducer?

• Gdy masz wiele możliwych zmian stanu (np. różne przyciski do zwiększania/zmniejszania wartości).
• Gdy stan zawiera wiele zmiennych zależnych od siebie.

3. Globalny stan w React: Context API

Jeśli potrzebujesz zarządzać stanem pomiędzy wieloma komponentami, możesz użyć React Context API. Context pozwala udostępniać dane bez konieczności przekazywania ich przez propsy.

import { createContext, useState, useContext } from "react";

const TematContext = createContext();

function TematProvider({ children }) {
    const [temat, setTemat] = useState("jasny");

    return (
        <TematContext.Provider value={{ temat, setTemat }}>
            {children}
        </TematContext.Provider>
    );
}

function Przycisk() {
    const { temat, setTemat } = useContext(TematContext);

    return (
        <button onClick={() => setTemat(temat === "jasny" ? "ciemny" : "jasny")}>
            Zmień motyw
        </button>
    );
}

function App() {
    return (
        <TematProvider>
            <Przycisk />
        </TematProvider>
    );
}

4. Zarządzanie stanem z użyciem Redux

Dla dużych aplikacji warto skorzystać z Redux, który centralizuje zarządzanie stanem.

Kiedy używać Redux?

• Gdy aplikacja zawiera skomplikowane zależności między komponentami.
• Gdy chcesz mieć lepszą kontrolę nad danymi.

Najczęściej zadawane pytania

1. Kiedy używać useState, a kiedy useReducer?

Gdy masz prosty stan – użyj useState. Gdy stan jest bardziej złożony – sięgnij po useReducer.

2. Czy Redux jest konieczny do zarządzania stanem?

Nie. Dla mniejszych aplikacji wystarczy useContext lub useState.

3. Jak uniknąć niepotrzebnych renderów?

Używaj useMemo i useCallback dla optymalizacji wydajności.

Top 5 ciekawostek o zarządzaniu stanem w React

1. React Context API zostało wprowadzone w wersji 16.3 i znacząco uprościło zarządzanie globalnym stanem.
2. Redux został zainspirowany architekturą Flux opracowaną przez Facebooka.
3. Głównym powodem, dla którego warto użyć Context API zamiast Redux, jest prostsza konfiguracja.
4. Stosowanie zbyt rozbudowanych narzędzi do zarządzania stanem może spowolnić aplikację.
5. React automatycznie optymalizuje renderowanie, jeśli poprawnie zastosujesz techniki memoizacji.

Chcesz nauczyć się programowania?

Jeśli interesuje Cię stacjonarny lub online kurs programowania, sprawdź naszą ofertę na stronie www.like-it.sk. Nasze kursy prowadzą doświadczeni specjaliści, którzy pomogą Ci opanować podstawy i zaawansowane koncepcje programowania.

Marián Knězek