Kiedy React mówi o re-renderze, ma na myśli trzy rzeczy

Kiedy wywołujesz setState, React nie tylko aktualizuje DOM. Wykonuje on trzy oddzielne fazy w określonej sekwencji. Większość programistów myli te fazy. Zrozumienie różnicy pomaga w rozwiązywaniu problemów z wydajnością.

Trzy fazy:

• Render: React wywołuje funkcję Twojego komponentu. • Reconcile: React porównuje nowy wynik ze starym. • Commit: React wprowadza zmiany do DOM.

  1. Faza Render

React uruchamia Twoją funkcję. Używa aktualnych propsów. Funkcja zwraca JSX. Ten JSX to po prostu lista obiektów JavaScript. Ludzie nazywają to wirtualnym DOM. To nie jest prawdziwy DOM. To opis tego, jak powinien wyglądać interfejs użytkownika (UI). Na ekranie nic jeszcze się nie pojawia. Ta faza to czysta matematyka i logika.

  1. Faza Reconcile

React przechowuje stare i nowe drzewo. Szuka między nimi różnic. Jeśli typ elementu ulega zmianie, React zastępuje całe drzewo. Jeśli zmieniają się tylko propsy, React je aktualizuje. To tutaj kluczowe znaczenie mają klucze (keys). Klucze pomagają Reactowi dopasować elementy listy na podstawie ich tożsamości, a nie pozycji. Ta faza tworzy listę minimalnych kroków niezbędnych do zaktualizowania DOM.

  1. Faza Commit

React bierze listę zmian i modyfikuje rzeczywisty DOM. Tworzy nowe węzły i usuwa stare. To właśnie wtedy użytkownicy widzą zmiany na ekranie. Po tym następuje proces malowania (paint) przez przeglądarkę. Następnie uruchamiany jest useEffect.

Powszechne błędne przekonania:

• Re-render nie zawsze zmienia DOM. Jeśli wynik jest taki sam, React nie wykonuje żadnych działań w fazie commit. • React.memo pomija wywołanie funkcji. Nie pomija jednak aktualizacji DOM. • Propsy nie wyzwalają re-renderów. Re-render komponentu nadrzędnego wyzwala re-render komponentu potomnego. Zmiana propsów jest jedynie tego rezultatem.

Jak poprawić wydajność:

Jeśli Twoja funkcja działa wolno, masz problem z fazą Render. Przenieś ciężkie operacje poza funkcję lub użyj memoizacji.

Jeśli React przebudowuje ogromne listy, masz problem z fazą Reconcile. Sprawdź swoje klucze (keys).

Jeśli DOM jest zbyt często aktualizowany, masz problem z fazą Commit. Użyj wirtualizacji lub zmień strukturę.

React 19 oraz React Compiler wykonują teraz wiele z tych zadań za Ciebie. Jednak znajomość tych faz pomaga w lepszym debugowaniu.

Źródło: https://dev.to/dip_032d2fe1959e1990ddbb1/when-react-says-re-render-it-actually-means-three-things-11d7