Faza renderowania i zatwierdzanie DOM

Cykl pracy Reacta składa się z dwóch głównych faz: fazy renderowania i fazy commit. Podczas fazy renderowania React wywołuje funkcje komponentów i buduje wirtualną reprezentację interfejsu użytkownika (drzewo fiber). Podczas fazy commit React stosuje zmiany z drzewa fiber do rzeczywistego DOM.

W trybie Concurrent Mode w React 18 faza renderowania może zostać wstrzymana, przerwana lub rozpoczęta ponownie. React może wielokrotnie wywołać funkcję komponentu, zanim zatwierdzi jakiekolwiek zmiany. Dlatego funkcje komponentów muszą być czyste — nie mogą zawierać efektów ubocznych, ponieważ funkcja może zostać uruchomiona więcej niż raz dla jednej widocznej aktualizacji.

W przeciwieństwie do fazy renderowania faza commit jest zawsze synchroniczna i wykonuje się do końca. React nie może zostać przerwany podczas zatwierdzania zmian w DOM. Dzięki temu DOM nigdy nie pozostaje w częściowo zaktualizowanym stanie. Po każdym zatwierdzeniu użytkownicy widzą w pełni spójny interfejs.

Faza commit ma trzy podfazy: before mutation (w tej podfazie metoda getSnapshotBeforeUpdate komponentu klasowego odczytuje wartości DOM przed wprowadzeniem zmian), mutation (React wstawia, aktualizuje i usuwa węzły DOM) oraz layout (w tej podfazie uruchamiane są efekty synchroniczne, w szczególności useLayoutEffect oraz componentDidMount/componentDidUpdate komponentu klasowego).

useEffect jest efektem pasywnym, co oznacza, że nie jest wykonywany podczas fazy commit. Po zakończeniu fazy commit i wyrenderowaniu obrazu przez przeglądarkę React asynchronicznie planuje wykonanie efektów pasywnych. Są one uruchamiane dopiero wtedy, gdy przeglądarka miała możliwość wyświetlenia zaktualizowanego DOM na ekranie.

Przeglądarka renderuje obraz między fazą layoutu, w której uruchamiany jest useLayoutEffect, a fazą efektów pasywnych, w której uruchamiany jest useEffect. To kluczowa różnica w czasie wykonania: useLayoutEffect uruchamia się przed renderowaniem obrazu, a useEffect — po nim. To rozróżnienie ma duże znaczenie w przypadku efektów zmieniających wygląd interfejsu.

Jeśli useEffect odczytuje DOM i aktualizuje stan (na przykład mierzy element i ustawia stan rozmiaru), React ponownie renderuje interfejs i ponownie wykonuje fazę commit. Przeglądarka renderuje obraz dwukrotnie: najpierw z początkowym rozmiarem, a następnie z rozmiarem skorygowanym. Użytkownicy mogą zobaczyć krótkie mignięcie nieprawidłowego rozmiaru, zanim pojawi się poprawka.

React wewnętrznie buduje drzewo węzłów „fiber”, po jednym dla każdej instancji komponentu. Każdy węzeł fiber przechowuje stan komponentu, efekty i dane wyjściowe. W fazie renderowania React tworzy nowe robocze drzewo fiber. W fazie commitowania robocze drzewo staje się bieżącym drzewem, a stare drzewo jest ponownie wykorzystywane.

React Strict Mode celowo wywołuje funkcje komponentów i efekty dwukrotnie w środowisku deweloperskim, aby ułatwić wykrywanie efektów ubocznych. Zarówno useLayoutEffect, jak i useEffect są montowane, odmontowywane i montowane ponownie. To podwójne wywołanie nie występuje w środowisku produkcyjnym. Ma ono ujawnić błędy wynikające z nieprawidłowego czyszczenia efektów.

Ponieważ faza renderowania może zostać przerwana i uruchomiona ponownie, funkcje komponentów muszą dla tych samych danych wejściowych zwracać ten sam wynik i nie powodować efektów ubocznych. Mutacje, subskrypcje i wywołania API umieszczone w treści funkcji, a nie w efektach, będą w trybie Concurrent Mode wykonywane częściej, niż można się spodziewać, co prowadzi do błędów.

Nigdy nie odczytuj bezpośrednio właściwości DOM w treści funkcji komponentu. DOM może jeszcze nie istnieć podczas renderowania po stronie serwera albo może być nieaktualny podczas ponownego renderowania. Zawsze odczytuj DOM wewnątrz useLayoutEffect (aby odczytać go przed malowaniem) lub useEffect (aby odczytać go po malowaniu), gdy masz gwarancję, że DOM jest aktualny.

W której podfazie fazy commitowania React jest uruchamiany useLayoutEffect?

Faza renderowania React buduje drzewo fiber i może zostać przerwana, natomiast faza commitowania stosuje zmiany w DOM i zawsze przebiega synchronicznie. Commitowanie składa się z trzech podfaz: przed mutacją, mutacji i layoutu. useLayoutEffect jest uruchamiany w fazie layoutu przed malowaniem. useEffect jest uruchamiany jako efekt pasywny po malowaniu.