Wady React Hooks #152
Replies: 15 comments 32 replies
-
Hej, dzięki za ciekawy artykuł! Mała poprawka - do komponentów używamy React.memo, a useMemo do "ciężkich" obliczeń ;) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Ktoś już zwrócił mi na to uwagę i od razu poprawiłem – to zwykła literówka. Jeśli nadal widzisz stary tekst, to pewnie cache serwera. Za jakiś czas powinno być ok! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Bardzo potrzebny głos w dyskusji. Takie teksty zawsze są przydatne w momentach niebezpiecznie rosnącego hype-driven-developmentu; tak dla przypomnienia, że to tylko kolejny rodzaj młotka. ;) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Dzięki :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Świetne podsumowanie - dla kilkuletniego Angularowca i przede wszystkim - front-endowca - hooks to jest niestety nieporozumienie od strony DX. Niestety, pokazuje też najgorszą moim zdaniem cechę środowiska Reactowego (o której powstała książka "Nowe szaty króla"). Przerzuć to proszę na angielski jak znajdziesz czas, bo chętnie poczytałbym odpowiedzi fanów tego podejścia na ten artykuł. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Kilka osób to już sugerowało, więc tłumaczenie pewnie powstanie przez weekend :) Dzięki za komentarz. IMHO o wiele lepszy dx daje rekatywnosc. Vue js 3 zrobiło swoje hooki i zrobiło to dobrze, warto spojrzeć. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
ESLint nie pomoże gdy autor nie potrafi korzystać z useState. https://codesandbox.io/s/distracted-wright-fh48t Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Tak, jest tam bug, który może zawieszać przeglądarkę. Komponent w kółko wywołuje funkcję Czy da się to poprawnie zrobić na Hookach? Tak! Używając mutowalnego refa: https://codesandbox.io/s/dazzling-galois-e7g20 Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Zrobiłem bez ref'ów i działa: Jedynie co zrobiłem to zaimplementowałem unsubscribe. Natomiast fakt, wywoływanie w kółko unsubscribe/subscribe jest tu niepotrzebnym narzutem. Czyli właściwie z punktu widzenia poprawności (nie wydajności) we wszystkich tych próbach naprawy błędem było wielokrotne dopisanie się do subscribe bez usunięcia po sobie starej? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Można tak. Ale chodziło mi o stworzenie przykładu, w którym naprawa problemu jest a) niebanalna i b) eslint źle podpowiada rozwiązanie :) Oczywiście, wszystkie da się rozwiązać – ale nie jest to oczywiste. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
eslint z exhaustive-deps i prettier w WebStorm jeszcze lepsze jaja potrafi zrobić. Mianowicie sam wypełnić deps wszystkim, co jest używane w useEffect. Kiedyś zrobiłem sobie forka tego: https://github.com/joepuzzo/informed (początek lipca 2019). Puściłem elegancko prettier i przeglądarka się zawiesiła ;) okazało się, że przyczyną było wywołanie się useEffect, która miała za dużo w deps i wywoływała się w efekcie przy każdym renderze. A ona znowu coś tam zmieniała i to wymuszało kolejny render i tak szedł w kółko. https://github.com/joepuzzo/informed/blob/40efaccf1cf4b00019a589735e45b25186d76fb0/src/hooks/useField.js - gość nawet okomentował to "// This is VERYYYY!! Important!", że deps mają być takie, a nie inne. Pytanie moje, czy w takim razie taki useEffect, który używa tego co jest zmienne i nie ma tego w deps, jest w ogóle poprawny? Nie powinno się własnie mutowalnego refa użyć? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Może być poprawny, jeśli wiesz co robisz :) Ale, jak widać, nie jest to ani intuicyjne, ani czytelne… Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Komponent, który ma służyć jako przykład jak łatwo jest pisać komponenty klasowe nie działa. https://codesandbox.io/s/ecstatic-euclid-4lve6 Brakuje w nim funkcji Brakuje też Poza tym ma buga: przy pierwszym renderze usuwa interval o id 0 (jeśli gdzie indziej w aplikacji tworzone są intervale to niespodziewanie jeden z nich zniknie). Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Słuszna uwaga, potem poprawię. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Komponent już poprawiony. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
A teraz zdaj sobie sprawę z tego, że w React.useCallback musisz opakować każdą funkcję, którą przekazujesz do innego komponentu. Każdą jedną. To zły pomysł. W większości przypadków dodawanie useCallback tylko spowolni kod. https://kentcdodds.com/blog/usememo-and-usecallback Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Nie wiem, skąd bierzesz takie informacje, ale to nieprawda i linkowany post nic takiego nie mówi :) Odpisywałem dłużej już komuś na Facebooku, napiszę kolejny artykuł, żeby wyjaśnić tę często powtarzaną nieprawdę. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Jak najbardziej to prawda, w najnowszych wersjach reacta re-render nie jest problemem bo jest szybki i nie trzeba wszystkiego opakowywać w useCallback czy useMemo, sami autorzy o tym mówią a znaleźć też można wiele artykułów na ten temat, które sprawdzają wydajność i mówią wprost że rzadko kiedy useCallback trzeba użyć :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Mógłbyś podlinkować, gdzie autorzy o tym mówią oraz do jakichś benchmarków? Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Np tutaj facebook/react#16437, rerender nie jest zly jest jest „cheap” a przewaznie jest w innych przypadkach dopiero MUSISZ uzyc useCallback, raczej optymalizujemy gdy widziny problem a nie na wszelki wypadek Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Czyli nie masz linka do żadnych benchmarków? Problem polega na tym, że to, o czym mówisz ma zastosowanie wyłącznie w komponentach funkcyjnych. W klasowych ten problem w ogóle nie występował, nigdy nie trzeba było się zastanawiać, czy keszować funkcje, czy nie, bo to zawsze po prostu działo się samo :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
PS Wrzuciłem wcześniej link do poprawionego setState. Tak wygląda pełna implementacja subskrypcji za pomocą hooków. https://codesandbox.io/s/elated-browser-7r7k7 Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Niestety żaden z Twoich linków mi się nie ładuje (to pewnie wina mojego internetu?), więc nie sprawdzę, czy dobrze to napisałeś. Spróbuję ponownie wieczorem i dam znać. Dzięki za kod :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Okej, widzę już kod – to dopiero pokazuję skalę problemu i skomplikowania 😵 A linkowany przez Ciebie wcześniej „poprawiony setState” wprowadza dwa bardzo poważne bugi i tylko maskuje problem. Tak naprawdę aplikacja „działa” tylko przypadkiem. Dokładnie odpisałem w komentarzu niżej. Widać tutaj, jak na dłoni, że rozumienie nawet podstawowych hooków sprawia trudność praktycznie wszystkim osobom, nawet tym, które chcą uchodzić za ekspertów. I między innymi właśnie o tym problemie mówi mój artykuł :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
A ja mam wrażenie że ten artykuł jest wynikiem jakiejś niewiedzy, obrazy na React :) Czekam na wersję angielską żeby obiegła świat :) Argumenty np takie odnośnie reużywalności i tego że hooki pomagają unikać błędów ile kodu jesteś w stanie zainstalować z npm? Czy weryfikujesz jego poprawność? Czy autorki i autorzy paczek na npm nie popełniają błędów?są naprawdę niskiego poziomu, czy ten przykład z `useInterval`, skoro nie ma to być reużywlny hook tak jak ten komponent nie jest reużywalny to można to zdecydownie prościej i czytelniej zrobić tak samo pozostałe przykłady. Za mocno subiektywny artykuł, mało merytoryczny. Na szczęście nikt nie nakazuje używania hooków, można korzystać ze starych dobrych "klas" - co jak wiemy w JS też nie jest raczej zalecane :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Jakiej konkretnie niewiedzy? Dlaczego ten argument jest Twoim zdaniem niskiego poziomu? Nie podając kontrargumentów sprawiasz, że Twój komentarz jest niemerytoryczny i staje się tylko zwykłym ad personam. Dlaczego Jak można to zrobić prościej i czytelniej, czy mógłbyś podać przykład? Nie sądzę, aby to miało jakikolwiek związek z „reużywalnością” tego hooka. Skąd wynalazłeś informację, że używanie klas w JS nie jest zalecane? To po prostu zwykła bzdura. Będę wdzięczny za wskazanie źródła, które rozsiewa takie informacje i wprowadza początkujących w błąd. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Co do klas to to po prostu nie sa prawdziwe klasy jak w innych jezykach :) https://www.toptal.com/javascript/es6-class-chaos-keeps-js-developer-up Kolejny argument to Abramov sam pisal ze ludzie myslą ze w tych komponentach klasowych nie ma magii a jest wiecej niz w hookach Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Klasy, jak klasy. To, że działają inaczej, niż w niektórych językach nie oznacza, że nie są „prawdziwe”. W komponentach klasowych nie ma „magii”. Tak samo, jak nie ma jej w Hookach. Jest po prostu kod. Mówienie o czymś „magia” według mnie świadczy raczej o lenistwie i nierozumieniu tematu – no chyba, że to miał być żarcik ;) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Tak jest zalozenie ze maja byc reuzywalne ale to porownaj kod takiej reuzywalnej klasy i wtedy bedzie to mialo sens :) Tezy postawione w artykule maja w sobie duzo prawdy ale sa mocno subiektywne, ale tez pewnie taki mial ten artykul byc Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
No nie ma problemu, możemy porównać :) Możemy zrobić HoC albo render propsa – będzie trochę więcej kodu, ale nie będzie on bardziej skomplikowany. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
dobre podsumowanie, mam podobne zdanie :) Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
React, niczym socjalizm, świetnie rozwiązuje problemy, które sam stworzył.Podoba mi się analogia z socjalizmem ;) ...bohaterskie pokonywanie problemów nieistniejących w innych systemach! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
:D Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Jak napiszesz artykuł w wersji angielskiej to prosiłbym o wrzucenie tego na stronę albo gdzieś na FB. Nie jestem tak biegły w tych tematach by się wypowiadać ale zaskoczył mnie twój wpis i z chęcią poczytałbym jak odniosą się do tego osoby kompetentne. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Siema, jestem javovcem, kursik ogarnalem z ciekawosci i cos tam w nastepnym projekcie ma byc z reactem. Lektura tego kursu i ewolucja kodu react'owego w kolejnych przykladach to jak podróz do jadra ciemnosci. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Mutowalność propsów w komponencie klasowym również prowadzi do bugów i w tym przypadku hooki mają bardziej naturalne zachowanie np taka metoda: async fetchItem() { // update props.itemId } Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Czyli jednak wracamy do tego, co napisałem w maju 2019 :D http://disq.us/p/21xzfl3 Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
No i się z nim zgodziłem :) Wszystko ma wady i zalety. Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Zrobiłem takie oto swoje zestawienie wad i zalet na podstawie własnych doświadczeń: Hooks
Klasa
Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Super podsumowanie! Komentarz zaimportowany z WordPressa |
Beta Was this translation helpful? Give feedback.
-
Wady React Hooks
Od wielu tygodni nie opada kurz po zamieszaniu związanym z React Hooks. Poziom hype przebił wszelki hajpometry, a rozsądna debata na temat kodu została zastąpiona prześciganiem się w pisaniu co raz to sprytniejszych i czystszych (w sensie pure) reReact Hooków. Zastanówmy się jednak nad wadami tego rozwiązania.
https://typeofweb.com/wady-react-hooks
Beta Was this translation helpful? Give feedback.
All reactions