DEV Community

Cover image for Jak zoptymalizować React Context?
Bartosz Zagrodzki
Bartosz Zagrodzki

Posted on

Jak zoptymalizować React Context?

Przetłumaczona wersja artykułu Kenta C. Doddsa

NOTKA: Zanim zaczniemy, chciałbym mieć pewność, że wiesz, kiedy Twój kontekst wymaga optymalizacji:

  1. Wartości często się zmieniają.
  2. Twój kontekst ma wielu konsumentów.
  3. Zawracasz sobie głowę używaniem React.memo.
  4. Po zmierzeniu wydajności, dochodzisz do wniosku, że potrzebujesz optymalizacji.

Jeśli te punkty opisują Twoją sytuację, czytaj dalej (nie przegap alternatywnego rozwiązania, które prawdopodobnie jest lepsze). W rzeczywistości jest ono znacznie lepsze, przerobiłem nawet ten post, by to pokazać. Jeśli chcesz zobaczyć moją poprzednią rekomendację, zajrzyj tutaj.

Uwierz mi, jeśli zamierzasz to zrobić tylko dlatego, że uważasz swój kod za zbyt wolny, nie przejmuj się. Nie żartuję. React jest naprawdę szybki, a dodanie złożoności w imię wydajności, gdy ta nie jest taka zła, po prostu marnuje Twój "budżet złożoności".

Najprostszym rozwiązaniem, by zoptymalizować kontekst jest użycie hooka useReducer zamiast useState oraz umieszczenie stanu w jednym dostawcy, a funkcji dispatch w drugim:

Nie tylko nie musisz używać w tym przypadku useMemo, ale również unikasz ponownego renderowania komponentów używających kontekstu:

kliknięcie

Działa to tak samo, jak w przypadku mojego oryginalnego rozwiązania z useMemo, z wyjątkiem tego, że kontekst komponentu <Counter /> nie jest aktualizowany, przez co unikamy całkowicie ponownego renderowania.

Osobiście uważam, że jest to bardziej skomplikowane API, niż mogłoby być, dlatego w większości przypadków nie przejmowałbym się optymalizacją kontekstu. Ale jeśli naprawdę tego potrzebujesz, zrób to tak, by jak najprościej obejść problem.

Rozdzielenie stanu i dispatch bywa irytujące

Niektórzy uważają to za denerwujące:

const state = useCountState()
const dispatch = useCountDispatch()
Enter fullscreen mode Exit fullscreen mode

Mówią: "nie można tego zrobić po prostu tak?"

const [state, dispatch] = useCount()
Enter fullscreen mode Exit fullscreen mode

Oczywiście, że można:

function useCount() {
  return [useCountState(), useCountDispatch()]
}
Enter fullscreen mode Exit fullscreen mode

Pamiętaj tylko, że każdy komponent używający tego, traci korzyści związane z wydajnością, jeśli tak naprawdę potrzebuje jednej z tych rzeczy.

Sprawdź również: React Context - jak efektywnie go używać?

Top comments (0)