diff --git a/content/warnings/invalid-hook-call-warning.md b/content/warnings/invalid-hook-call-warning.md index 156578ec2..f9e6b8467 100644 --- a/content/warnings/invalid-hook-call-warning.md +++ b/content/warnings/invalid-hook-call-warning.md @@ -4,57 +4,57 @@ layout: single permalink: warnings/invalid-hook-call-warning.html --- - You are probably here because you got the following error message: + Você provavelmente está aqui porque recebeu a seguinte mensagem de erro: > Hooks can only be called inside the body of a function component. -There are three common reasons you might be seeing it: +Existem três razões comuns pelas quais você pode estar vendo a mensagem: -1. You might have **mismatching versions** of React and React DOM. -2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**. -3. You might have **more than one copy of React** in the same app. +1. Você pode ter **versões incompatíveis** do React e React DOM. +2. Você pode estar **quebrando as [Regras dos Hooks](/docs/hooks-rules.html)**. +3. Você pode ter **mais do que uma cópia do React** na mesma app. -Let's look at each of these cases. +Vamos olhar cada um destes casos. -## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom} +## Versões incompatíveis do React e React DOM {#mismatching-versions-of-react-and-react-dom} -You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below). +Você pode estar usando uma versão do `react-dom` (< 16.8.0) ou `react-native` (< 0.59) que ainda não suporta _Hooks_. Você pode executar o script `npm ls react-dom` ou `npm ls react-native` na pasta da sua aplicação para verificar qual versão esta usando. Se você encontrar mais do que uma delas, isto talvez pode também causar problemas (mais detalhes sobre isso abaixo). -## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks} +## Quebrando as Regras dos Hooks {#breaking-the-rules-of-hooks} -You can only call Hooks **while React is rendering a function component**: +Você pode somente chamar os _Hooks_ **enquanto o React renderiza um componente funcional**: -* ✅ Call them at the top level in the body of a function component. -* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html). +* ✅ Chame-os no nível superior do corpo de um componente funcional. +* ✅ Chame-os no nível superior do corpo de um [Hook customizado](/docs/hooks-custom.html). -**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).** +**Aprenda mais sobre isto na [Regras dos Hooks](/docs/hooks-rules.html).** ```js{2-3,8-9} function Counter() { - // ✅ Good: top-level in a function component + // ✅ Bom: nível superior de um componente funcional const [count, setCount] = useState(0); // ... } function useWindowWidth() { - // ✅ Good: top-level in a custom Hook + // ✅ Bom: nível superior de um Hook customizado const [width, setWidth] = useState(window.innerWidth); // ... } ``` -To avoid confusion, it’s **not** supported to call Hooks in other cases: +Para evitar confusão, **não** é suportado chamar Hooks em outros casos: -* 🔴 Do not call Hooks in class components. -* 🔴 Do not call in event handlers. -* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`. +* 🔴 Não chame Hooks em componentes de classe. +* 🔴 Não chame em manipuladores de eventos. +* 🔴 Não chame Hooks dentro de funções passadas para `useMemo`, `useReducer`, ou `useEffect`. -If you break these rules, you might see this error. +Se você quebrar estas regras, poderá ver este erro. ```js{3-4,11-12,20-21} function Bad1() { function handleClick() { - // 🔴 Bad: inside an event handler (to fix, move it outside!) + // 🔴 Ruim: dentro de um manipulador de evento (para arrumar, mova-o para fora!) const theme = useContext(ThemeContext); } // ... @@ -62,7 +62,7 @@ function Bad1() { function Bad2() { const style = useMemo(() => { - // 🔴 Bad: inside useMemo (to fix, move it outside!) + // 🔴 Ruim: dentro do useMemo (para arrumar, mova-o para fora!) const theme = useContext(ThemeContext); return createStyle(theme); }); @@ -71,52 +71,52 @@ function Bad2() { class Bad3 extends React.Component { render() { - // 🔴 Bad: inside a class component + // 🔴 Bad: dentro de um componente de classe useEffect(() => {}) // ... } } ``` -You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes. +Você pode usar o [plugin `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) para capturar alguns desses erros. ->Note +>Nota > ->[Custom Hooks](/docs/hooks-custom.html) *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 Customizados](/docs/hooks-custom.html) *podem* chamar outros Hooks (este é todo o seu propósito). Isso funciona porque Hooks customizados também devem ser chamados apenas enquanto um componente funcional estiver sendo renderizado. -## Duplicate React {#duplicate-react} +## React Duplicado {#duplicate-react} -In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package. +Para que os _Hooks_ funcionem, a importação do `react` no código da sua aplicação precisa ser resolvida no mesmo módulo que a importação do `react` de dentro do pacote do `react-dom`. -If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package. +Se estas importações do `react` resolverem para dois objetos exportados diferentes, você verá este alerta. Isso pode acontecer se você **acidentalmente acabar com duas cópias** do pacote `react`. -If you use Node for package management, you can run this check in your project folder: +Se você usa o gerenciador de pacotes do Node, você pode executar este verificador na pasta do seu projeto: npm ls react -If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround. +Se você ver mais do que um React, você precisará descobrir porquê isso acontece e corrigir a sua árvore de dependências. Por exemplo, talvez uma biblioteca que você está usando incorretamente especifique o `react` como uma dependência (ao invés de uma dependência de pares). Até que essa biblioteca seja arrumada, [a resolução do Yarn](https://yarnpkg.com/lang/pt-br/docs/selective-version-resolutions/) é uma possível solução alternativa. -You can also try to debug this problem by adding some logs and restarting your development server: +Você pode tentar depurar este problema adicionando alguns logs e reiniciando seu servidor de desenvolvimento: ```js -// Add this in node_modules/react-dom/index.js +// Adicione isto no node_modules/react-dom/index.js window.React1 = require('react'); -// Add this in your component file +// Adicione isto no arquivo do seu componente require('react-dom'); window.React2 = require('react'); console.log(window.React1 === window.React2); ``` -If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community. +Se ele imprimir `false` então você pode ter duas cópias do React e precisa descobrir porquê isso aconteceu. [Esta issue](https://github.com/facebook/react/issues/13991) inclue algumas razões comuns encontradas pela comunidade. -This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy. +Este problema pode também aparecer quando você usa `npm link` ou um equivalente. Neste caso, seu _bundler_ pode "ver" duas cópias do React — um na pasta da aplicação e outro na pasta da sua biblioteca. Assumindo que `myapp` e `mylib` são pastas irmãs, uma possível resolução é executar o script `npm link ../myapp/node_modules/react` de dentro da `mylib`. Isto fará com que a biblioteca use a cópia do React da aplicação. ->Note +>Nota > ->In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with. +>Em geral, o React suporta o uso de várias cópias independentes em uma página (por exemplo, se um aplicativo e um _widget_ de terceiros o usarem). Ele somente quebra se `require('react')` resolver diferentemente entre o componente e a cópia do `react-dom` que ele foi renderizado. -## Other Causes {#other-causes} +## Outros casos {#other-causes} -If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it. +Se nada disso funcionar, por favor comente [nesta issue](https://github.com/facebook/react/issues/13991) e nós iremos tentar ajudar. Tente criar um pequeno exemplo que reproduza o problema — você poderá descobrir o problema enquanto estiver fazendo isso.