Podczas pracy zawodowej zdarzało mi się doświadczać sytuacji, gdy pracując pod presją czasu trzeba było iść na „kompromisy” jeśli chodzi o jakość kodu. Z czasem w projekcie używającym Reacta pojawiały się komponenty typu „wielotysięczniki”, które miały setki a czasem nawet tysiące linii kodu. Im dłużej trwał development, tym więcej kodu dolepiane było do takich komponentów oraz rosła ich liczba zależności.
Gdy zaczęliśmy przerabiać takie olbrzymy na mniejsze komponenty, nieco zaskakującą korzyścią był spadek ilości rerenderów. Po zastanowieniu się, okazało się to proste i oczywiste – zarządzanie stanem, również przeniesione do różnych komponentów, powodowało rerendery tylko tych komponentów w których było zawarte.
Przykład w React
Sposób liczenia rerenderów
Choć istnieją rozwiązania jak np react-render-counter na potrzeby uproszczenia przykładu zastosujemy zwykłe zmienne:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let reportRerenderBeforeRefactorCounter = 0;
let messageRerenderBeforeRefactorCounter = 0;
let reportRerenderAfterRefactorCounter = 0;
let messageRerenderAfterRefactorCounter = 0;
let reportRerenderBeforeRefactorCounter = 0;
let messageRerenderBeforeRefactorCounter = 0;
let reportRerenderAfterRefactorCounter = 0;
let messageRerenderAfterRefactorCounter = 0;
let reportRerenderBeforeRefactorCounter = 0;
let messageRerenderBeforeRefactorCounter = 0;
let reportRerenderAfterRefactorCounter = 0;
let messageRerenderAfterRefactorCounter = 0;
Wartości te inkrementowane będą za każdym razem gdy nastąpi wyrenderowanie elementu:
W takiej wersji, ponieważ w jednym komponencie znajdują się wszystkie elementy zmieniające stan aplikacji, rerenderują się również te elementy co do których nie ma potrzeby by to robić:
Każdy komponent będzie sam zarządzał swoim stanem. Dzięki temu zmiany w jednym komponencie nie będą wpływać na rerenderowanie drugiego. Spójrzmy jak przedstawia się orientacyjnie liczba rerenderów:
Wartości są różne, ponieważ każdy komponent „liczy” tylko swoje rerendery. Stąd rozbieżność – mimo że w komponencie formularza zostało wpisanych wiele znaków, żaden z rerenderów nie wpłynął na komponent z przyciskiem raportów.
Gdy myślimy o refaktoryzacji – wydzielaniu komponentów na mniejsze, rozdzielaniu zakresów odpowiedzialności – rzadko pojawia się temat wydajności aplikacji. Okazuje się jednak, że jeśli rozbijemy duże komponenty na mniejsze, poprawnie poukładamy co do którego należy to darmowym zyskiem będzie poprawa wydajności naszej aplikacji – dlatego zanim zastosujesz optymalizacje typu React.memo sprawdź, czy przypadkiem małe wyczyszczenie kodu nie załatwi tego problemu przy okazji.