useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami

[type-of-web-komentarze[bot]]

useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami

Powszechnym zmartwieniem osób poznających komponenty funkcyjne jest tworzenie funkcji-callbacków przekazywanych dalej jako props. Wszak przy każdym renderze funkcja tworzona jest na nowo! Czy to aby nie marnotrastwo? Czy nie powoduje to problemów? React Hooks useMemo i useCallback przychodzą na ratunek!

https://typeofweb.com/usememo-usecallback-czyli-rozwiazanie-problemow-ze-zmieniajacymi-sie-propsami

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał		2019-05-21 16:38

No i to są argumenty, które sprawiają, że hooki wcale nie są takie różowe. Przez te dodatkowe wrappery bardzo łatwo jest stworzyć spaghetti, a żeby nie tworzyć spaghetti, trzeba więcej zastanawiać się, jak to wszystko napisać.

Napisałem prosty projekt w hookach i bardzo mnie od siebie odrzucił takie rozwiązanie :) jak dla mnie, komponenty klasowe ftw 🎉

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-05-23 12:26

Początkowo się zgodziłem w myślach z tym komentarzem. Rzeczywiście, w niektórych przypadkach klasy tutaj będą ładniejsze. Ale nie zawsze!
Weźmy przykład z Context API. Mamy Provider, przekazujemy do niego value, które jest obiektem.
Pytanie: Jak można łatwo cache'ować ten obiekt w klasie, aby komponenty niepotrzebnie się nie przerenderowywały? Jest to trudne i brzydkie. W funkcjach tego problemu nie ma, useMemo i po kłopocie.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Maciek		2019-08-02 10:19

Na pewno należy używać z rozwagą ale stwierdzenie, że "zawsze" bo nie ma negatywnego wpływu jest mocno przesadzone :)
Zapraszam do artykułu: https://kentcdodds.com/blog/usememo-and-usecallback

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-08-02 11:55

Przykład z artykułu nie ma sensu, bo do onClick i tak przekazywana jest zawsze nowa funkcja strzałkowa. W związku z czym użycie funkcji useCallback jest całkowicie bezcelowe i niepoprawne.
W praktycznie każdym innym przypadku będzie zysk na wydajności.

Trzeba brać poprawkę na "guru" i zawsze samemu weryfikować treści :)

 
 

Komentarz zaimportowany z WordPressa

[ewelinam10]

W ten sposób obiekt options będzie za każdym razem tą samą referencją i komponent SpecialComponent nie będzie musiał się przerenderowywać — przynajmniej dopóki nie zmieni się oneProp lub anotherProp!

Myślę, że warte jest tu doprecyzowanie co masz na myśli używając słowa " przerenderowywanie"
Czy funkcja renderująca SpecialComponentu się nie wykona ?

[ewelinam10]

No właśnie - przerenderowanie komponentu nie odbędzie się dopiero gdy sam komponent jest również memoizowany. Sama memoizacja propsów nie spowoduję że komponent się nie przerenderuje.

[ewelinam10]

przerenderowanie komponentu nie obędzie się tylko wtedy gdy komponent będzie również memoizowany * poprawka stylistyczna ;)

[ewelinam10]

W artykule nie ma wzmianki o memoizacji komponentu, tylko o memoizacji propsów, która sama w sobie nie zapewni nam tego o czym piszesz. Dlatego warto byłoby to dodać. imo :)

[typeofweb]

Tak, masz rację! Umknęło mi to bo bez memo() na komponencie żaden z tych przykładów nie ma sensu i zawsze się renderuje 🤦‍♂
Poprawię to.

[ewelinam10]

Super :) Pozdrowienia !