Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate rules-of-hooks.md to pt-br #931

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions src/content/reference/rules/rules-of-hooks.md
Original file line number Diff line number Diff line change
@@ -1,61 +1,61 @@
---
title: Rules of Hooks
title: Regras dos Hooks
---

<Intro>
Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.
Os Hooks são definidos usando funções JavaScript, mas representam um tipo especial de lógica de UI reutilizável com restrições sobre onde podem ser chamados.
</Intro>

<InlineToc />

---

## Only call Hooks at the top level {/*only-call-hooks-at-the-top-level*/}
## Chame Hooks apenas no nível superior {/*only-call-hooks-at-the-top-level*/}

Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
Funções cujos nomes começam com `use` são chamadas de [*Hooks*](/reference/react) no React.

**Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
**Não chame Hooks dentro de loops, condições, funções aninhadas ou blocos `try`/`catch`/`finally`.** Em vez disso, sempre use Hooks no nível superior da sua função React, antes de quaisquer retornos antecipados. Você só pode chamar Hooks enquanto o React estiver renderizando um componente de função:

* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
* ✅ Chame-os no nível superior no corpo de um [componente de função](/learn/your-first-component).
* ✅ Chame-os no nível superior no corpo de um [Hook personalizado](/learn/reusing-logic-with-custom-hooks).

```js{2-3,8-9}
function Counter() {
// ✅ Good: top-level in a function component
// ✅ Bom: nível superior em um componente de função
const [count, setCount] = useState(0);
// ...
}

function useWindowWidth() {
// ✅ Good: top-level in a custom Hook
// ✅ Bom: nível superior em um Hook personalizado
const [width, setWidth] = useState(window.innerWidth);
// ...
}
```

It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
Não é **suportado** chamar Hooks (funções que começam com `use`) em quaisquer outros casos, por exemplo:

* 🔴 Do not call Hooks inside conditions or loops.
* 🔴 Do not call Hooks after a conditional `return` statement.
* 🔴 Do not call Hooks in event handlers.
* 🔴 Do not call Hooks in class components.
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
* 🔴 Do not call Hooks inside `try`/`catch`/`finally` blocks.
* 🔴 Não chame Hooks dentro de condições ou loops.
* 🔴 Não chame Hooks após uma declaração de `return` condicional.
* 🔴 Não chame Hooks em manipuladores de eventos.
* 🔴 Não chame Hooks em componentes de classe.
* 🔴 Não chame Hooks dentro de funções passadas para `useMemo`, `useReducer` ou `useEffect`.
* 🔴 Não chame Hooks dentro de blocos `try`/`catch`/`finally`.

If you break these rules, you might see this error.
Se você quebrar essas regras, pode ver esse erro.

```js{3-4,11-12,20-21}
function Bad({ cond }) {
if (cond) {
// 🔴 Bad: inside a condition (to fix, move it outside!)
// 🔴 Ruim: dentro de uma condição (para corrigir, mova para fora!)
const theme = useContext(ThemeContext);
}
// ...
}

function Bad() {
for (let i = 0; i < 10; i++) {
// 🔴 Bad: inside a loop (to fix, move it outside!)
// 🔴 Ruim: dentro de um loop (para corrigir, mova para fora!)
const theme = useContext(ThemeContext);
}
// ...
Expand All @@ -65,22 +65,22 @@ function Bad({ cond }) {
if (cond) {
return;
}
// 🔴 Bad: after a conditional return (to fix, move it before the return!)
// 🔴 Ruim: após um return condicional (para corrigir, mova antes do return!)
const theme = useContext(ThemeContext);
// ...
}

function Bad() {
function handleClick() {
// 🔴 Bad: inside an event handler (to fix, move it outside!)
// 🔴 Ruim: dentro de um manipulador de evento (para corrigir, mova para fora!)
const theme = useContext(ThemeContext);
}
// ...
}

function Bad() {
const style = useMemo(() => {
// 🔴 Bad: inside useMemo (to fix, move it outside!)
// 🔴 Ruim: dentro de useMemo (para corrigir, mova para fora!)
const theme = useContext(ThemeContext);
return createStyle(theme);
});
Expand All @@ -89,47 +89,47 @@ function Bad() {

class Bad extends React.Component {
render() {
// 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
// 🔴 Ruim: dentro de um componente de classe (para corrigir, escreva um componente de função em vez de uma classe!)
useEffect(() => {})
// ...
}
}

function Bad() {
try {
// 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
// 🔴 Ruim: dentro de um bloco try/catch/finally (para corrigir, mova para fora!)
const [x, setX] = useState(0);
} catch {
const [x, setX] = useState(1);
}
}
```

You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
Você pode usar o [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) para capturar esses erros.

<Note>

[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
[Hooks personalizados](/learn/reusing-logic-with-custom-hooks) *podem* chamar outros Hooks (esse é todo o seu propósito). Isso funciona porque os Hooks personalizados também devem ser chamados apenas enquanto um componente de função está sendo renderizado.

</Note>

---

## Only call Hooks from React functions {/*only-call-hooks-from-react-functions*/}
## Chame Hooks apenas de funções React {/*only-call-hooks-from-react-functions*/}

Don’t call Hooks from regular JavaScript functions. Instead, you can:
Não chame Hooks de funções JavaScript regulares. Em vez disso, você pode:

Call Hooks from React function components.
Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).
Chamar Hooks de componentes de função React.
Chamar Hooks de [Hooks personalizados](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component).

By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
Seguindo essa regra, você garante que toda a lógica com estado em um componente seja claramente visível a partir do seu código fonte.

```js {2,5}
function FriendList() {
const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
}

function setOnlineStatus() { // ❌ Not a component or custom Hook!
function setOnlineStatus() { // ❌ Não é um componente ou Hook personalizado!
const [onlineStatus, setOnlineStatus] = useOnlineStatus();
}
```
```
Loading