From 28f44a96ef913eb4190ffea5fe89c69836bda4e6 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Sun, 17 Mar 2019 20:10:12 +0100 Subject: [PATCH 1/4] Translate part of the document --- content/docs/hooks-rules.md | 68 ++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index dbac9cffd..a686ec5e1 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,38 +1,38 @@ --- id: hooks-rules -title: Rules of Hooks +title: Zasady korzystania z hooków permalink: docs/hooks-rules.html next: hooks-custom.html prev: hooks-effect.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hooki* są nowym dodatkiem w Reakcie 16.8. Pozwalają one używać stanu i innych funkcjonalności Reacta, bez użycia klas. -Hooks are JavaScript functions, but you need to follow two rules when using them. We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically: +Hooki są javascryptowymi funkcjami, ale musisz pamiętać o dwóch ważnych zasadach, kiedy z nich korzystasz. Stworzyliśmy [wtyczkę do lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks), która automatycznie wymusza stosowanie tych zasad: -### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level} +### Wywołuj hooki tylko z najwyższego poziomu kodu {#only-call-hooks-at-the-top-level} -**Don't call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState` and `useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).) +**Nie wywołuj Hooków z wewnątrz pętli, warunków czy zagnieżdżonych funkcji.** Korzystaj z hooków tylko z najwyższego poziomu kodu twoich komponentów funkcyjnych. Przestrzegając tej zasady zyskujesz pewność, że hooki zostaną wywołane w tej samej kolejności, za każdym razem gdy komponent jest renderowany. To właśnie pozwala Reactowi na właściwe przechowywanie stanu pomiędzy kolejnymi wywołaniami `useState` i `useEffect` (Jeśli jesteś ciekawy, dogłębnie wyjaśnimy to [w kolejnym podrozdziale](#explanation).) -### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions} +### Wywołuj Hooki tylko z wewnątrz reactowych komponentów funkcyjnych {#only-call-hooks-from-react-functions} -**Don't call Hooks from regular JavaScript functions.** Instead, you can: +**Nie wywołuj hooków z wewnątrz zwykłych javascriptowych funkcji.** Zamiast tego możesz: -* ✅ Call Hooks from React function components. -* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)). +* ✅ Wywołuj hooki z wewnątrz reactowych komponentów funkcyjnych. +* ✅ Wywołuj hooki z wewnątrz własnych hooków (więcej o nich dowiemy się [w następnym rozdziale](/docs/hooks-custom.html)). -By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. +Przestrzegając tej zasady, upewniasz się, że cała logika związana ze stanem komponentu jest wyraźnie widoczna w jego kodzie źródłowym. -## ESLint Plugin {#eslint-plugin} +## Wtyczka ESLint {#eslint-plugin} -We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) that enforces these two rules. You can add this plugin to your project if you'd like to try it: +Wydaliśmy wtyczkę do EsLint o nazwie [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), która wymusza stosowanie tych dwóch zasad. Jeśli chcesz ją wypróbować, możesz dodać ją do swojego projektu: ```bash npm install eslint-plugin-react-hooks ``` ```js -// Your ESLint configuration +// Twoja konfiguracja ESLint { "plugins": [ // ... @@ -40,34 +40,34 @@ npm install eslint-plugin-react-hooks ], "rules": { // ... - "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks - "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies + "react-hooks/rules-of-hooks": "error", // Sprawdza stosowanie zasad hooków + "react-hooks/exhaustive-deps": "warn" // Sprawdza zależności efektów } } ``` -In the future, we intend to include this plugin by default into Create React App and similar toolkits. +W przyszłości zamierzamy dołączyć te wtyczkę do Create React App i podobnych narzędzi. -**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html) now.** On this page, we'll continue by explaining the reasoning behind these rules. +**Możesz teraz przejść do następnego rozdziału, gdzie wyjaśniamy [jak pisać własne hooki](/docs/hooks-custom.html).** W tym rozdziale postaramy się uzasadnić, dlaczego narzucamy takie zasady. -## Explanation {#explanation} +## Wyjaśnienie {#explanation} -As we [learned earlier](/docs/hooks-state.html#tip-using-multiple-state-variables), we can use multiple State or Effect Hooks in a single component: +Jak [dowiedzieliśmy się wcześniej](/docs/hooks-state.html#tip-using-multiple-state-variables) możemy używać wielu hooków stanu i efektów w jednym komponencie: ```js function Form() { - // 1. Use the name state variable + // 1. Użyj zmiennej stanu do przechowania imienia const [name, setName] = useState('Mary'); - // 2. Use an effect for persisting the form + // 2. Użyj efektu, aby zapisać dane formularza useEffect(function persistForm() { localStorage.setItem('formData', name); }); - // 3. Use the surname state variable + // 3. Użyj zmiennej stanu do przechowania nazwiska const [surname, setSurname] = useState('Poppins'); - // 4. Use an effect for updating the title + // 4. Użyj efektu, aby zaktualizować tytuł strony useEffect(function updateTitle() { document.title = name + ' ' + surname; }); @@ -76,24 +76,24 @@ function Form() { } ``` -So how does React know which state corresponds to which `useState` call? The answer is that **React relies on the order in which Hooks are called**. Our example works because the order of the Hook calls is the same on every render: +Skąd zatem React wie, jaką wartość stanu zwrócić, przy kolejnych wywołaniach funkcji `useState`? Tajemnica tkwi w tym, że **React polega na kolejności, w jakiej hooki zostały wywołane.** Nasz przykład zadziała ponieważ kolejność wywoływania hooków jest taka sama przy każdym renderze: ```js // ------------ -// First render +// Pierwsze renderowanie // ------------ -useState('Mary') // 1. Initialize the name state variable with 'Mary' -useEffect(persistForm) // 2. Add an effect for persisting the form -useState('Poppins') // 3. Initialize the surname state variable with 'Poppins' -useEffect(updateTitle) // 4. Add an effect for updating the title +useState('Mary') // 1. Zaincializuj zmienną stanu imienia wartością „Mary” +useEffect(persistForm) // 2. Dodaj efekt odpowiedzialny za przechowywanie danych formularza +useState('Poppins') // 3. Zaincializuj zmienną stanu nazwiska wartością „Poppins” +useEffect(updateTitle) // 4. Dodaj efekt odpowiedzialny za aktualizację tytułu // ------------- -// Second render +// Drugie renderowanie // ------------- -useState('Mary') // 1. Read the name state variable (argument is ignored) -useEffect(persistForm) // 2. Replace the effect for persisting the form -useState('Poppins') // 3. Read the surname state variable (argument is ignored) -useEffect(updateTitle) // 4. Replace the effect for updating the title +useState('Mary') // 1. Odczytaj zmienną stanu przechowującą imię (argument został zignorowany) +useEffect(persistForm) // 2. Zastąp efekt odpowiedzialny za przechowywanie danych +useState('Poppins') // 3. Odczytaj zmienną stanu przechowującą nazwisko (argument został zignorowany) +useEffect(updateTitle) // 4. Zastąp efekt odpowiedzialny za aktualizację tytułu // ... ``` From 20a7e0f435f847d55422cf00d19cd76832a49f95 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Sun, 17 Mar 2019 20:54:29 +0100 Subject: [PATCH 2/4] Translate remaining sentences --- content/docs/hooks-rules.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index a686ec5e1..997fb8308 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -98,10 +98,10 @@ useEffect(updateTitle) // 4. Zastąp efekt odpowiedzialny za aktualizację t // ... ``` -As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. But what happens if we put a Hook call (for example, the `persistForm` effect) inside a condition? +Tak długo, jak kolejność wywoływania hooków pozostaje taka sama pomiędzy kolejnymi renderami, React może powiązać lokalny stan z każdym z nich. A co wydarzy się, jeśli umieścimy wywołanie hooka (na przykład efektu `persistForm`) wewnątrz instrukcji warunkowej? ```js - // 🔴 We're breaking the first rule by using a Hook in a condition + // 🔴 Łamiemy pierwszą zasadę, używając hooka wewnątrz instrukcji warunkowej if (name !== '') { useEffect(function persistForm() { localStorage.setItem('formData', name); @@ -109,30 +109,30 @@ As long as the order of the Hook calls is the same between renders, React can as } ``` -The `name !== ''` condition is `true` on the first render, so we run this Hook. However, on the next render the user might clear the form, making the condition `false`. Now that we skip this Hook during rendering, the order of the Hook calls becomes different: +Warunek `name !== ''` jest spełniony przy pierwszym renderze, więc uruchamiany jest ten hook. Jednakże przy kolejnym renderze użytkownik może wyczyścić wartości formularza, powodując, że warunek nie będzie spełniony. Teraz, w związku z tym, że pominęliśmy hook podczas renderowania, kolejność wywoływania hooków zostaje zachwiana: ```js -useState('Mary') // 1. Read the name state variable (argument is ignored) -// useEffect(persistForm) // 🔴 This Hook was skipped! -useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable -useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect +useState('Mary') // 1.Odczytaj zmienną stanu przechowującą imię (argument został zignorowany) +// useEffect(persistForm) // 🔴 Ten hook został pominięty! +useState('Poppins') // 🔴 2 (a był 3). Nie uda się odczytać zmiennej stanu +useEffect(updateTitle) // 🔴 3 (a był 4). Nie uda się zastąpić efektu ``` -React wouldn't know what to return for the second `useState` Hook call. React expected that the second Hook call in this component corresponds to the `persistForm` effect, just like during the previous render, but it doesn't anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs. +React nie wiedziałby co zwrócić, dla drugiego wywołania hooka `useState`. React spodziewał się, że drugie wywołanie hooka w tym komponencie, będzie odpowiadało wywołaniu efektu `persistForm`, tak jak podczas poprzedniego renderowania. Nie jest to już jednak prawdą. Od tej chwili każde kolejne wywołanie hooka, po tym, jak jeden został pominięty, również przesunęłoby się o jeden, prowadząc do błędów. -**This is why Hooks must be called on the top level of our components.** If we want to run an effect conditionally, we can put that condition *inside* our Hook: +**Dlatego właśnie hooki muszą być wywoływane z najwyższego poziomu kodu komponentów.** Jeśli chcesz, żeby efekt działał pod jakimś warunkiem, możesz umieścić ten warunek *wewnątrz* hooka: ```js useEffect(function persistForm() { - // 👍 We're not breaking the first rule anymore + // 👍 Tym razem nie łamiemy pierwszej zasady if (name !== '') { localStorage.setItem('formData', name); } }); ``` -**Note that you don't need to worry about this problem if you use the [provided lint rule](https://www.npmjs.com/package/eslint-plugin-react-hooks).** But now you also know *why* Hooks work this way, and which issues the rule is preventing. +**Zauważ że nie musisz się tym przejmować, jeśli użyjesz [dostarczonej przez nas reguły lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Teraz jednak wiesz także *dlaczego* hooki działają w ten sposób i jakim problemom zapobiega stosowanie tej reguły. -## Next Steps {#next-steps} +## Kolejne kroki {#next-steps} -Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components. +W końcu jesteśmy gotowi na to, aby nauczyć się [pisać własne hooki](/docs/hooks-custom.html)! Własne hooki pozwalają łączyć hooki dostarczone przez Reacta we własne abstrakcje i współdzielić logikę związaną ze stanem pomiędzy komponentami. From 1397d4e91fbf2b29e4eccfb82faea214a5c32837 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Mon, 18 Mar 2019 19:29:32 +0000 Subject: [PATCH 3/4] Apply suggestions from code review Co-Authored-By: g12i --- content/docs/hooks-rules.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 997fb8308..d5ff6a892 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -8,24 +8,24 @@ prev: hooks-effect.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ą javascryptowymi funkcjami, ale musisz pamiętać o dwóch ważnych zasadach, kiedy z nich korzystasz. Stworzyliśmy [wtyczkę do lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks), która automatycznie wymusza stosowanie tych zasad: +Hooki są javascriptowymi funkcjami, ale podczas korzystania z nich musisz pamiętać o dwóch ważnych zasadach. Stworzyliśmy [wtyczkę do lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks), która automatycznie wymusza stosowanie tych zasad: ### Wywołuj hooki tylko z najwyższego poziomu kodu {#only-call-hooks-at-the-top-level} -**Nie wywołuj Hooków z wewnątrz pętli, warunków czy zagnieżdżonych funkcji.** Korzystaj z hooków tylko z najwyższego poziomu kodu twoich komponentów funkcyjnych. Przestrzegając tej zasady zyskujesz pewność, że hooki zostaną wywołane w tej samej kolejności, za każdym razem gdy komponent jest renderowany. To właśnie pozwala Reactowi na właściwe przechowywanie stanu pomiędzy kolejnymi wywołaniami `useState` i `useEffect` (Jeśli jesteś ciekawy, dogłębnie wyjaśnimy to [w kolejnym podrozdziale](#explanation).) +**Nie wywołuj Hooków wewnątrz pętli, instrukcji warunkowych czy zagnieżdżonych funkcji.** Korzystaj z hooków tylko z najwyższego poziomu kodu twoich komponentów funkcyjnych. Przestrzegając tej zasady, zyskujesz pewność, że hooki zostaną wywołane w tej samej kolejności, za każdym razem gdy komponent jest renderowany. To właśnie pozwala Reactowi na właściwe przechowywanie stanu pomiędzy kolejnymi wywołaniami `useState` i `useEffect` (Jeśli ciekawi cię ten temat, dogłębnie wyjaśnimy go [w kolejnym podrozdziale](#explanation).) -### Wywołuj Hooki tylko z wewnątrz reactowych komponentów funkcyjnych {#only-call-hooks-from-react-functions} +### Wywołuj hooki tylko w komponentach funkcyjnych {#only-call-hooks-from-react-functions} -**Nie wywołuj hooków z wewnątrz zwykłych javascriptowych funkcji.** Zamiast tego możesz: +**Nie wywołuj hooków wewnątrz zwykłych javascriptowych funkcji.** Zamiast tego możesz: -* ✅ Wywołuj hooki z wewnątrz reactowych komponentów funkcyjnych. -* ✅ Wywołuj hooki z wewnątrz własnych hooków (więcej o nich dowiemy się [w następnym rozdziale](/docs/hooks-custom.html)). +* ✅ Wywoływać hooki wewnątrz reactowych komponentów funkcyjnych. +* ✅ Wywoływać hooki wewnątrz własnych hooków (więcej na ten temat dowiemy się [w następnym rozdziale](/docs/hooks-custom.html)). Przestrzegając tej zasady, upewniasz się, że cała logika związana ze stanem komponentu jest wyraźnie widoczna w jego kodzie źródłowym. -## Wtyczka ESLint {#eslint-plugin} +## Wtyczka dla ESLinta {#eslint-plugin} -Wydaliśmy wtyczkę do EsLint o nazwie [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), która wymusza stosowanie tych dwóch zasad. Jeśli chcesz ją wypróbować, możesz dodać ją do swojego projektu: +Wydaliśmy wtyczkę dla ESLinta o nazwie [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), która wymusza stosowanie tych dwóch zasad. Jeśli chcesz ją wypróbować, możesz dodać ją do swojego projektu w następujący sposób: ```bash npm install eslint-plugin-react-hooks @@ -48,11 +48,11 @@ npm install eslint-plugin-react-hooks W przyszłości zamierzamy dołączyć te wtyczkę do Create React App i podobnych narzędzi. -**Możesz teraz przejść do następnego rozdziału, gdzie wyjaśniamy [jak pisać własne hooki](/docs/hooks-custom.html).** W tym rozdziale postaramy się uzasadnić, dlaczego narzucamy takie zasady. +**Możesz teraz przejść do następnego rozdziału, gdzie wyjaśniamy, [jak pisać własne hooki](/docs/hooks-custom.html).** W tym rozdziale postaramy się uzasadnić, dlaczego narzucamy takie zasady. ## Wyjaśnienie {#explanation} -Jak [dowiedzieliśmy się wcześniej](/docs/hooks-state.html#tip-using-multiple-state-variables) możemy używać wielu hooków stanu i efektów w jednym komponencie: +Jak [dowiedzieliśmy się wcześniej](/docs/hooks-state.html#tip-using-multiple-state-variables), w ramach pojedynczego komponentu możemy używać wielu hooków stanu i efektów: ```js function Form() { @@ -76,15 +76,15 @@ function Form() { } ``` -Skąd zatem React wie, jaką wartość stanu zwrócić, przy kolejnych wywołaniach funkcji `useState`? Tajemnica tkwi w tym, że **React polega na kolejności, w jakiej hooki zostały wywołane.** Nasz przykład zadziała ponieważ kolejność wywoływania hooków jest taka sama przy każdym renderze: +Skąd zatem React wie, jaką wartość stanu zwrócić przy kolejnych wywołaniach funkcji `useState`? Tajemnica tkwi w tym, że **React polega na kolejności, w jakiej hooki są wywoływane.** Nasz przykład zadziała, ponieważ kolejność wywoływania hooków jest taka sama przy każdym renderowaniu: ```js // ------------ // Pierwsze renderowanie // ------------ -useState('Mary') // 1. Zaincializuj zmienną stanu imienia wartością „Mary” +useState('Mary') // 1. Zainicjalizuj zmienną stanu imienia wartością „Mary” useEffect(persistForm) // 2. Dodaj efekt odpowiedzialny za przechowywanie danych formularza -useState('Poppins') // 3. Zaincializuj zmienną stanu nazwiska wartością „Poppins” +useState('Poppins') // 3. Zainicjalizuj zmienną stanu nazwiska wartością „Poppins” useEffect(updateTitle) // 4. Dodaj efekt odpowiedzialny za aktualizację tytułu // ------------- @@ -98,7 +98,7 @@ useEffect(updateTitle) // 4. Zastąp efekt odpowiedzialny za aktualizację t // ... ``` -Tak długo, jak kolejność wywoływania hooków pozostaje taka sama pomiędzy kolejnymi renderami, React może powiązać lokalny stan z każdym z nich. A co wydarzy się, jeśli umieścimy wywołanie hooka (na przykład efektu `persistForm`) wewnątrz instrukcji warunkowej? +Tak długo, jak kolejność wywoływania hooków pozostaje taka sama pomiędzy kolejnymi renderowaniami, React może powiązać lokalny stan z każdym z nich. A co wydarzy się, jeśli umieścimy wywołanie hooka (na przykład efektu `persistForm`) wewnątrz instrukcji warunkowej? ```js // 🔴 Łamiemy pierwszą zasadę, używając hooka wewnątrz instrukcji warunkowej @@ -118,7 +118,7 @@ useState('Poppins') // 🔴 2 (a był 3). Nie uda się odczytać zmiennej useEffect(updateTitle) // 🔴 3 (a był 4). Nie uda się zastąpić efektu ``` -React nie wiedziałby co zwrócić, dla drugiego wywołania hooka `useState`. React spodziewał się, że drugie wywołanie hooka w tym komponencie, będzie odpowiadało wywołaniu efektu `persistForm`, tak jak podczas poprzedniego renderowania. Nie jest to już jednak prawdą. Od tej chwili każde kolejne wywołanie hooka, po tym, jak jeden został pominięty, również przesunęłoby się o jeden, prowadząc do błędów. +React nie wiedziałby, co zwrócić dla drugiego wywołania hooka `useState`. React spodziewał się, że drugie wywołanie hooka w tym komponencie będzie odpowiadało wywołaniu efektu `persistForm`, tak jak podczas poprzedniego renderowania. Nie jest to już jednak prawdą. Od tej chwili każde kolejne wywołanie hooka, po tym, jak jeden został pominięty, również przesunęłoby się o jeden, prowadząc do błędów. **Dlatego właśnie hooki muszą być wywoływane z najwyższego poziomu kodu komponentów.** Jeśli chcesz, żeby efekt działał pod jakimś warunkiem, możesz umieścić ten warunek *wewnątrz* hooka: @@ -131,7 +131,7 @@ React nie wiedziałby co zwrócić, dla drugiego wywołania hooka `useState`. Re }); ``` -**Zauważ że nie musisz się tym przejmować, jeśli użyjesz [dostarczonej przez nas reguły lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Teraz jednak wiesz także *dlaczego* hooki działają w ten sposób i jakim problemom zapobiega stosowanie tej reguły. +**Zauważ, że nie musisz o tym pamiętać, jeśli użyjesz [dostarczonej przez nas reguły lintera](https://www.npmjs.com/package/eslint-plugin-react-hooks).** Teraz jednak wiesz także, *dlaczego* hooki działają w ten sposób i jakim problemom zapobiega stosowanie tej reguły. ## Kolejne kroki {#next-steps} From 11190b04d74ad1f0b90d2973ecd81fa22ad267e2 Mon Sep 17 00:00:00 2001 From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com> Date: Tue, 19 Mar 2019 14:56:55 +0400 Subject: [PATCH 4/4] Update content/docs/hooks-rules.md Co-Authored-By: cvqprs --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index d5ff6a892..32c7de57d 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -12,7 +12,7 @@ Hooki są javascriptowymi funkcjami, ale podczas korzystania z nich musisz pami ### Wywołuj hooki tylko z najwyższego poziomu kodu {#only-call-hooks-at-the-top-level} -**Nie wywołuj Hooków wewnątrz pętli, instrukcji warunkowych czy zagnieżdżonych funkcji.** Korzystaj z hooków tylko z najwyższego poziomu kodu twoich komponentów funkcyjnych. Przestrzegając tej zasady, zyskujesz pewność, że hooki zostaną wywołane w tej samej kolejności, za każdym razem gdy komponent jest renderowany. To właśnie pozwala Reactowi na właściwe przechowywanie stanu pomiędzy kolejnymi wywołaniami `useState` i `useEffect` (Jeśli ciekawi cię ten temat, dogłębnie wyjaśnimy go [w kolejnym podrozdziale](#explanation).) +**Nie wywołuj hooków wewnątrz pętli, instrukcji warunkowych czy zagnieżdżonych funkcji.** Korzystaj z hooków tylko z najwyższego poziomu kodu twoich komponentów funkcyjnych. Przestrzegając tej zasady, zyskujesz pewność, że hooki zostaną wywołane w tej samej kolejności, za każdym razem gdy komponent jest renderowany. To właśnie pozwala Reactowi na właściwe przechowywanie stanu pomiędzy kolejnymi wywołaniami `useState` i `useEffect` (Jeśli ciekawi cię ten temat, dogłębnie wyjaśnimy go [w kolejnym podrozdziale](#explanation).) ### Wywołuj hooki tylko w komponentach funkcyjnych {#only-call-hooks-from-react-functions}