Używanie useCallback zawsze: Czy to dobry pomysł?

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

Używanie useCallback zawsze: Czy to dobry pomysł?

W świecie React.js ważne jest, aby pisać kod, który jest zarówno wydajny, jak i czytelny. Jednym ze sposobów na osiągnięcie tego celu jest stosowanie React Hooks, takich jak useCallback. W tym artykule przedstawimy argumenty za stosowaniem useCallback dla każdej funkcji, aby poprawić czytelność i spójność, nie wpływając negatywnie na wydajność.

https://typeofweb.com/uzywanie-usecallback-zawsze-czy-to-dobry-pomysl

[mateusz-bielak]

Używanie useCallback zawsze, to zdecydowanie zły pomysł. Z memoizacji należy korzystać tylko wtedy, kiedy ma to sens. Każde wykorzystanieuseCallback to dodatkowe obciążenie silnika JS. Wrzucanie memoizacji gdzie popadnie, może mieć efekt negatywny.

Polecam zapoznać się z artykułem Kent C. Dodds'a w tym zakresie:
https://kentcdodds.com/blog/usememo-and-usecallback

[arthwood]

@mateusz-bielak Gdyby chodziło o sam useCallback to faktycznie, tworzenie funkcji jest lżejsze niż funkcji + dependency array. Problem zaczyna się pojawiać gdy useCallback zaczyna być zależnością innych hooków a one innych itd. wtedy cała podstruktura jest regenerowana. Oczywiście można pilnować czy ktoś nie używa danego useCallback jako zależności, ale to jest praktycznie niemożliwe i zaprzecza istocie dla której hooki powstały. Po prostu najbezpieczniej jest zawsze używać hooków zgodnie z zasadami frameworka.

[arthwood]

Problem w tym że jeszcze nie zdarzyło mi się spotkać w projekcie zainstalowanych narzędzi badających wydajność poszczególnych renderów (na zasadzie CI), natomiast często widzę że by default callbacki są omijane. Otóż cały mój wywód można sprowadzić do tego że "średnio" bardziej opłaca się dodać callbacki niż je pominąć (oczekiwałbym że react jest pod to zoptymalizowany) - oczywiście mogę się mylić.

[mateusz-bielak]

Chciałbym zobaczyć dane, na których opierasz przekonanie, że "średnio" bardziej opłaca się je dodawać, niż pomijać 🙂

[arthwood]

hah i vice versa - tak jak napisałem - należałoby porównać oba podejścia w przeciętnym projekcie. Co więcej, implementacja callbacków może się zmienić w kolejnych wersjach frameworka i gdy nagle się okaże, że są teraz bardziej wydajne niż "nagie" funkcje to nic nie trzeba robić. Arbitralne wybieranie co zwrappować a co nie powoduje w mojej opinii zbyt duży narzut pracy i może spowodować więcej problemów przy pominięciu callbacka niż przy jego "niepotrzebnym" użyciu.

[mateusz-bielak]

Odniosę się jeszcze w takim razie do oficjalnej dokumentacji, która jasno wskazuje, że wykorzystywanie memoizacji wszędzie nie jest wskazane i że nie przynosi większych korzyści. Jest tam również informacja, że niektórzy decydują się na podejście, które Ty zaproponowałeś, jednak zauważają, że może to nieść pewne problemy.

Pominę już rozgrzebywanie dalszej dyskusji o innych dobrych praktykach wpływających na performance, czy o ryzyku fałszywego poczucia rozwiązania problemów performance'u przez samo użycie hooków. Dnia (albo nocy?) by nie wystarczyło 🙂

[arthwood]

Oczywiście, porównanie użycia memoizacji "wszędzie" vs "tylko tam gdzie trzeba" wypadnie na korzyść tego drugiego. Ja wskazuję na porównanie tego pierwszego to tego gdy jest ona pomijana "prawie" wszędzie.