Sprawdź, jak prosty refaktor może zredukować liczbę rerenderów w Twojej aplikacji!

Spis treści

  1. Wprowadzenie
  2. Przykład w React
    1. Sposób liczenia rerenderów
    2. Kod przez refaktoryzacją
    3. Kod po refaktoryzacji
    4. Kod przykładu na Github
    5. Klikany przykład na Github Pages
  3. Podsumowanie

Wprowadzenie

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.

Czytaj dalej Sprawdź, jak prosty refaktor może zredukować liczbę rerenderów w Twojej aplikacji!

React lazy loading – sprawdź co zyskasz!

Spis treści

  1. Wprowadzenie
  2. Przykład React lazy loading
    1. Opis
    2. Kod przykładu
      1. Szkielet aplikacji
      2. Wersja ze standardowym importem
      3. Wersja z importem przez lazy
    3. Kod przykładu React lazy na Github
    4. Klikalny przykład React lazy na Github Pages
  3. Podsumowanie

Wprowadzenie

Czy zastanawiało Cię kiedyś, jak wiele kodu z Twojej aplikacji nigdy nie zostanie przez część klientów użyte? Zdarzyło Ci się może zastanawiać, jak wiele z CSSów które piszesz zobaczy tylko jakiś procent użytkowników? Lub też wiesz, że pewnych elementów używa tylko pewien procent użytkowników?
Jeśli te założenia są prawdziwe w Twoim projekcie, możesz zastanowić się czy nie warto zaimplementować ładowania dynamicznego za pomocą React lazy – zwłaszcza jeśli bibliotek czy innych ciężkich elementów Twoja aplikacja używa tylko w pewnych kontekstach.

Czytaj dalej React lazy loading – sprawdź co zyskasz!