Miesiąc: luty 2021

Spis treści

1. Wprowadzenie
2. Przechodzenie dalej bez kliknięcia
   1. Opis przypadku
   2. Implementacja useEffect vs useLayoutEffect
   3. Kod przykładu na Github
   4. Klikalny przykład na Github Pages
3. Podsumowanie

Wprowadzenie

UseEffect to jeden z najczęściej używanych hooków, za pomocą których uzyskujemy efekty podobne jak kiedyś za pomocą metod componentDidMount, componentDidUpdate i componentWillMount. Hook ten jednak wywołuje się po przerysowaniu komponentu. Rzeczy dziejące się w hooku są asynchroniczne w stosunku do rysowania elementów na ekranie i go nie blokują.

Istnieje jednak również hook useLayoutEffect – wykonywany przed przerysowaniem elementu, blokujące aktualizację tego co widzi użytkownik. Jak się okazuje, są przypadki gdy takie zachowanie jest nam potrzebne – mimo że w większości przypadków wystarczy nam useEffect.

Zapraszam Cię więc do artykułu, w którym przedstawię taki przypadek – luźno bazujący na tym, co niedawno przydarzyło mi się w pracy.

Czytaj dalej „Sprawdź, do czego może Ci sie przydać hook useLayoutEffect!”

Spis Treści

1. Wprowadzenie
2. Connect
   1. mapStateToProps
   2. mapDispatchToProps
   3. mergeProps
3. Hooki React Redux
   1. useDispatch
   2. useSelector
4. Ryzyka związane z przechodzeniem z connect na hooki
   1. Porównanie kodu connect i hooków
      1. Kod przykładu na Github
      2. Interaktywny przykład na Github Pages
   2. Na co uważać przy refaktorze?
5. Podsumowanie

Wprowadzenie

Hooki w świecie Reacta pojawiły się już jakiś czas temu i spotkały się z pozytywnym przyjęciem. Znalazły również zastosowanie w bibliotece Redux – mamy hooki useDispatch, useSelector i potrzebny w specyficznych przypadkach useStore.

Pracując w aplikacji która jest oparta o Reduxowe API connect myślałem na początku, że nowe hooki Reduxa okażą się bezpośrednim następcą starszego API i że od razu mogę zabrać się do aktualizacji kodu.

Okazało się, że niekoniecznie – przy przejściu na hooki trzeba uważać na pewne rzeczy i o tym będzie ten post.

Ale na początku zróbmy krótki wstęp do rzeczy, o których będziemy tu mówić.

Czytaj dalej „Sprawdź na co uważać, gdy w kodzie używającym Reduxa chcesz przejść z connect na hooki”