React Transitions: Jak przestać blokować UI i zacząć priorytetyzować UX

Co to są Transitions?

Transitions to mechanizm zarządzania priorytetem aktualizacji w React 18. Dzięki Transitions możemy tworzyć bardziej responsywne i interaktywne aplikacje, które reagują na zmiany stanu bez opóźnień.

Warto jednak doprecyzować jedną rzecz: Transitions nie „przyspieszają” aplikacji. One zmieniają priorytet aktualizacji.

React traktuje aktualizacje wewnątrz startTransition jako mniej pilne. Jeśli w trakcie ich renderowania pojawi się bardziej istotna interakcja użytkownika (np. wpisanie kolejnego znaku w input), React może przerwać renderowanie i rozpocząć je od nowa z nowszymi danymi.

Praktyczne zastosowanie

Case study: Wyobraźmy sobie, że mamy aplikację z wyszukiwarką dostępnych produktów. Kiedy użytkownik wpisuje zapytanie, chcemy, aby wyniki pojawiały się płynnie, bez migotania czy opóźnień. Dzięki Transitions możemy osiągnąć ten efekt, zapewniając lepsze doświadczenie użytkownika.

Kluczowe w tym przykładzie jest rozdzielenie dwóch typów aktualizacji:

• setQuery - aktualizacja pilna (użytkownik musi natychmiast zobaczyć wpisany znak)
• setResults - aktualizacja niepilna (może zostać przerwana i przeliczona ponownie)

import { useState, useTransition, type ChangeEvent } from 'react';
 
const PRODUCTS = ['lampa', 'poduszka', 'lodówka', 'biurko', 'krzesło', 'szafa'];
 
export function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<string[]>(PRODUCTS);
  const [isPending, startTransition] = useTransition();
 
  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
 
    // Wysoki priorytet, input musi reagować natychmiast
    setQuery(value);
 
    // Niski priorytet, filtrowanie może zostać przerwane
    startTransition(async () => {
      await new Promise((res) => setTimeout(res, 500)); // 👈 Krótki delay na potrzeby demo
      const filtered = PRODUCTS.filter((product) =>
        product.toLowerCase().includes(value.toLowerCase())
      );
 
 
      // Musimy użyć drugiego startTransition, zobacz link poniżej 
      // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition
      startTransition(() => {
        setResults(filtered);
      });
    });
  };
 
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Szukaj produktów..."
      />
      {isPending && <p>Aktualizowanie wyników...</p>}
      {!isPending && (
        <ul>
          {results.map((result) => (
            <li key={result}>{result}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Dlaczego jest to ważne?

Główną zaletą Transitions nie jest tylko to, że coś dzieje się „w tle”. Kluczowe są trzy aspekty:

1. Płynność: Transitions pozwalają na płynne przejścia między stanami, co poprawia doświadczenie użytkownika.
2. Przerywalność: Użytkownik może przerwać aktualną operację i rozpocząć nową, co jest szczególnie ważne w przypadku długotrwałych operacji.
3. Feedback: Dzięki Transitions możemy łatwo informować użytkownika o trwających operacjach, co zwiększa jego zaangażowanie i zadowolenie z korzystania z aplikacji.

Transitions szczególnie dobrze współpracują z Suspense.

Jeśli podczas zmiany widoku ładowane są dane lub komponenty (np. lazy loading), możemy oznaczyć tę zmianę jako transition. Dzięki temu:

• aktualny widok pozostaje widoczny
• użytkownik nie widzi „skoków”
• fallback z Suspense pojawia się w kontrolowany sposób

To jeden z najczęstszych realnych use-case’ów w większych aplikacjach.

Porównanie

Bez Transition:

• użytkownik wpisuje znak
• aplikacja filtruje 5000 elementów
• input na moment „przycina”

Z Transition:

• użytkownik wpisuje znak
• input reaguje natychmiast
• filtrowanie odbywa się w tle i może zostać przerwane

Kiedy NIE używać Transitions?

Mimo, że Transitions są potężnym narzędziem, nie zawsze są najlepszym wyborem. Jeśli Twoja aplikacja jest bardzo prosta i nie wymaga płynnych przejść, używanie Transitions może wprowadzić niepotrzebną złożoność.

Ponadto, jeśli Twoja aplikacja jest już bardzo szybka i responsywna, dodanie Transitions może nie przynieść zauważalnych korzyści.

Nie należy też używać Transitions do aktualizacji, które muszą być natychmiast widoczne, np.:

• kontrolowane inputy
• walidacja formularza
• zmiana focusa

Te operacje powinny pozostać wysokopriorytetowe.

Podsumowanie

Transitions są jednym z mechanizmów dostępnych dzięki Concurrent Rendering w React 18. To Concurrent Rendering stanowi fundament, a startTransition i useTransition pozwalają nam świadomie oznaczać aktualizacje jako mniej pilne. Pozwalają nam budować interfejsy, które są odporne na ciężkie obliczenia i zapewniają użytkownikowi poczucie pełnej kontroli nad aplikacją.

Jeśli Twoja aplikacja „łapie zadyszkę” przy dużych zestawach danych, najpierw upewnij się, że zastosowałeś podstawowe optymalizacje (memoizacja, podział komponentów, wirtualizacja list). Jeśli problemem jest blokowanie interfejsu przez kosztowne renderowanie, wtedy useTransition będzie właściwym narzędziem.

A tak poza tym, team developerów Reacta dodaje nowe funkcje, ale bardzo mało osób o nich wie.

Transitions to jedno z tych API w React 18, które realnie zmienia sposób myślenia o wydajności - z „optymalizuj wszystko” na „zarządzaj priorytetem”.

W większych aplikacjach z dużą ilością danych to różnica między „nawet działa” a „działa płynnie”.

Jeśli jeszcze nie korzystasz świadomie z Concurrent Renderingu, warto zajrzeć do dokumentacji React 18, wiele mechanizmów jest prostszych w użyciu, niż mogłoby się wydawać.