diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md index b0fedf3cb..7611b1125 100644 --- a/content/docs/hooks-intro.md +++ b/content/docs/hooks-intro.md @@ -1,6 +1,6 @@ --- id: hooks-intro -title: Wprowadzenie do Hooków +title: Wprowadzenie do hooków permalink: docs/hooks-intro.html next: hooks-overview.html --- @@ -11,7 +11,7 @@ next: hooks-overview.html import React, { useState } from 'react'; function Example() { - // Zadeklaruj nową zmienną stanu, którą nazwiemy "count" + // Zadeklaruj nową zmienną stanu, którą nazwiemy „count” const [count, setCount] = useState(0); return ( @@ -25,17 +25,17 @@ function Example() { } ``` -Funkcja `useState` jest pierwszym "Hookiem", o którym będziemy się uczyć. Przykład ten jest jednak zaledwie zwiastunem. Nie przejmuj się, jeżeli nie ma to jeszcze większego sensu! +Funkcja `useState` jest pierwszym „hookiem”, o którym będziemy się uczyć. Przykład ten jest jednak zaledwie zwiastunem. Nie przejmuj się, jeżeli nie ma to jeszcze większego sensu! -**[W kolejnym rozdziale](/docs/hooks-overview.html) możesz rozpocząć naukę o Hookach.** Tutaj wyjaśnimy, dlaczego dodaliśmy Hooki do Reacta i w jaki sposób pomogą ci one w pisaniu wspaniałych aplikacji. +**[W kolejnym rozdziale](/docs/hooks-overview.html) możesz rozpocząć naukę o hookach.** Tutaj wyjaśnimy, dlaczego dodaliśmy hooki do Reacta i w jaki sposób pomogą ci one w pisaniu wspaniałych aplikacji. >Uwaga > ->React 16.8.0 jest pierwszą wersją, która wspiera Hooki. Podczas aktualizacji nie zapomnij zaktualizować wszystkich paczek, w tym React DOM. React Native będzie wspierał Hooki w kolejnym, stabilnym wydaniu. +>React 16.8.0 jest pierwszą wersją, która wspiera hooki. Podczas aktualizacji nie zapomnij zaktualizować wszystkich paczek, w tym React DOM. React Native będzie wspierał hooki w kolejnym, stabilnym wydaniu. ## Wprowadzenie wideo {#video-introduction} -Podczas konferencji "React Conf 2018" Sophie Alpert i Dan Abramov zaprezentowali po raz pierwszy Hooki. Następnie Ryan Florence zademonstrował, jak przepisać swoją aplikację, by móc ich używać. Wideo z konferencji zamieściliśmy poniżej: +Podczas konferencji „React Conf 2018” Sophie Alpert i Dan Abramov zaprezentowali po raz pierwszy hooki. Następnie Ryan Florence zademonstrował, jak przepisać swoją aplikację, by móc ich używać. Wideo z konferencji zamieściliśmy poniżej:
@@ -43,17 +43,17 @@ Podczas konferencji "React Conf 2018" Sophie Alpert i Dan Abramov zaprezentowali ## Bez krytycznych zmian {#no-breaking-changes} -Zanim przejdziemy dalej, zauważ że Hooki są: +Zanim przejdziemy dalej, zauważ że hooki są: -* **Całkowicie opcjonalne.** Możesz wypróbować Hooki w kilku komponentach, bez przepisywania istniejącego kodu. Jeżeli jednak nie masz ochoty, nie musisz ich jeszcze stosować ani uczyć się o nich. +* **Całkowicie opcjonalne.** Możesz wypróbować hooki w kilku komponentach, bez przepisywania istniejącego kodu. Jeżeli jednak nie masz ochoty, nie musisz ich jeszcze stosować ani uczyć się o nich. * **100% kompatybilne wstecznie.** Hooki nie zawierają żadnych zmian, które mogłyby zepsuć istniejący kod. * **Dostępne już teraz.** Hooki są dostępne od wersji 16.8.0. -**Nie ma planów na usunięcie klas z Reacta.** Możesz przeczytać o strategii stopniowego wdrażania Hooków w [kolejnym podrozdziale](#gradual-adoption-strategy) tej strony. +**Nie ma planów na usunięcie klas z Reacta.** Możesz przeczytać o strategii stopniowego wdrażania hooków w [kolejnym podrozdziale](#gradual-adoption-strategy) tej strony. -**Hooki nie zastępują twojej wiedzy na temat Reacta.** Zamiast tego wprowadzają bardziej bezpośredni interfejs API dla mechanizmów Reacta, które już znasz: właściwości (ang. *props*), stanu, kontekstu, referencji (ang. *refs*) i cyklu życia (ang. *lifecycle*). Jak pokażemy dalej, Hooki pozwalają też na łączenie ich w nowy, niezwykle skuteczny sposób. +**Hooki nie zastępują twojej wiedzy na temat Reacta.** Zamiast tego wprowadzają bardziej bezpośredni interfejs API dla mechanizmów Reacta, które już znasz: właściwości (ang. *props*), stanu, kontekstu, referencji (ang. *refs*) i cyklu życia (ang. *lifecycle*). Jak pokażemy dalej, hooki pozwalają też na łączenie ich w nowy, niezwykle skuteczny sposób. -**Jeżeli chcesz rozpocząć naukę o Hookach, [przejdź od razu do kolejnego rozdziału!](/docs/hooks-overview.html)** Możesz też kontynuować lekturę tego, aby dowiedzieć się, dlaczego w ogóle dodaliśmy Hooki, a także w jaki sposób będziemy je teraz stosować, bez potrzeby przepisywania naszych aplikacji. +**Jeżeli chcesz rozpocząć naukę o hookach, [przejdź od razu do kolejnego rozdziału!](/docs/hooks-overview.html)** Możesz też kontynuować lekturę tego, aby dowiedzieć się, dlaczego w ogóle dodaliśmy hooki, a także w jaki sposób będziemy je teraz stosować, bez potrzeby przepisywania naszych aplikacji. ## Motywacja {#motivation} @@ -61,11 +61,11 @@ Hooki rozwiązują wiele, pozornie niepowiązanych ze sobą, problemów Reacta, ### Współdzielenie logiki związanej ze stanem pomiędzy komponentami jest trudne {#its-hard-to-reuse-stateful-logic-between-components} -React nie oferuje sposobu na "dołączenie" powtarzalnego zachowania do komponentu (na przykład, połączenie go z magazynem (ang. *store*)). Jeżeli pracujesz z Reactem już jakiś czas, najprawdopodobniej znasz wzorce, takie jak [właściwości renderujące (ang. *render props*)](/docs/render-props.html) i [komponenty wyższego rzędu (ang. *higher-order components*)](/docs/higher-order-components.html), które próbują rozwiązać ten problem. Wzorce te wymagają jednak modyfikacji komponentów w momencie ich użycia, co może być niewygodne i powodować, że kod jest trudniejszy w odbiorze. Jeśli spojrzysz na typową aplikację napisaną w Reakcie przy pomocy narzędzia React DevTools, najprawdopodobniej ujrzysz tam "piekło" komponentów opakowujących (ang. *wrapper component*), dostawców (ang. *providers*), konsumentów (ang. *consumers*), komponentów wyższego rzędu, właściwości renderujących i innych abstrakcji. Moglibyśmy, co prawda, [filtrować je w DevToolsach](https://github.com/facebook/react-devtools/pull/503), ale to tylko wskazuje na głębszy problem: React potrzebuje lepszego podstawowego mechanizmu do współdzielenia logiki związanej ze stanem. +React nie oferuje sposobu na „dołączenie” powtarzalnego zachowania do komponentu (na przykład, połączenie go z magazynem (ang. *store*)). Jeżeli pracujesz z Reactem już jakiś czas, najprawdopodobniej znasz wzorce, takie jak [właściwości renderujące (ang. *render props*)](/docs/render-props.html) i [komponenty wyższego rzędu (ang. *higher-order components*)](/docs/higher-order-components.html), które próbują rozwiązać ten problem. Wzorce te wymagają jednak modyfikacji komponentów w momencie ich użycia, co może być niewygodne i powodować, że kod jest trudniejszy w odbiorze. Jeśli spojrzysz na typową aplikację napisaną w Reakcie przy pomocy narzędzia React DevTools, najprawdopodobniej ujrzysz tam „piekło” komponentów opakowujących (ang. *wrapper component*), dostawców (ang. *providers*), konsumentów (ang. *consumers*), komponentów wyższego rzędu, właściwości renderujących i innych abstrakcji. Moglibyśmy, co prawda, [filtrować je w DevToolsach](https://github.com/facebook/react-devtools/pull/503), ale to tylko wskazuje na głębszy problem: React potrzebuje lepszego podstawowego mechanizmu do współdzielenia logiki związanej ze stanem. -Korzystając z Hooków, możesz wydzielić logikę związaną ze stanem z komponentu. Dzięki czemu, nie wymaga on zależności przy testowaniu i jest łatwy w ponownym wykorzystaniu. **Hooki pozwalają na ponowne użycie logiki związanej ze stanem, bez konieczności zmiany hierarchii komponentów.** Sprawia to, że dzielenie się Hookami pomiędzy wieloma komponentami lub ze społecznością jest proste. +Korzystając z hooków, możesz wydzielić logikę związaną ze stanem z komponentu. Dzięki czemu, nie wymaga on zależności przy testowaniu i jest łatwy w ponownym wykorzystaniu. **Hooki pozwalają na ponowne użycie logiki związanej ze stanem, bez konieczności zmiany hierarchii komponentów.** Sprawia to, że dzielenie się hookami pomiędzy wieloma komponentami lub ze społecznością jest proste. -Omówimy ten temat szerzej w rozdziale pt. ["Tworzenie własnych Hooków"](/docs/hooks-custom.html). +Omówimy ten temat szerzej w rozdziale pt. [„Tworzenie własnych hooków”](/docs/hooks-custom.html). ### Złożone komponenty stają się trudne do zrozumienia {#complex-components-become-hard-to-understand} @@ -73,21 +73,21 @@ Często musieliśmy utrzymywać komponenty, które z początku proste, urosły d Wielokrotnie zdarza się, że nie ma możliwości rozbicia tych komponentów na mniejsze części, ponieważ logika związana ze stanem jest już wszędzie. Trudno jest też je testować. Jest to jeden z powodów, dla których wielu woli połączyć Reacta z zewnętrzną biblioteką do zarządzania stanem. To jednak często wprowadza zbyt wiele abstrakcji, zmusza do skakania pomiędzy plikami i utrudnia ponowne wykorzystanie komponentów. -Aby rozwiązać ten problem, **Hooki pozwalają podzielić komponent na mniejsze funkcje, bazując na powiązanych ze sobą częściach (takich jak tworzenie subskrypcji czy pobieranie danych)**, zamiast wymuszać sztuczny podział, związany z metodami cyklu życia. Ewentualnie, aby uczynić zachowanie komponentu bardziej przewidywalnym, możesz też dzięki hookom oddelegować zarządzanie lokalnym stanem komponentu do reduktora (ang. *reducer*). +Aby rozwiązać ten problem, **hooki pozwalają podzielić komponent na mniejsze funkcje, bazując na powiązanych ze sobą częściach (takich jak tworzenie subskrypcji czy pobieranie danych)**, zamiast wymuszać sztuczny podział, związany z metodami cyklu życia. Ewentualnie, aby uczynić zachowanie komponentu bardziej przewidywalnym, możesz też dzięki hookom oddelegować zarządzanie lokalnym stanem komponentu do reduktora (ang. *reducer*). -Szerzej omówimy to w rozdziale [Używanie Hooka Efektu](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). +Szerzej omówimy to w rozdziale [Używanie hooka efektów](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns). ### Klasy dezorientują zarówno ludzi, jak i maszyny {#classes-confuse-both-people-and-machines} Oprócz tego, że przez klasy trudniej jest ponownie wykorzystać i organizować kod, odkryliśmy, że mogą one również stanowić dużą przeszkodę w nauce Reacta. Trzeba przecież rozumieć, jak działa `this` w JavaScripcie - a działa on tu zupełnie inaczej niż w większości języków programowania. Trzeba pamiętać o wiązaniu (ang. *bind*) funkcji obsługi zdarzeń (ang. *event handlers*). Bez, wciąż niepotwierdzonych, [propozycji składni](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/) kod jest bardzo rozwlekły. Ludzie generalnie nie mają problemu ze zrozumieniem właściwości, stanu i kierunku przepływu danych z góry do dołu, a jednak klasy wciąż stanowią pewne wyzwanie. Wybór pomiędzy funkcyjnymi a klasowymi komponentami jest często przyczyną sporów, nawet pomiędzy doświadczonymi programistami Reacta. -Ponadto, React jest dostępny od około pięciu lat i chcielibyśmy mieć pewność, że pozostanie on tak samo istotny przez kolejne pięć. Jak pokazały biblioteki: [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) i inne, [kompilacja komponentów z wyprzedzeniem (ang. *ahead-of-time*)](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) ma ogromny potencjał. Szczególnie jeśli nie jest ograniczona tylko do szablonów. Niedawno eksperymentowaliśmy z [wyliczaniem wartości komponentów](https://github.com/facebook/react/issues/7323) z użyciem [Prepacka](https://prepack.io/) i wstępnie zaobserwowaliśmy obiecujące rezultaty. Odkryliśmy jednak, że komponenty klasowe mogą zachęcić do nieumyślnego stosowania pewnych wzorców, które spowodują spowolnienie tych optymalizacji. Klasy już teraz stanowią problem dla naszych narzędzi programistycznych. Na przykład, nie za dobrze się minifikują i często zawodzi przez nie "gorące przeładowanie" (ang. hot reloading). Chcemy przedstawić interfejs API, który zwiększy prawdopodobieństwo tego, że kod będzie optymalizowany. +Ponadto, React jest dostępny od około pięciu lat i chcielibyśmy mieć pewność, że pozostanie on tak samo istotny przez kolejne pięć. Jak pokazały biblioteki: [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) i inne, [kompilacja komponentów z wyprzedzeniem (ang. *ahead-of-time*)](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) ma ogromny potencjał. Szczególnie jeśli nie jest ograniczona tylko do szablonów. Niedawno eksperymentowaliśmy z [wyliczaniem wartości komponentów](https://github.com/facebook/react/issues/7323) z użyciem [Prepacka](https://prepack.io/) i wstępnie zaobserwowaliśmy obiecujące rezultaty. Odkryliśmy jednak, że komponenty klasowe mogą zachęcić do nieumyślnego stosowania pewnych wzorców, które spowodują spowolnienie tych optymalizacji. Klasy już teraz stanowią problem dla naszych narzędzi programistycznych. Na przykład, nie za dobrze się minifikują i często zawodzi przez nie „gorące przeładowanie” (ang. hot reloading). Chcemy przedstawić interfejs API, który zwiększy prawdopodobieństwo tego, że kod będzie optymalizowany. -Aby rozwiązać te problemy, **Hooki pozwalają na korzystanie z większej liczby funkcjonalności Reacta, bez użycia klas.** Koncepcyjnie, komponentom reactowym zawsze bliżej było do funkcji. Hooki zapewniają dostęp do funkcji bez poświęcania praktycznej natury Reacta. Hooki zapewniają dostęp do imperatywnych "furtek" i nie wymagają nauki skomplikowanych technik programowania funkcjonalnego lub reaktywnego. +Aby rozwiązać te problemy, **Hooki pozwalają na korzystanie z większej liczby funkcjonalności Reacta, bez użycia klas.** Koncepcyjnie, komponentom reactowym zawsze bliżej było do funkcji. Hooki zapewniają dostęp do funkcji bez poświęcania praktycznej natury Reacta. Hooki zapewniają dostęp do imperatywnych „furtek” i nie wymagają nauki skomplikowanych technik programowania funkcjonalnego lub reaktywnego. >Przykłady > ->Rozdział pt. ["Hooki w pigułce"](/docs/hooks-overview.html) jest dobrym miejscem, by zacząć naukę o Hookach +>Rozdział pt. [„Hooki w pigułce”](/docs/hooks-overview.html) jest dobrym miejscem, by zacząć naukę o hookach ## Strategia Stopniowego Wdrażania {#gradual-adoption-strategy} @@ -97,13 +97,13 @@ Zdajemy sobie sprawę, że programiści Reacta są skupieni na dostarczaniu prod Rozumiemy też, że przy dodawaniu do Reacta nowego, podstawowego mechanizmu poprzeczka została postawiona niezwykle wysoko. Dla zainteresowanych przygotowaliśmy [szczegółowy RFC](https://github.com/reactjs/rfcs/pull/68), który dokładnie zgłębia nasze motywy oraz rzuca dodatkowe światło na konkretne decyzje projektowe i obecny stan techniki. -**Co najważniejsze, hooki działają równolegle z istniejącym kodem, więc możesz wdrażać je stopniowo.** Nie ma pośpiechu, aby migrować kod do Hooków. Zalecamy unikanie "wielkiego przepisywania", szczególnie dla istniejących, skomplikowanych komponentów klasowych. Potrzeba delikatnie przestawić myślenie, aby zacząć "myśleć hookami". Z naszego doświadczenia wynika, że najlepiej poćwiczyć używanie hooków na nowych, niekrytycznych komponentach i upewnić się, że wszyscy członkowie zespołu czują się z nimi komfortowo. Po wypróbowaniu hooków, prosimy - [prześlij nam opinię](https://github.com/facebook/react/issues/new). Zarówno pozytywną, jak i negatywną. +**Co najważniejsze, hooki działają równolegle z istniejącym kodem, więc możesz wdrażać je stopniowo.** Nie ma pośpiechu, aby migrować kod do hooków. Zalecamy unikanie „wielkiego przepisywania”, szczególnie dla istniejących, skomplikowanych komponentów klasowych. Potrzeba delikatnie przestawić myślenie, aby zacząć „myśleć hookami”. Z naszego doświadczenia wynika, że najlepiej poćwiczyć używanie hooków na nowych, niekrytycznych komponentach i upewnić się, że wszyscy członkowie zespołu czują się z nimi komfortowo. Po wypróbowaniu hooków, prosimy - [prześlij nam opinię](https://github.com/facebook/react/issues/new). Zarówno pozytywną, jak i negatywną. -Chcielibyśmy, żeby Hooki objęły wszystkie możliwe przypadki użycia klas, ale **w możliwej do przewidzenia przyszłości, będziemy kontynuować wsparcie komponentów klasowych.** W Facebooku mamy dziesiątki tysięcy komponentów napisanych jako klasy i zdecydowanie nie planujemy ich przepisywania. Zamiast tego zaczynamy używać Hooków w nowym kodzie, równolegle do klas. +Chcielibyśmy, żeby hooki objęły wszystkie możliwe przypadki użycia klas, ale **w możliwej do przewidzenia przyszłości, będziemy kontynuować wsparcie komponentów klasowych.** W Facebooku mamy dziesiątki tysięcy komponentów napisanych jako klasy i zdecydowanie nie planujemy ich przepisywania. Zamiast tego zaczynamy używać hooków w nowym kodzie, równolegle do klas. ## Najczęściej zadawane pytania {#frequently-asked-questions} -Przygotowaliśmy rozdział pt. ["Hooki - FAQ"](/docs/hooks-faq.html), w którym odpowiedzieliśmy na najczęściej zadawane pytania. +Przygotowaliśmy rozdział pt. [„Hooki - FAQ”](/docs/hooks-faq.html), w którym odpowiedzieliśmy na najczęściej zadawane pytania. ## Kolejne kroki {#next-steps} diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index e04213c21..7fdc52e82 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -8,16 +8,15 @@ prev: hooks-intro.html *Hooki* są nowym dodatkiem w Reakcie 16.8. Pozwalają one używać stanu i innych funkcjonalności Reacta, bez użycia klas. -Hooki są [kompatybilne wstecznie](/docs/hooks-intro.html#no-breaking-changes). Ten rozdział zawiera szybki przegląd wiedzy o Hookach i przeznaczony jest dla doświadczonych użytkowników Reacta. Jeżeli w którymś momencie się zgubisz, szukaj żółtych ramek, takich jak ta poniżej: - +Hooki są [kompatybilne wstecznie](/docs/hooks-intro.html#no-breaking-changes). Ten rozdział zawiera szybki przegląd wiedzy o hookach i przeznaczony jest dla doświadczonych użytkowników Reacta. Jeżeli w którymś momencie się zgubisz, szukaj żółtych ramek, takich jak ta poniżej: >Szczegółowe wyjaśnienie > ->Przeczytaj podrozdział ["Motywacja"](/docs/hooks-intro.html#motivation), aby dowiedzieć się, dlaczego dodaliśmy Hooki +>Przeczytaj podrozdział pt. [„Motywacja”](/docs/hooks-intro.html#motivation), aby dowiedzieć się, dlaczego dodaliśmy hooki **↑↑↑ Każdy podrozdział zakończony jest taką żółtą ramką.** Zawierają one linki do szczegółowych objaśnień. -## 📌 Hook Stanu {#state-hook} +## 📌 Hook stanu {#state-hook} Ten przykład renderuje licznik. Kiedy wciskasz przycisk, zwiększa on wartość w stanie. @@ -25,7 +24,7 @@ Ten przykład renderuje licznik. Kiedy wciskasz przycisk, zwiększa on wartość import React, { useState } from 'react'; function Example() { - // Zadeklaruj nową zmienną stanu, którą nazwiemy "count" + // Zadeklaruj nową zmienną stanu, którą nazwiemy „count” const [count, setCount] = useState(0); return ( @@ -39,13 +38,13 @@ function Example() { } ``` -W tym przykładzie `useState` jest *hookiem* (za chwilę wyjaśnimy, co to znaczy). Wywołujemy go z wewnątrz komponentu funkcyjnego, aby wzbogacić go o lokalny stan. React zachowa ten stan pomiędzy kolejnymi renderowaniami. `useState` zwraca parę: *aktualną* wartość stanu i funkcję, która pozwala go aktualizować. Możesz wywołać tę funkcję w procedurze obsługi zdarzenia albo z innego miejsca. Działa to mniej więcej tak samo, jak `this.setState` w komponencie klasowym, z tą różnicą, że nie scala on starych i nowych wartości. (Szerzej omawiamy te różnice w rozdziale pt. ["Używanie hooka stanu"](/docs/hooks-state.html).) +W tym przykładzie `useState` jest *hookiem* (za chwilę wyjaśnimy, co to znaczy). Wywołujemy go z wewnątrz komponentu funkcyjnego, aby wzbogacić go o lokalny stan. React zachowa ten stan pomiędzy kolejnymi renderowaniami. `useState` zwraca parę: *aktualną* wartość stanu i funkcję, która pozwala go aktualizować. Możesz wywołać tę funkcję w procedurze obsługi zdarzenia albo z innego miejsca. Działa to mniej więcej tak samo, jak `this.setState` w komponencie klasowym, z tą różnicą, że nie scala on starych i nowych wartości. (Szerzej omawiamy te różnice w rozdziale pt. [„Używanie hooka stanu”](/docs/hooks-state.html).) Jedynym argumentem funkcji `useState` jest stan początkowy. W przykładzie powyżej jest to `0`, ponieważ nasz licznik startuje od zera. Zauważ, że w przeciwieństwie do `this.state`, stan nie musi być obiektem. Nic jednak nie stoi na przeszkodzie, by nim był. Wartość argumentu ze stanem początkowym jest wykorzystywana tylko podczas pierwszego renderowania. #### Deklaracja kilku zmiennych stanu {#declaring-multiple-state-variables} -Możesz użyć Hooka Stanu kilka razy w tym samym komponencie: +Możesz użyć hooka stanu kilka razy w tym samym komponencie: ```js function ExampleWithManyStates() { @@ -59,21 +58,21 @@ function ExampleWithManyStates() { Dzięki składni [przypisania destrukturyzującego tablic](https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Operatory/Destructuring_assignment#Destrukturyzacja_tablic) możemy nadać różne nazwy zmiennym stanu, które zadeklarowaliśmy wywołując funkcję `useState`. Nazwy te nie są częścią interfejsu API `useState`. Zamiast tego React zakłada, że jeżeli wywołujesz funckję `useState` wielokrotnie, za każdym razem (przy każdym renderze) robisz to w tej samej kolejności. W dalszej części tego rozdziału omówimy, jak to działa i dlaczego jest to przydatne. -#### Ale czym jest Hook? {#but-what-is-a-hook} +#### Ale czym jest hook? {#but-what-is-a-hook} -Hooki są to funkcje, które pozwalają "zahaczyć się" w mechanizmy stanu i cyklu życia Reacta, z wewnątrz komponentów funkcyjnych. Hooki nie działają w klasach -- zamiast tego pozwalają korzystać z Reacta bez klas. ([Nie zalecamy](/docs/hooks-intro.html#gradual-adoption-strategy) przepisywania istniejących komponentów z dnia na dzień, ale jeżeli masz ochotę, możesz zacząć korzystać z Hooków w nowych komponentach.) +Hooki są to funkcje, które pozwalają „zahaczyć się” w mechanizmy stanu i cyklu życia Reacta, z wewnątrz komponentów funkcyjnych. Hooki nie działają w klasach -- zamiast tego pozwalają korzystać z Reacta bez klas. ([Nie zalecamy](/docs/hooks-intro.html#gradual-adoption-strategy) przepisywania istniejących komponentów z dnia na dzień, ale jeżeli masz ochotę, możesz zacząć korzystać z hooków w nowych komponentach.) -React dostarcza kilka wbudowanych Hooków, między innymi `useState`. Ale możesz też stworzyć własne Hooki, by współdzielić zachowanie związane ze stanem pomiędzy komponentami. Najpierw rzućmy jednak okiem na wbudowane Hooki. +React dostarcza kilka wbudowanych hooków, między innymi `useState`. Ale możesz też stworzyć własne hooki, by współdzielić zachowanie związane ze stanem pomiędzy komponentami. Najpierw rzućmy jednak okiem na wbudowane hooki. >Szczegółowe wyjaśnienie > ->Hookowi stanu poświęciliśmy cały rozdział: ["Używanie hooka stanu"](/docs/hooks-state.html). +>Hookowi stanu poświęciliśmy cały rozdział: [„Używanie hooka stanu”](/docs/hooks-state.html). -## ⚡️ Hook Efektu {#effect-hook} +## ⚡️ Hook efektów {#effect-hook} -Najprawdopodobniej zdarzyło ci się już pobierać dane, obsługiwać subskrypcje lub ręcznie modyfikować drzewo DOM wewnątrz komponentów reactowych. Tego typu operacje nazywamy ["efektami ubocznymi"](https://pl.wikipedia.org/wiki/Skutek_uboczny_(informatyka)) (ang. *side effects*), ponieważ mogą one wpływać na inne komponenty i nie mogą zostać przeprowadzone podczas renderowania. +Najprawdopodobniej zdarzyło ci się już pobierać dane, obsługiwać subskrypcje lub ręcznie modyfikować drzewo DOM wewnątrz komponentów reactowych. Tego typu operacje nazywamy [„efektami ubocznymi”](https://pl.wikipedia.org/wiki/Skutek_uboczny_(informatyka)) (ang. *side effects*), ponieważ mogą one wpływać na inne komponenty i nie mogą zostać przeprowadzone podczas renderowania. -Hook Efektu `useEffect` daje możliwość przeprowadzania "efektów ubocznych" z wewnątrz komponentu funkcyjnego. Pełni on taką samą funkcję, jak `componentDidMount`, `componentDidUpdate` i `componentWillUnmount` w komponentach klasowych, ale uproszczoną do jednego interfejsu API. (Różnice między nimi pokażemy na przykładach w rozdziale pt. ["Używanie Hooka Efektu"](/docs/hooks-effect.html).) +Hook efektów `useEffect` daje możliwość przeprowadzania „efektów ubocznych” z wewnątrz komponentu funkcyjnego. Pełni on taką samą funkcję, jak `componentDidMount`, `componentDidUpdate` i `componentWillUnmount` w komponentach klasowych, ale uproszczoną do jednego interfejsu API. (Różnice między nimi pokażemy na przykładach w rozdziale pt. [„Używanie hooka efektów”](/docs/hooks-effect.html).) Na przykład, ten komponent ustawia tytuł dokumentu HTML po tym, jak React zaktualizuje drzewo DOM: @@ -100,9 +99,9 @@ function Example() { } ``` -Kiedy wywołujesz funkcję `useEffect`, mówisz Reactowi, żeby uruchomił twój "efekt", gdy opróżni (ang. *flush*) bufor zmian do drzewa DOM. Efekty są deklarowane wewnątrz komponentu, więc mają dostęp do jego właściwości (ang. *props*) i stanu (ang. *state*). Domyślnie React uruchamia wszystkie efekty po każdym renderowaniu -- *włącznie* z pierwszym. (Różnice między tym a metodami cyklu życia komponentów klasowych omówimy w rozdziale pt. ["Używanie Hooka Efektu"](/docs/hooks-effect.html).) +Kiedy wywołujesz funkcję `useEffect`, mówisz Reactowi, żeby uruchomił twój „efekt”, gdy opróżni (ang. *flush*) bufor zmian do drzewa DOM. Efekty są deklarowane wewnątrz komponentu, więc mają dostęp do jego właściwości (ang. *props*) i stanu (ang. *state*). Domyślnie React uruchamia wszystkie efekty po każdym renderowaniu -- *włącznie* z pierwszym. (Różnice między tym a metodami cyklu życia komponentów klasowych omówimy w rozdziale pt. [„Używanie hooka efektów”](/docs/hooks-effect.html).) -Poprzez zwrócenie funkcji, efekty mogą też określać, w jaki sposób należy po nich "posprzątać". Na przykład, ten komponent używa efektu, aby zasubskrybować się do informacji o dostępności znajomego. A następnie sprząta po sobie, anulując tę subskrypcję. +Poprzez zwrócenie funkcji, efekty mogą też określać, w jaki sposób należy po nich „posprzątać”. Na przykład, ten komponent używa efektu, aby zasubskrybować się do informacji o dostępności znajomego. A następnie sprząta po sobie, anulując tę subskrypcję. ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -158,28 +157,28 @@ Hooki pozwalają organizować kod wewnątrz komponentu, bazując na powiązanych >Szczegółowe wyjaśnienie > ->Możesz dowiedzieć się więcej o `useEffect` w rozdziale pt. ["Używanie Hooka Efektu"](/docs/hooks-effect.html). +>Możesz dowiedzieć się więcej o `useEffect` w rozdziale pt. [„Używanie hooka efektów”](/docs/hooks-effect.html). -## ✌️ Zasady korzystania z Hooków {#rules-of-hooks} +## ✌️ Zasady korzystania z hooków {#rules-of-hooks} Hooki są funkcjami javascriptowymi, ale narzucają dwie dodatkowe zasady: -* Wywołuj Hooki tylko **z najwyższego poziomu kodu**. Nie wywołuj Hooków z wewnątrz pętli, warunków czy zagnieżdżonych funkcji. -* Wywołuj Hooki tylko **z wewnątrz reactowych komponentów funkcyjnych**. Nie wywołuj Hooków z wewnątrz zwykłych javascriptowych funkcji. (Jest jeszcze tylko jedno miejsce, z którego możesz wywoływać Hooki -- twoje własne Hooki. Za chwilę dowiemy się o tym więcej.) +* Wywołuj hooki tylko **z najwyższego poziomu kodu**. Nie wywołuj hooków z wewnątrz pętli, warunków czy zagnieżdżonych funkcji. +* Wywołuj hooki tylko **z wewnątrz reactowych komponentów funkcyjnych**. Nie wywołuj hooków z wewnątrz zwykłych javascriptowych funkcji. (Jest jeszcze tylko jedno miejsce, z którego możesz wywoływać hooki -- twoje własne hooki. Za chwilę dowiemy się o tym więcej.) -Stworzyliśmy [wtyczkę do lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks), która automatycznie wymusza te zasady. Rozumiemy, że reguły te mogą z początku wydawać się ograniczające i zagmatwane, ale są one niezbędne do prawidłowego funkcjonowania Hooków. +Stworzyliśmy [wtyczkę do lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks), która automatycznie wymusza te zasady. Rozumiemy, że reguły te mogą z początku wydawać się ograniczające i zagmatwane, ale są one niezbędne do prawidłowego funkcjonowania hooków. >Szczegółowe wyjaśnienie > ->Możesz dowiedzieć się więcej o tych zasadach w rozdziale pt. ["Zasady korzystania z Hooków"](/docs/hooks-rules.html). +>Możesz dowiedzieć się więcej o tych zasadach w rozdziale pt. [„Zasady korzystania z hooków”](/docs/hooks-rules.html). -## 💡 Tworzenie własnych Hooków {#building-your-own-hooks} +## 💡 Tworzenie własnych hooków {#building-your-own-hooks} -Czasami zdarza się, że chcemy ponownie wykorzystać pewną logikę związaną ze stanem pomiędzy komponentami. W tradycyjnym podejściu mieliśmy do dyspozycji dwa popularne rozwiązania tego problemu: [komponenty wyższego rzędu (ang. *higher-order components*)](/docs/higher-order-components.html) i [właściwości renderujące (ang. *render props*)](/docs/render-props.html). Własne Hooki rozwiązują ten problem, bez konieczności dodawania kolejnych komponentów do drzewa. +Czasami zdarza się, że chcemy ponownie wykorzystać pewną logikę związaną ze stanem pomiędzy komponentami. W tradycyjnym podejściu mieliśmy do dyspozycji dwa popularne rozwiązania tego problemu: [komponenty wyższego rzędu (ang. *higher-order components*)](/docs/higher-order-components.html) i [właściwości renderujące (ang. *render props*)](/docs/render-props.html). Własne hooki rozwiązują ten problem, bez konieczności dodawania kolejnych komponentów do drzewa. -W jednym z poprzednich podrozdziałów pokazaliśmy komponent `FriendStatus`, który wykorzystuje Hooki `useState` i `useEffect`, aby zasubskrybować się do informacji o dostępności znajomego. Załóżmy, że chcielibyśmy wykorzystać tę logikę w innym komponencie. +W jednym z poprzednich podrozdziałów pokazaliśmy komponent `FriendStatus`, który wykorzystuje hooki `useState` i `useEffect`, aby zasubskrybować się do informacji o dostępności znajomego. Załóżmy, że chcielibyśmy wykorzystać tę logikę w innym komponencie. -Na początek wydzielmy tę logikę do własnego Hooka o nazwie `useFriendStatus`: +Na początek wydzielmy tę logikę do własnego hooka o nazwie `useFriendStatus`: ```js{3} import React, { useState, useEffect } from 'react'; @@ -230,19 +229,19 @@ function FriendListItem(props) { } ``` -Stan obu tych komponentów jest w pełni niezależny. Hooki są metodą na współdzielenie *logiki związanej ze stanem*, nie zaś samego stanu. Tak naprawdę to każde *wywołanie* Hooka tworzy kompletnie wyizolowany stan -- możesz więc użyć tego samego, własnego Hooka kilkukrotnie w jednym komponencie. +Stan obu tych komponentów jest w pełni niezależny. Hooki są metodą na współdzielenie *logiki związanej ze stanem*, nie zaś samego stanu. Tak naprawdę to każde *wywołanie* hooka tworzy kompletnie wyizolowany stan -- możesz więc użyć tego samego, własnego hooka kilkukrotnie w jednym komponencie. -Własne Hooki są bardziej konwencją niż wbudowanym mechanizmem. Jeżeli nazwa funkcji zaczyna się od "`use`" i wywołuje ona inne Hooki, mówimy że mamy do czynienia z własnym Hookiem. Na tej konwencji nazewnictwa `useSomething` bazuje nasza wtyczka do lintera i pozwala jej to znaleźć błędy w kodzie korzystającym z Hooków. +Własne hooki są bardziej konwencją niż wbudowanym mechanizmem. Jeżeli nazwa funkcji zaczyna się od „`use`” i wywołuje ona inne hooki, mówimy że mamy do czynienia z własnym hookiem. Na tej konwencji nazewnictwa `useSomething` bazuje nasza wtyczka do lintera i pozwala jej to znaleźć błędy w kodzie korzystającym z hooków. -Możesz pisać własne Hooki, które obejmują szereg różnych przypadków - od obsługi animacji, deklaratywnych subskrypcji, liczników, po wiele innych, o których nie pomyśleliśmy. Nie możemy się doczekać, żeby zobaczyć, na jakie pomysły wykorzystania własnych Hooków wpadnie społeczność Reacta. +Możesz pisać własne hooki, które obejmują szereg różnych przypadków - od obsługi animacji, deklaratywnych subskrypcji, liczników, po wiele innych, o których nie pomyśleliśmy. Nie możemy się doczekać, żeby zobaczyć, na jakie pomysły wykorzystania własnych hooków wpadnie społeczność Reacta. >Szczegółowe wyjaśnienie > ->Możesz dowiedzieć się więcej o własnych Hookach w rozdziale pt. ["Budowanie własnych Hooków"](/docs/hooks-custom.html). +>Możesz dowiedzieć się więcej o własnych hookach w rozdziale pt. [„Tworzenie własnych hooków”](/docs/hooks-custom.html). -## 🔌 Inne Hooki {#other-hooks} +## 🔌 Inne hooki {#other-hooks} -Istnieje kilka mniej popularnych, wbudowanych Hooków, które mogą ci się spodobać. Na przykład [`useContext`](/docs/hooks-reference.html#usecontext) pozwala zasubskrybować się do zmian kontekstu (ang. *context*) bez wprowadzania zagnieżdżania: +Istnieje kilka mniej popularnych, wbudowanych hooków, które mogą ci się spodobać. Na przykład [`useContext`](/docs/hooks-reference.html#usecontext) pozwala zasubskrybować się do zmian kontekstu (ang. *context*) bez wprowadzania zagnieżdżania: ```js{2,3} function Example() { @@ -262,12 +261,12 @@ function Todos() { >Szczegółowe wyjaśnienie > ->Więcej informacji o wszystkich wbudowanych Hookach znajdziesz w rozdziale pt. ["Hooki - interfejs API"](/docs/hooks-reference.html). +>Więcej informacji o wszystkich wbudowanych hookach znajdziesz w rozdziale pt. [„Hooki - interfejs API”](/docs/hooks-reference.html). ## Kolejne kroki {#next-steps} -Uff, to był wyczerpująco szybki przegląd! Jeżeli coś z tego, co napisaliśmy, nie miało dla ciebie sensu lub jeśli chcesz po prostu dowiedzieć się więcej, możesz przeczytać kolejne rozdziały, zaczynając od ["Używanie hooka stanu"](/docs/hooks-state.html). +Uff, to był wyczerpująco szybki przegląd! Jeżeli coś z tego, co napisaliśmy, nie miało dla ciebie sensu lub jeśli chcesz po prostu dowiedzieć się więcej, możesz przeczytać kolejne rozdziały, zaczynając od [„Używanie hooka stanu”](/docs/hooks-state.html). -Możesz też zerknąć na rozdziały pt. ["Hooki - interfejs API"](/docs/hooks-reference.html) i ["Hooki - FAQ"](/docs/hooks-faq.html). +Możesz też zerknąć na rozdziały pt. [„Hooki - interfejs API”](/docs/hooks-reference.html) i [„Hooki - FAQ”](/docs/hooks-faq.html). -I na koniec: nie zapomnij o rozdziale pt. ["Wprowadzenie do Hooków"](/docs/hooks-intro.html), w którym wyjaśniliśmy, dlaczego dodaliśmy Hooki i jak zacząć z nich korzystać równolegle z istniejącym kodem -- bez przepisywania aplikacji. +I na koniec: nie zapomnij o rozdziale pt. [„Wprowadzenie do hooków”](/docs/hooks-intro.html), w którym wyjaśniliśmy, dlaczego dodaliśmy hooki i jak zacząć z nich korzystać równolegle z istniejącym kodem -- bez przepisywania aplikacji. diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index ca300d1e8..118d0afa9 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -14,7 +14,7 @@ W [poprzednim rozdziale](/docs/hooks-intro.html) przedstawiliśmy hooki następu import React, { useState } from 'react'; function Example() { - // Zadeklaruj nową zmienną stanu, którą nazwiemy "count" + // Zadeklaruj nową zmienną stanu, którą nazwiemy „count” const [count, setCount] = useState(0); return ( @@ -60,7 +60,7 @@ Stan inicjalizowany jest wartością `{ count: 0 }`, a następnie, kiedy użytko >Uwaga > ->Być może zastanawiasz się, dlaczego pokazujemy tutaj licznik zamiast bardziej "życiowego" przykładu. Pozwoli nam to skupić się na samym interfejsie API, póki stawiamy nasze pierwsze kroki z hookami. +>Być może zastanawiasz się, dlaczego pokazujemy tutaj licznik zamiast bardziej „życiowego” przykładu. Pozwoli nam to skupić się na samym interfejsie API, póki stawiamy nasze pierwsze kroki z hookami. ## Hooki i komponenty funkcyjne {#hooks-and-function-components} @@ -82,7 +82,7 @@ function Example(props) { } ``` -Być może spotkałeś się z nazwą "komponenty bezstanowe". Jako że właśnie przedstawiamy sposób na korzystanie ze stanu wewnątrz takich komponentów, wolimy nazywać je "komponentami funkcyjnymi". +Być może spotkałeś się z nazwą „komponenty bezstanowe”. Jako że właśnie przedstawiamy sposób na korzystanie ze stanu wewnątrz takich komponentów, wolimy nazywać je „komponentami funkcyjnymi”. Hooki **nie** działają w klasach. Ale możesz używać ich zamiast klas. @@ -98,13 +98,13 @@ function Example() { } ``` -**Czym jest hook?** Hook jest specjalną funkcją, która pozwala "zahaczyć się" w wewnętrzne mechanizmy Reacta. Na przykład `useState` jest hookiem, który pozwala korzystać ze stanu w komponencie funkcyjnym. W kolejnych rozdziałach poznamy inne hooki. +**Czym jest hook?** Hook jest specjalną funkcją, która pozwala „zahaczyć się” w wewnętrzne mechanizmy Reacta. Na przykład `useState` jest hookiem, który pozwala korzystać ze stanu w komponencie funkcyjnym. W kolejnych rozdziałach poznamy inne hooki. **Kiedy powinno się korzystać z hooków?** Jeśli po stworzeniu komponentu funkcyjnego zorientujesz się, że potrzebujesz przechować kilka wartości w stanie, dotychczas musiałeś zamienić taki komponent na klasę. Teraz możesz skorzystać z hooka z wewnątrz istniejącego komponentu funkcyjnego. Zobaczmy jak to działa! >Uwaga > ->Istnieje kilka specjalnych zasad, które mówią o tym kiedy możesz, a kiedy nie możesz używać hooków w komponencie. Więcej szczegółów poznamy w rozdziale pt. ["Zasady korzystania z hooków"](/docs/hooks-rules.html). +>Istnieje kilka specjalnych zasad, które mówią o tym kiedy możesz, a kiedy nie możesz używać hooków w komponencie. Więcej szczegółów poznamy w rozdziale pt. [„Zasady korzystania z hooków”](/docs/hooks-rules.html). ## Zadeklarowanie zmiennej stanu {#declaring-a-state-variable} @@ -126,11 +126,11 @@ W komponencie funkcyjnym nie mamy dostępu do `this`, więc nie możemy przypisy import React, { useState } from 'react'; function Example() { - // Zadeklaruj nową zmienną stanu, którą nazwiemy "count" + // Zadeklaruj nową zmienną stanu, którą nazwiemy „count” const [count, setCount] = useState(0); ``` -**Co w zasadzie robi wywołanie `useState`?** Deklaruje ono "zmienną stanu". Nasza zmienna nazywa się `count`, ale możemy nazwać ją, jak tylko chcemy, na przykład `banan`. Jest to sposób na "przechowanie" wartości pomiędzy wywołaniami funkcji -- `useState` jest nowym sposobem, na wykorzystanie dokładnie tych samych możliwości, jakie daje `this.state` w klasach. Zwykle zmienne "znikają" kiedy funkcja kończy działanie, ale zmienne stanu są przechowywane przez Reacta. +**Co w zasadzie robi wywołanie `useState`?** Deklaruje ono „zmienną stanu”. Nasza zmienna nazywa się `count`, ale możemy nazwać ją, jak tylko chcemy, na przykład `banan`. Jest to sposób na „przechowanie” wartości pomiędzy wywołaniami funkcji -- `useState` jest nowym sposobem, na wykorzystanie dokładnie tych samych możliwości, jakie daje `this.state` w klasach. Zwykle zmienne „znikają” kiedy funkcja kończy działanie, ale zmienne stanu są przechowywane przez Reacta. **Co przekazujemy do `useState` jako argumenty?** Jedynym argumentem, jaki przyjmuje hook `useState()` jest początkowa wartość stanu. W przeciwieństwie do klas stan nie musi być obiektem. Możemy przechowywać liczbę lub ciąg znaków, jeżeli to wszystko, czego potrzebujemy. W naszym przykładzie chcemy przechować jedynie wartość liczbową, ile razy użytkownik nacisnął przycisk. Dlatego też przekazujemy `0` jako stan początkowy naszej zmiennej. (Jeżeli chcielibyśmy przechować kolejną wartość w stanie, wywołalibyśmy `useState()` po raz drugi.) @@ -142,7 +142,7 @@ Teraz, kiedy wiemy już, co robi hook `useState`, nasz przykład powinien nabra import React, { useState } from 'react'; function Example() { - // Zadeklaruj nową zmienną stanu, którą nazwiemy "count" + // Zadeklaruj nową zmienną stanu, którą nazwiemy „count” const [count, setCount] = useState(0); ``` @@ -152,7 +152,7 @@ Deklarujemy zmienną stanu, którą nazwaliśmy `count` i ustawiamy jej wartoś > >Być może zastanawiasz się -- dlaczego funkcja `useState` (pol. *używaj stanu*) nie nazywa się `createState` (pol. *stwórz stan*)? > ->Nazwa "Create" (pol. *tworzyć*) nie byłaby zbyt trafna, ponieważ stan tworzony jest tylko wtedy, gdy komponent renderowany jest za pierwszym razem. Podczas kolejnych renderowań `useState` zwraca aktualny stan. Gdyby nie to, nie mogłoby być mowy o żadnym "stanie" (ang. *state*)! Istnieje też powód, dla którego nazwa hooka *zawsze* rozpoczyna się od `use`. Więcej na ten temat dowiemy się w rozdziale pt. ["Zasady korzystania z hooków"](/docs/hooks-rules.html). +>Nazwa „Create” (pol. *tworzyć*) nie byłaby zbyt trafna, ponieważ stan tworzony jest tylko wtedy, gdy komponent renderowany jest za pierwszym razem. Podczas kolejnych renderowań `useState` zwraca aktualny stan. Gdyby nie to, nie mogłoby być mowy o żadnym „stanie” (ang. *state*)! Istnieje też powód, dla którego nazwa hooka *zawsze* rozpoczyna się od `use`. Więcej na ten temat dowiemy się w rozdziale pt. [„Zasady korzystania z hooków”](/docs/hooks-rules.html). ## Odczytywanie wartości stanu {#reading-state} @@ -216,7 +216,7 @@ Teraz **podsumujmy linijka po linijce to, czego się nauczyliśmy** i sprawdźmy * **Linia 4:** Wewnątrz komponentu `Example`, poprzez wywołanie hooka `useState`, deklarujemy nową zmienną stanu. Wywołanie zwraca parę wartości, którym nadajemy nazwy. Naszą zmienną nazywamy `count` (pol. *licznik*), ponieważ przechowuje ona liczbę naciśnięć przycisku. Inicjalizujemy ją z domyślną wartością, poprzez przekazanie `0` jako jedynego argumentu do funkcji `useState`. Jako druga zwrócona jest funkcja, która pozwala aktualizować wartość `count`, więc nazwiemy ją `setCount` (pol. *ustawić licznik*). * **Linia 9:** Kiedy użytkownik naciska przycisk wywołujemy funkcję `setCount` z nową wartością. React wyrenderuje ponownie komponent `Example`, przekazując do niego nową wartość zmiennej `count`. -Z początku wszystkie te informacje mogą wydawać się trudne do "przetrawienia". Nie spiesz się! Jeżeli zgubisz się gdzieś czytając wyjaśnienie, spójrz na kod jeszcze raz i spróbuj go przeczytać ponownie od góry do dołu. Obiecujemy, kiedy spróbujesz "zapomnieć", jak działa stan w klasach i spojrzysz na kod świeżym okiem, nabierze to sensu. +Z początku wszystkie te informacje mogą wydawać się trudne do „przetrawienia”. Nie spiesz się! Jeżeli zgubisz się gdzieś czytając wyjaśnienie, spójrz na kod jeszcze raz i spróbuj go przeczytać ponownie od góry do dołu. Obiecujemy, kiedy spróbujesz „zapomnieć”, jak działa stan w klasach i spojrzysz na kod świeżym okiem, nabierze to sensu. ### Wskazówka: Co oznaczają nawiasy kwadratowe? {#tip-what-do-square-brackets-mean} @@ -244,7 +244,7 @@ Kiedy deklarujemy zmienną stanu, korzystając z funkcji `useState`, zwraca ona >Uwaga > ->Być może zastanawiasz się, skąd React wie, któremu konkretnie komponentowi odpowiada każde wywołanie `useState`, jeśli nie przekazujemy Reactowi obiektu `this` ani nic podobnego. Na [to pytanie](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) (i wiele innych) odpowiemy w rozdziale pt. "Hooki - FAQ". +>Być może zastanawiasz się, skąd React wie, któremu konkretnie komponentowi odpowiada każde wywołanie `useState`, jeśli nie przekazujemy Reactowi obiektu `this` ani nic podobnego. Na [to pytanie](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) (i wiele innych) odpowiemy w rozdziale pt. „Hooki - FAQ”. ### Wskazówka: Używanie kilku zmiennych stanu {#tip-using-multiple-state-variables} @@ -269,12 +269,12 @@ W powyższym komponencie, mamy lokalne zmienne `age`, `fruit` i `todos` i możem **Nie musisz** używać kilku zmiennych stanu. Zmienne stanu mogą równie dobrze przechowywać obiekty i tablice, więc wciąż możesz grupować powiązane dane. Jednakże, w przeciwieństwie do metody `this.setState` w klasie, aktualizowanie zmiennej stanu zawsze *nadpisuje* jej wartość, zamiast scalać stare i nowe wartości. -W rozdziale pt. ["Hooki - FAQ"](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables) wypisaliśmy zalecenia dotyczące podziału niezależnych zmiennych stanu. +W rozdziale pt. [„Hooki - FAQ”](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables) wypisaliśmy zalecenia dotyczące podziału niezależnych zmiennych stanu. ## Kolejne kroki {#next-steps} -Ten rozdział poświęciliśmy jednemu z hooków dostarczanych przez Reacta -- `useState`. Czasami będziemy też nazywać go "hookiem stanu". Pozwala on nam dodać lokalny stan do reactowych komponentów funkcyjnych, co zrobiliśmy po raz pierwszy w historii! +Ten rozdział poświęciliśmy jednemu z hooków dostarczanych przez Reacta -- `useState`. Czasami będziemy też nazywać go „hookiem stanu”. Pozwala on nam dodać lokalny stan do reactowych komponentów funkcyjnych, co zrobiliśmy po raz pierwszy w historii! -Dowiedzieliśmy się też troszeczkę o tym, czym w zasadzie są hooki. Hooki to funkcje, które pozwalają "zahaczyć się" w wewnętrzne mechanizmy Reacta z wewnątrz komponentów funkcyjnych. Ich nazwy muszą zaczynać się od `use` i istnieje szereg innych hooków, których jeszcze nie poznaliśmy. +Dowiedzieliśmy się też troszeczkę o tym, czym w zasadzie są hooki. Hooki to funkcje, które pozwalają „zahaczyć się” w wewnętrzne mechanizmy Reacta z wewnątrz komponentów funkcyjnych. Ich nazwy muszą zaczynać się od `use` i istnieje szereg innych hooków, których jeszcze nie poznaliśmy. -**Zapoznajmy się więc z [kolejnym hookiem: `useEffect`.](/docs/hooks-effect.html)** Pozwala on na przeprowadzanie "efektów ubocznych" (ang. *side effects*) w komponentach i jest podobony do metod cyklu życia w klasach. +**Zapoznajmy się więc z [kolejnym hookiem: `useEffect`.](/docs/hooks-effect.html)** Pozwala on na przeprowadzanie „efektów ubocznych” (ang. *side effects*) w komponentach i jest podobony do metod cyklu życia w klasach.