From eef117d01572ca3d2f58a355c9ba71c61ea65cf2 Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Fri, 8 Feb 2019 13:21:32 -0300 Subject: [PATCH 01/42] Hooks / Rules of Hooks --- content/docs/hooks-rules.md | 127 ++++++++++++++++++------------------ 1 file changed, 65 insertions(+), 62 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 698d1c741..3a987670d 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,38 +1,40 @@ --- -id: hooks-rules -title: Rules of Hooks -permalink: docs/hooks-rules.html -next: hooks-custom.html -prev: hooks-effect.html +id: regras-dos-hooks +title: Regras dos Hooks +permalink: docs/pt-BR/regras-dos-hooks.html +next: hooks-customizados.html +prev: hooks-feitos.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +*Hooks* é um novo recurso adicionado em React 16.8. Eles permitem que você use o `state` e outras funcionalidades do React, sem precisar escrever uma classe. -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: +Hooks são funções Javascript, mas você precisa se preocupar em seguir duas regras quando for usar-los. Nós também providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar as regras automaticamente: -### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level} +### Use Hooks apenas em nível superior -**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).) +**Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Invés disso, sempre use Hooks no nível superior de sua função React. Por seguir as regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados vários `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) -### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions} +### Use Hooks apenas em funções React {#only-call-hooks-from-react-functions} -**Don't call Hooks from regular JavaScript functions.** Instead, you can: +**Não use Hooks em funções javascript regulares.** Invés disso, você pode: -* ✅ Call Hooks from React function components. -* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)). +* ✅ Chamar Hooks em componentes React. +* ✅ Chamar Hooks dentro de Hooks Customizados (Nós iremos aprender sobre eles [na próxima página.](/docs/hooks-customizados.html)). -By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. +Por seguir essas regras, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. -## ESLint Plugin {#eslint-plugin} +## 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: +Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica as duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: ```bash -npm install eslint-plugin-react-hooks +npm install eslint-plugin-react-hooks@next ``` + ```js -// Your ESLint configuration +// Sua Configuração ESLint + { "plugins": [ // ... @@ -45,93 +47,94 @@ npm install eslint-plugin-react-hooks } ``` -In the future, we intend to include this plugin by default into Create React App and similar toolkits. +No futuro, temos a intenção de incluir esse plugin por padrão dentro do Create React App e ferramentas similares. -**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. +**Você pode pular para próxima página, onde explica melhor como escrever [seus próprios Hooks](/docs/hooks-custom.html) agora.**. Nessa página, nós continuaremos explicando o motivo por trás dessas regras. -## Explanation {#explanation} +## Explicação {#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: +Assim como [aprendemos anteriormente](/docs/hooks-state.html#tip-using-multiple-state-variables), nós podemos usar muitos States ou Effects em um único componente: ```js function Form() { - // 1. Use the name state variable - const [name, setName] = useState('Mary'); + // 1. Use o nome da variável de estado + const [name, setName] = useState('Mary'). - // 2. Use an effect for persisting the form + // 2. Use um efeito para persistir o formulário useEffect(function persistForm() { localStorage.setItem('formData', name); }); - // 3. Use the surname state variable + // 3. Use um sobrenome como variável de estado const [surname, setSurname] = useState('Poppins'); - // 4. Use an effect for updating the title + // 4. Use um efeito para atualizar o título useEffect(function updateTitle() { document.title = name + ' ' + surname; }); - // ... + // .... } ``` -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: +Agora, como o React sabe qual o estado correspondente ao `useState` chamado? A resposta é que para o **React** depende da ordem em que os Hooks sãos chamados. Nosso exemplo funciona porque a ordem do Hook chamado é a mesma sempre que o componente é renderizado: ```js // ------------ -// First render +// Primeiro render // ------------ -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. Inicializa o variável de nome com 'Mary' +useEffect(persistForm) // 2. Adiciona um efeito para persistir o formulário +useState('Poppins') // 3. Inicializa a variável sobrenome com 'Poppins' +useEffect(updateTitle) // 4. Adiciona um efeito para atualizar o título // ------------- -// Second render +// Segundo render // ------------- -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. Ler o nome da variável (argumento ignorado) +useEffect(persistForm) // 2. Substitui o efeito para persistir no formulário +useState('Poppins') // 3. Ler a variável sobrenome (argumento ignorado) +useEffect(updateTitle) // 4. Substitui o efeito que atualiza o título // ... ``` -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? +Enquanto a ordem dos Hooks chamados é a mesma entre as renderizações, React pode associar um `state` local a cada um deles. Mas o que acontece se colocarmos uma chamada de Hook (por exemplo, o efeito `persistForm`) dentro de uma condição? ```js - // 🔴 We're breaking the first rule by using a Hook in a condition - if (name !== '') { - useEffect(function persistForm() { - localStorage.setItem('formData', name); - }); - } +// 🔴 Nós estaremos quebrando a primeira regra por usar um Hook dentro de uma condição + +if (name !== '') { + useEffect(function persistForm() { + localStorage.setItem('formData', name); + }); +} ``` -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: +A condição `name !== ''` é `true` na primeira renderização, então chamamos o Hook dentro da condição. Entretanto, na próxima renderização o usuário pode limpar o formulário, fazendo com que a condição seja `false`. Agora que pulamos este Hook durante a primeira renderização, a ordem das chamadas tornou-se diferente, veja: ```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. Lê a variável name (argumento é ignorado) +// useEffect(persistForm) // 🔴 Agora, este Hook foi ignorado! +useState('Poppins') // 🔴 Na ordem era pra ser 2 (mas foi 3). Falha ao ler a variável sobrenome +useEffect(updateTitle) // 🔴 Na ordem era pra ser 3 (mas foi 4). Falha ao substituir o efeito ``` -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 não saberia o que retornar na segunda renderização na chamada do Hook `useState`. React esperava que a segunda chamada de Hook nesse componente corresponde-se ao efeito `persistForm`, assim como aconteceu na renderização anterior, mas a ordem foi alterada. Nesse ponto, toda vez que um Hook for chamado depois daquele que nós pulamos, o próximo também se deslocaria, levando a erros. -**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: +**É por isso que os Hooks devem ser chamados no nível superior de nosso componente.** Se nós queremos executar um efeito condicional, nós podemos colocar a condição _**dentro**_ de nosso Hook: ```js - useEffect(function persistForm() { - // 👍 We're not breaking the first rule anymore - if (name !== '') { - localStorage.setItem('formData', name); - } - }); +useEffect(function persistForm() { + // 👍 Legal! Agora não quebramos mais a primeira regra. + 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. +**Note que você não precisa se preocupar com esse problema, se você usar a [regra fornecida no plugin do ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks)**. Mas agora você também sabe *porque* Hooks funcionam dessa maneira, e quais os problemas que essas regras previnem. -## Next Steps {#next-steps} +## Próximos passos {#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. +Finalmente, estamos prontos para aprender sobre como [escrever nossos próprios Hooks](/docs/hooks-custom.html)! Hooks Customizados deixam você combinar Hooks fornecidos pelo React junto suas próprias abstrações, e reusar a lógica do `state` entre diferentes componentes. \ No newline at end of file From 2dda164d3d1891a3bea7ef6a06115e966c551854 Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Fri, 8 Feb 2019 14:14:36 -0300 Subject: [PATCH 02/42] =?UTF-8?q?fix=20portugues=20erro=20on=20the=20Inv?= =?UTF-8?q?=C3=A9s=20to=20Em=20vez?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-rules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 3a987670d..bd2219ba8 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -12,11 +12,11 @@ Hooks são funções Javascript, mas você precisa se preocupar em seguir duas r ### Use Hooks apenas em nível superior -**Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Invés disso, sempre use Hooks no nível superior de sua função React. Por seguir as regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados vários `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) +**Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Por seguir as regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados vários `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) ### Use Hooks apenas em funções React {#only-call-hooks-from-react-functions} -**Não use Hooks em funções javascript regulares.** Invés disso, você pode: +**Não use Hooks em funções javascript regulares.** Em vez disso, você pode: * ✅ Chamar Hooks em componentes React. * ✅ Chamar Hooks dentro de Hooks Customizados (Nós iremos aprender sobre eles [na próxima página.](/docs/hooks-customizados.html)). From 7436926727ad2509e3951bc8f8afa591cf3920c2 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:56:01 -0300 Subject: [PATCH 03/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- content/docs/hooks-rules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index bd2219ba8..aab31c15f 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,5 +1,5 @@ --- -id: regras-dos-hooks +id: hook-rules title: Regras dos Hooks permalink: docs/pt-BR/regras-dos-hooks.html next: hooks-customizados.html @@ -137,4 +137,4 @@ useEffect(function persistForm() { ## Próximos passos {#next-steps} -Finalmente, estamos prontos para aprender sobre como [escrever nossos próprios Hooks](/docs/hooks-custom.html)! Hooks Customizados deixam você combinar Hooks fornecidos pelo React junto suas próprias abstrações, e reusar a lógica do `state` entre diferentes componentes. \ No newline at end of file +Finalmente, estamos prontos para aprender sobre como [escrever nossos próprios Hooks](/docs/hooks-custom.html)! Hooks Customizados deixam você combinar Hooks fornecidos pelo React junto suas próprias abstrações, e reusar a lógica do `state` entre diferentes componentes. From 7363d85aab05ace00e5b5f8e8fc505c68653812d Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:56:09 -0300 Subject: [PATCH 04/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 aab31c15f..a7c7bfd25 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,7 +1,7 @@ --- id: hook-rules title: Regras dos Hooks -permalink: docs/pt-BR/regras-dos-hooks.html +permalink: docs/hooks-rules.html next: hooks-customizados.html prev: hooks-feitos.html --- From 70a8b9314487d193b4be6b40926d53679ff5dd61 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:56:15 -0300 Subject: [PATCH 05/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 a7c7bfd25..52d12e999 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -2,7 +2,7 @@ id: hook-rules title: Regras dos Hooks permalink: docs/hooks-rules.html -next: hooks-customizados.html +next: hooks-custom.html prev: hooks-feitos.html --- From 11af484f1673b4873daf7ca592dd4caad8af45e3 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:56:21 -0300 Subject: [PATCH 06/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 52d12e999..4e94e78d5 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -3,7 +3,7 @@ id: hook-rules title: Regras dos Hooks permalink: docs/hooks-rules.html next: hooks-custom.html -prev: hooks-feitos.html +prev: hooks-effect.html --- *Hooks* é um novo recurso adicionado em React 16.8. Eles permitem que você use o `state` e outras funcionalidades do React, sem precisar escrever uma classe. From c78388d57f76dc681bf185ea1174e18fb6c40154 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:56:33 -0300 Subject: [PATCH 07/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 4e94e78d5..5cd72c639 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -6,7 +6,7 @@ next: hooks-custom.html prev: hooks-effect.html --- -*Hooks* é um novo recurso adicionado em React 16.8. Eles permitem que você use o `state` e outras funcionalidades do React, sem precisar escrever uma classe. +*Hooks* é um novo recurso adicionado no React 16.8. Eles permitem que você use o estado (`state`) e outras funcionalidades do React, sem precisar escrever uma classe. Hooks são funções Javascript, mas você precisa se preocupar em seguir duas regras quando for usar-los. Nós também providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar as regras automaticamente: From 1a4fcd75ba4ed7de481169c2b716e2d05fa781cd Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:56:56 -0300 Subject: [PATCH 08/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 5cd72c639..2cdcd0d96 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -114,7 +114,7 @@ if (name !== '') { A condição `name !== ''` é `true` na primeira renderização, então chamamos o Hook dentro da condição. Entretanto, na próxima renderização o usuário pode limpar o formulário, fazendo com que a condição seja `false`. Agora que pulamos este Hook durante a primeira renderização, a ordem das chamadas tornou-se diferente, veja: ```js -useState('Mary') // ✅ 1. Lê a variável name (argumento é ignorado) +useState('Mary') // ✅ 1. Lê a variável de estado (state) name (argumento é ignorado) // useEffect(persistForm) // 🔴 Agora, este Hook foi ignorado! useState('Poppins') // 🔴 Na ordem era pra ser 2 (mas foi 3). Falha ao ler a variável sobrenome useEffect(updateTitle) // 🔴 Na ordem era pra ser 3 (mas foi 4). Falha ao substituir o efeito From 63154068f8ce8687899210aa25f060732799e884 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:57:33 -0300 Subject: [PATCH 09/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 2cdcd0d96..c53c5327e 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -116,7 +116,7 @@ A condição `name !== ''` é `true` na primeira renderização, então chamamos ```js useState('Mary') // ✅ 1. Lê a variável de estado (state) name (argumento é ignorado) // useEffect(persistForm) // 🔴 Agora, este Hook foi ignorado! -useState('Poppins') // 🔴 Na ordem era pra ser 2 (mas foi 3). Falha ao ler a variável sobrenome +useState('Poppins') // 🔴 Na ordem era pra ser 2 (mas foi 3). Falha ao ler a variável de estado (state) surname useEffect(updateTitle) // 🔴 Na ordem era pra ser 3 (mas foi 4). Falha ao substituir o efeito ``` From 471325b2c52a2e0fd9418c451bd0cf27749d5221 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:58:40 -0300 Subject: [PATCH 10/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 c53c5327e..00f0587e7 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -120,7 +120,7 @@ useState('Poppins') // 🔴 Na ordem era pra ser 2 (mas foi 3). Falha ao useEffect(updateTitle) // 🔴 Na ordem era pra ser 3 (mas foi 4). Falha ao substituir o efeito ``` -React não saberia o que retornar na segunda renderização na chamada do Hook `useState`. React esperava que a segunda chamada de Hook nesse componente corresponde-se ao efeito `persistForm`, assim como aconteceu na renderização anterior, mas a ordem foi alterada. Nesse ponto, toda vez que um Hook for chamado depois daquele que nós pulamos, o próximo também se deslocaria, levando a erros. +O React não saberia o que retornar na segunda chamada do Hook `useState`. O React esperava que a segunda chamada de Hook nesse componente fosse ao efeito `persistForm`, assim como aconteceu na renderização anterior, mas a ordem foi alterada. A partir daí, toda vez que um Hook for chamado depois daquele que nós pulamos, o próximo também se deslocaria, levando a erros. **É por isso que os Hooks devem ser chamados no nível superior de nosso componente.** Se nós queremos executar um efeito condicional, nós podemos colocar a condição _**dentro**_ de nosso Hook: From 85e9e61a4e460221b9723060d43354f94e54613d Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 14:58:57 -0300 Subject: [PATCH 11/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 00f0587e7..b78821b87 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -133,7 +133,7 @@ useEffect(function persistForm() { }); ``` -**Note que você não precisa se preocupar com esse problema, se você usar a [regra fornecida no plugin do ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks)**. Mas agora você também sabe *porque* Hooks funcionam dessa maneira, e quais os problemas que essas regras previnem. +**Note que você não precisa se preocupar com esse problema, se você usar a [regra fornecida no plugin do ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks)**. Mas agora você também sabe o *porquê* os Hooks funcionam dessa maneira, e quais os problemas que essas regras previnem. ## Próximos passos {#next-steps} From d7ad5adcc4ef6261580652862eef61dee3bef6d8 Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Fri, 8 Feb 2019 15:02:11 -0300 Subject: [PATCH 12/42] repaired gramatical errors --- 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 b78821b87..fbd595156 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -137,4 +137,4 @@ useEffect(function persistForm() { ## Próximos passos {#next-steps} -Finalmente, estamos prontos para aprender sobre como [escrever nossos próprios Hooks](/docs/hooks-custom.html)! Hooks Customizados deixam você combinar Hooks fornecidos pelo React junto suas próprias abstrações, e reusar a lógica do `state` entre diferentes componentes. +Finalmente, estamos prontos para aprender sobre como [escrever nossos próprios Hooks](/docs/hooks-custom.html)! Hooks Customizados permitem você combinar Hooks fornecidos pelo React em suas próprias abstrações, e reusar a lógica do `state` entre diferentes componentes. From 543497cde89099d41a5b5f53819b863cae19af9b Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:04:22 -0300 Subject: [PATCH 13/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 fbd595156..444621e54 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -8,7 +8,7 @@ prev: hooks-effect.html *Hooks* é um novo recurso adicionado no React 16.8. Eles permitem que você use o estado (`state`) e outras funcionalidades do React, sem precisar escrever uma classe. -Hooks são funções Javascript, mas você precisa se preocupar em seguir duas regras quando for usar-los. Nós também providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar as regras automaticamente: +Hooks são funções Javascript, mas você precisa seguir duas regras ao utilizá-los. Nós providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar essas regras automaticamente: ### Use Hooks apenas em nível superior From 4edef21e4b073a9466a8bccc3a0df482be261b4f Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Fri, 8 Feb 2019 15:05:00 -0300 Subject: [PATCH 14/42] added link documentation top level --- 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 fbd595156..01d4d3b83 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -10,7 +10,7 @@ prev: hooks-effect.html Hooks são funções Javascript, mas você precisa se preocupar em seguir duas regras quando for usar-los. Nós também providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar as regras automaticamente: -### Use Hooks apenas em nível superior +### Use Hooks apenas em nível superior {#only-call-hooks-at-the-top-level} **Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Por seguir as regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados vários `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) From 388b41a6b0ca145441c4785ff2e515cf318a93eb Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:05:38 -0300 Subject: [PATCH 15/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 5a465de12..d6dad51e1 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -14,7 +14,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz **Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Por seguir as regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados vários `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) -### Use Hooks apenas em funções React {#only-call-hooks-from-react-functions} +### Use Hooks apenas dentro de funções do React {#only-call-hooks-from-react-functions} **Não use Hooks em funções javascript regulares.** Em vez disso, você pode: From dd2560296d245ecdc9c4960a2b4f3c13fdcbe05c Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:05:52 -0300 Subject: [PATCH 16/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 d6dad51e1..42b5e33eb 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -19,7 +19,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz **Não use Hooks em funções javascript regulares.** Em vez disso, você pode: * ✅ Chamar Hooks em componentes React. -* ✅ Chamar Hooks dentro de Hooks Customizados (Nós iremos aprender sobre eles [na próxima página.](/docs/hooks-customizados.html)). +* ✅ Chamar Hooks dentro de Hooks Customizados (Nós iremos aprender sobre eles [na próxima página.](/docs/hooks-custom.html)). Por seguir essas regras, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. From 65405683cc5e8f47b8eda9ad907f98abbf31bdf6 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:06:02 -0300 Subject: [PATCH 17/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 42b5e33eb..e45589f70 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -21,7 +21,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz * ✅ Chamar Hooks em componentes React. * ✅ Chamar Hooks dentro de Hooks Customizados (Nós iremos aprender sobre eles [na próxima página.](/docs/hooks-custom.html)). -Por seguir essas regras, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. +Seguindo essas regra, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. ## ESLint Plugin From 0b2f09c022e8db217c3587adf0ca69f7c7177020 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:06:14 -0300 Subject: [PATCH 18/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 e45589f70..11f273a0a 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -23,7 +23,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz Seguindo essas regra, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. -## ESLint Plugin +## ESLint Plugin {#eslint-plugin} Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica as duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: From 0b9146e67847efcb6d84a3533788c25ec91b3a5c Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:06:28 -0300 Subject: [PATCH 19/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 11f273a0a..6c5d5f17e 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -25,7 +25,7 @@ Seguindo essas regra, você garante que toda lógica de estado (`state`) no comp ## ESLint Plugin {#eslint-plugin} -Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica as duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: +Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica essas duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: ```bash npm install eslint-plugin-react-hooks@next From 13be13e1ca2c5d44f06bf69ca8738dc63be4108e Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:07:04 -0300 Subject: [PATCH 20/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 6c5d5f17e..d054a7136 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -28,7 +28,7 @@ Seguindo essas regra, você garante que toda lógica de estado (`state`) no comp Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica essas duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: ```bash -npm install eslint-plugin-react-hooks@next +npm install eslint-plugin-react-hooks ``` From 0e539f58a58a51639a5f7f906d26e2f15e7ae394 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:07:18 -0300 Subject: [PATCH 21/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- content/docs/hooks-rules.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index d054a7136..fe7313590 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -30,7 +30,6 @@ Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://ww ```bash npm install eslint-plugin-react-hooks ``` - ```js // Sua Configuração ESLint From 23ec929313f769cb1c2272166929a968c44b8739 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:07:27 -0300 Subject: [PATCH 22/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 fe7313590..dda9a87a5 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -48,7 +48,7 @@ npm install eslint-plugin-react-hooks No futuro, temos a intenção de incluir esse plugin por padrão dentro do Create React App e ferramentas similares. -**Você pode pular para próxima página, onde explica melhor como escrever [seus próprios Hooks](/docs/hooks-custom.html) agora.**. Nessa página, nós continuaremos explicando o motivo por trás dessas regras. +**Você pode pular para próxima página, onde explica melhor como escrever [seus próprios Hooks](/docs/hooks-custom.html) agora.**. Nessa página continuaremos explicando o motivo por trás dessas regras. ## Explicação {#explanation} From e966ab1c2fd8de9d0c447728e445cce3f1a95032 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:07:36 -0300 Subject: [PATCH 23/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 dda9a87a5..4e0a653bd 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -56,7 +56,7 @@ Assim como [aprendemos anteriormente](/docs/hooks-state.html#tip-using-multiple- ```js function Form() { - // 1. Use o nome da variável de estado + // 1. Use a variável de estado (state) name const [name, setName] = useState('Mary'). // 2. Use um efeito para persistir o formulário From ae3fe45892bc5bd878b827af51d814c0dbcf7fbd Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:07:44 -0300 Subject: [PATCH 24/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 4e0a653bd..831eab307 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -57,7 +57,7 @@ Assim como [aprendemos anteriormente](/docs/hooks-state.html#tip-using-multiple- ```js function Form() { // 1. Use a variável de estado (state) name - const [name, setName] = useState('Mary'). + const [name, setName] = useState('Mary'); // 2. Use um efeito para persistir o formulário useEffect(function persistForm() { From 472602a039a7624551a9bbccca31c17b6fa8938f Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:08:27 -0300 Subject: [PATCH 25/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 831eab307..c50c54f91 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -76,7 +76,7 @@ function Form() { } ``` -Agora, como o React sabe qual o estado correspondente ao `useState` chamado? A resposta é que para o **React** depende da ordem em que os Hooks sãos chamados. Nosso exemplo funciona porque a ordem do Hook chamado é a mesma sempre que o componente é renderizado: +Agora, como o React sabe qual o estado (`state`) correspondente ao `useState` chamado? A resposta é que o **React depende da ordem em que os Hooks são chamados.** Nosso exemplo funciona porque a ordem de chamada dos Hooks é a mesma sempre que o componente é renderizado: ```js // ------------ From 32bac447d0bdd9c873f0e64179c5b17a7248009c Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:08:46 -0300 Subject: [PATCH 26/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 c50c54f91..d7ea29cd6 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -52,7 +52,7 @@ No futuro, temos a intenção de incluir esse plugin por padrão dentro do Creat ## Explicação {#explanation} -Assim como [aprendemos anteriormente](/docs/hooks-state.html#tip-using-multiple-state-variables), nós podemos usar muitos States ou Effects em um único componente: +Assim como [aprendemos anteriormente](/docs/hooks-state.html#tip-using-multiple-state-variables), nós podemos usar diversos Hooks (States ou Effects) em um único componente: ```js function Form() { From 30689ee345c4af4af1b7b3a34cde6ee17a5a42d4 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:08:55 -0300 Subject: [PATCH 27/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 d7ea29cd6..466ccd818 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -64,7 +64,7 @@ function Form() { localStorage.setItem('formData', name); }); - // 3. Use um sobrenome como variável de estado + // 3. Use a variável de estado (state) surname const [surname, setSurname] = useState('Poppins'); // 4. Use um efeito para atualizar o título From 6e5808f48e7abda8bcfdbff2f09c7afb09db10a3 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:03 -0300 Subject: [PATCH 28/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 466ccd818..81944ba6a 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -80,7 +80,7 @@ Agora, como o React sabe qual o estado (`state`) correspondente ao `useState` ch ```js // ------------ -// Primeiro render +// Primeira renderização // ------------ useState('Mary') // 1. Inicializa o variável de nome com 'Mary' useEffect(persistForm) // 2. Adiciona um efeito para persistir o formulário From 6b1c206b6ccac89f35f4410a4d992daf5d2495f7 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:10 -0300 Subject: [PATCH 29/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 81944ba6a..cc0fc7391 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -82,7 +82,7 @@ Agora, como o React sabe qual o estado (`state`) correspondente ao `useState` ch // ------------ // Primeira renderização // ------------ -useState('Mary') // 1. Inicializa o variável de nome com 'Mary' +useState('Mary') // 1. Inicializa a variável de estado (state) name com 'Mary' useEffect(persistForm) // 2. Adiciona um efeito para persistir o formulário useState('Poppins') // 3. Inicializa a variável sobrenome com 'Poppins' useEffect(updateTitle) // 4. Adiciona um efeito para atualizar o título From e78af345af31c867ebb970a5295838d7e2029800 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:17 -0300 Subject: [PATCH 30/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 cc0fc7391..65e95cdb0 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -84,7 +84,7 @@ Agora, como o React sabe qual o estado (`state`) correspondente ao `useState` ch // ------------ useState('Mary') // 1. Inicializa a variável de estado (state) name com 'Mary' useEffect(persistForm) // 2. Adiciona um efeito para persistir o formulário -useState('Poppins') // 3. Inicializa a variável sobrenome com 'Poppins' +useState('Poppins') // 3. Inicializa a variável de estado (state) surname com 'Poppins' useEffect(updateTitle) // 4. Adiciona um efeito para atualizar o título // ------------- From 0294c8200b72582b8308627d15b3e8040b305b76 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:23 -0300 Subject: [PATCH 31/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 65e95cdb0..4e3ff21e8 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -88,7 +88,7 @@ useState('Poppins') // 3. Inicializa a variável de estado (state) surnam useEffect(updateTitle) // 4. Adiciona um efeito para atualizar o título // ------------- -// Segundo render +// Segunda renderização // ------------- useState('Mary') // 1. Ler o nome da variável (argumento ignorado) useEffect(persistForm) // 2. Substitui o efeito para persistir no formulário From fa84fc17959fa5e7166b0e9e3cf37e61e2d9f614 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:29 -0300 Subject: [PATCH 32/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 4e3ff21e8..d2f2f4921 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -90,7 +90,7 @@ useEffect(updateTitle) // 4. Adiciona um efeito para atualizar o título // ------------- // Segunda renderização // ------------- -useState('Mary') // 1. Ler o nome da variável (argumento ignorado) +useState('Mary') // 1. Ler a variável de estado (state) name (argumento ignorado) useEffect(persistForm) // 2. Substitui o efeito para persistir no formulário useState('Poppins') // 3. Ler a variável sobrenome (argumento ignorado) useEffect(updateTitle) // 4. Substitui o efeito que atualiza o título From 69a2c52bba3dd31b866c9e6aa7284297031be2e5 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:39 -0300 Subject: [PATCH 33/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 d2f2f4921..fe17d56c5 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -92,7 +92,7 @@ useEffect(updateTitle) // 4. Adiciona um efeito para atualizar o título // ------------- useState('Mary') // 1. Ler a variável de estado (state) name (argumento ignorado) useEffect(persistForm) // 2. Substitui o efeito para persistir no formulário -useState('Poppins') // 3. Ler a variável sobrenome (argumento ignorado) +useState('Poppins') // 3.Ler a variável de estado (state) surname (argumento ignorado) useEffect(updateTitle) // 4. Substitui o efeito que atualiza o título // ... From 722810f3d7dc36521b9d84edfbce5a37cd6f4ca6 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:50 -0300 Subject: [PATCH 34/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 fe17d56c5..b1fa9f7ec 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -98,7 +98,7 @@ useEffect(updateTitle) // 4. Substitui o efeito que atualiza o título // ... ``` -Enquanto a ordem dos Hooks chamados é a mesma entre as renderizações, React pode associar um `state` local a cada um deles. Mas o que acontece se colocarmos uma chamada de Hook (por exemplo, o efeito `persistForm`) dentro de uma condição? +Enquanto a ordem dos Hooks chamados for a mesma entre as renderizações, o React pode associar um estado (`state`) local a cada um deles. Mas o que acontece se colocarmos uma chamada de Hook (por exemplo, o efeito `persistForm`) dentro de uma condição? ```js // 🔴 Nós estaremos quebrando a primeira regra por usar um Hook dentro de uma condição From 678e24e07df0bacfce7b4965cfcbea68672f827b Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:09:56 -0300 Subject: [PATCH 35/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- content/docs/hooks-rules.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index b1fa9f7ec..06d086521 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -102,7 +102,6 @@ Enquanto a ordem dos Hooks chamados for a mesma entre as renderizações, o Reac ```js // 🔴 Nós estaremos quebrando a primeira regra por usar um Hook dentro de uma condição - if (name !== '') { useEffect(function persistForm() { localStorage.setItem('formData', name); From 26719abf663886e81eebf5d393b24263ef133182 Mon Sep 17 00:00:00 2001 From: Wendell Adriel Date: Fri, 8 Feb 2019 15:10:21 -0300 Subject: [PATCH 36/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 06d086521..ade441c73 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -109,7 +109,7 @@ if (name !== '') { } ``` -A condição `name !== ''` é `true` na primeira renderização, então chamamos o Hook dentro da condição. Entretanto, na próxima renderização o usuário pode limpar o formulário, fazendo com que a condição seja `false`. Agora que pulamos este Hook durante a primeira renderização, a ordem das chamadas tornou-se diferente, veja: +A condição `name !== ''` é `true` na primeira renderização, então chamamos o Hook dentro da condição. Entretanto, na próxima renderização o usuário pode limpar o formulário, fazendo com que a condição seja `false`. Agora que pulamos este Hook durante a renderização, a ordem das chamadas dos Hooks foi alterada: ```js useState('Mary') // ✅ 1. Lê a variável de estado (state) name (argumento é ignorado) From 3855b5b849fd8ae3e361f0aff8c4c7c507bcd1e6 Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Fri, 8 Feb 2019 15:34:51 -0300 Subject: [PATCH 37/42] repair grammatical errors --- content/docs/hooks-rules.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index ade441c73..3f77219e3 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -10,18 +10,18 @@ prev: hooks-effect.html Hooks são funções Javascript, mas você precisa seguir duas regras ao utilizá-los. Nós providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar essas regras automaticamente: -### Use Hooks apenas em nível superior {#only-call-hooks-at-the-top-level} +### Use Hooks apenas no nível superior {#only-call-hooks-at-the-top-level} -**Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Por seguir as regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados vários `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) +**Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Seguindo essas regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados várias chamadas a `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) ### Use Hooks apenas dentro de funções do React {#only-call-hooks-from-react-functions} -**Não use Hooks em funções javascript regulares.** Em vez disso, você pode: +**Não use Hooks dentro de funções Javascript comuns.** Em vez disso, você pode: * ✅ Chamar Hooks em componentes React. * ✅ Chamar Hooks dentro de Hooks Customizados (Nós iremos aprender sobre eles [na próxima página.](/docs/hooks-custom.html)). -Seguindo essas regra, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. +Seguindo essas regras, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. ## ESLint Plugin {#eslint-plugin} From e3ee9ab13b2db683e74e2247af54239c6d2698a3 Mon Sep 17 00:00:00 2001 From: Glaucia Lemos Date: Mon, 11 Feb 2019 07:32:32 -0300 Subject: [PATCH 38/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 3f77219e3..76baef412 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -23,7 +23,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz Seguindo essas regras, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. -## ESLint Plugin {#eslint-plugin} +## Plugin ESLint {#eslint-plugin} Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica essas duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: From 1e77e895381b4aa98b86a8a21255957e13ec6f69 Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Mon, 11 Feb 2019 07:47:38 -0300 Subject: [PATCH 39/42] fix id hooks-rules.md --- 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 76baef412..07e955b30 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,5 +1,5 @@ --- -id: hook-rules +id: hooks-rules title: Regras dos Hooks permalink: docs/hooks-rules.html next: hooks-custom.html From 42c7ae5590c3647c64b1a308f11449f6aa94bbc7 Mon Sep 17 00:00:00 2001 From: Jhon Mike Date: Mon, 11 Feb 2019 17:44:26 -0300 Subject: [PATCH 40/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 07e955b30..5f38459fd 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -10,7 +10,7 @@ prev: hooks-effect.html Hooks são funções Javascript, mas você precisa seguir duas regras ao utilizá-los. Nós providenciamos um [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) para aplicar essas regras automaticamente: -### Use Hooks apenas no nível superior {#only-call-hooks-at-the-top-level} +### Use Hooks Apenas no Nível Superior {#only-call-hooks-at-the-top-level} **Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Seguindo essas regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados várias chamadas a `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) From e859e450eb12ff39c4062b1ea2bc7dcc8a7c24f7 Mon Sep 17 00:00:00 2001 From: Jhon Mike Date: Mon, 11 Feb 2019 17:44:42 -0300 Subject: [PATCH 41/42] Update content/docs/hooks-rules.md Co-Authored-By: thadeu --- 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 5f38459fd..e70b61310 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -133,6 +133,6 @@ useEffect(function persistForm() { **Note que você não precisa se preocupar com esse problema, se você usar a [regra fornecida no plugin do ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks)**. Mas agora você também sabe o *porquê* os Hooks funcionam dessa maneira, e quais os problemas que essas regras previnem. -## Próximos passos {#next-steps} +## Próximos Passos {#next-steps} Finalmente, estamos prontos para aprender sobre como [escrever nossos próprios Hooks](/docs/hooks-custom.html)! Hooks Customizados permitem você combinar Hooks fornecidos pelo React em suas próprias abstrações, e reusar a lógica do `state` entre diferentes componentes. From be2b96de0069b31ca226ee62b60f9b96e876c4c3 Mon Sep 17 00:00:00 2001 From: Thadeu Esteves Jr Date: Mon, 11 Feb 2019 17:50:51 -0300 Subject: [PATCH 42/42] capitalize titles --- content/docs/hooks-rules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index e70b61310..d70bc04cf 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -14,7 +14,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz **Não use Hooks dentro de loops, regras condicionais ou funções aninhadas (funçoes dentro de funções).** Em vez disso, sempre use Hooks no nível superior de sua função React. Seguindo essas regras, você garante que os Hooks serão chamados na mesma ordem a cada vez que o componente renderizar. É isso que permite que o React preserve corretamente o estado dos Hooks quando são usados várias chamadas a `useState` e `useEffect` na mesma função. (Se você ficou curioso, iremos explicar isso melhor [abaixo](#explanation).) -### Use Hooks apenas dentro de funções do React {#only-call-hooks-from-react-functions} +### Use Hooks Apenas Dentro de Funções do React {#only-call-hooks-from-react-functions} **Não use Hooks dentro de funções Javascript comuns.** Em vez disso, você pode: @@ -23,7 +23,7 @@ Hooks são funções Javascript, mas você precisa seguir duas regras ao utiliz Seguindo essas regras, você garante que toda lógica de estado (`state`) no componente seja claramente visível no código fonte. -## Plugin ESLint {#eslint-plugin} +## ESLint Plugin {#eslint-plugin} Nós liberamos um plugin ESLint chamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) que aplica essas duas regras. Se você desejar pode adicionar este plugin ao seu projeto, dessa forma: