You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,35 +4,35 @@ title: error-boundaries
4
4
5
5
<Intro>
6
6
7
-
Validates usage of Error Boundaries instead of try/catch for errors in child components.
7
+
Valida o uso de Limites de Erro em vez de try/catch para erros em componentes filhos.
8
8
9
9
</Intro>
10
10
11
-
## Rule Details {/*rule-details*/}
11
+
## Detalhes da Regra {/*rule-details*/}
12
12
13
-
Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)can catch these errors.
13
+
Blocos try/catch não podem capturar erros que ocorrem durante o processo de renderização do React. Erros lançados em métodos de renderização ou hooks sobem pela árvore de componentes. Apenas [Limites de Erro](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)podem capturar esses erros.
14
14
15
-
### Invalid {/*invalid*/}
15
+
### Inválido {/*invalid*/}
16
16
17
-
Examples of incorrect code for this rule:
17
+
Exemplos de código incorreto para esta regra:
18
18
19
19
```js {expectedErrors: {'react-compiler': [4]}}
20
-
// ❌ Try/catch won't catch render errors
20
+
// ❌ Try/catch não capturará erros de renderização
21
21
functionParent() {
22
22
try {
23
-
return<ChildComponent />; //If this throws, catch won't help
23
+
return<ChildComponent />; //Se isso lançar um erro, o catch não ajudará
24
24
} catch (error) {
25
-
return<div>Error occurred</div>;
25
+
return<div>Ocorreu um erro</div>;
26
26
}
27
27
}
28
28
```
29
29
30
-
### Valid {/*valid*/}
30
+
### Válido {/*valid*/}
31
31
32
-
Examples of correct code for this rule:
32
+
Exemplos de código correto para esta regra:
33
33
34
34
```js
35
-
// ✅ Using error boundary
35
+
// ✅ Usando limite de erro
36
36
functionParent() {
37
37
return (
38
38
<ErrorBoundary>
@@ -42,28 +42,28 @@ function Parent() {
42
42
}
43
43
```
44
44
45
-
## Troubleshooting {/*troubleshooting*/}
45
+
## Solução de Problemas {/*troubleshooting*/}
46
46
47
-
### Why is the linter telling me not to wrap `use`in`try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
47
+
### Por que o linter está me dizendo para não envolver `use`em`try`/`catch`? {/*why-is-the-linter-telling-me-not-to-wrap-use-in-trycatch*/}
48
48
49
-
The `use`hook doesn't throw errors in the traditional sense, it suspends component execution. When`use`encounters a pending promise, it suspends the component and lets React show a fallback. Only Suspense and Error Boundaries can handle these cases. The linter warns against`try`/`catch`around `use`to prevent confusion as the `catch`block would never run.
49
+
O hook `use`não lança erros no sentido tradicional, ele suspende a execução do componente. Quando`use`encontra uma promessa pendente, ele suspende o componente e permite que o React mostre um fallback. Apenas Suspense e Limites de Erro podem lidar com esses casos. O linter adverte contra`try`/`catch`em torno de `use`para evitar confusão, pois o bloco `catch`nunca seria executado.
50
50
51
51
```js {expectedErrors: {'react-compiler': [5]}}
52
-
// ❌ Try/catch around `use` hook
52
+
// ❌ Try/catch em torno do hook `use`
53
53
functionComponent({promise}) {
54
54
try {
55
-
constdata=use(promise); //Won't catch - `use` suspends, not throws
55
+
constdata=use(promise); //Não captura - `use` suspende, não lança erro
56
56
return<div>{data}</div>;
57
57
} catch (error) {
58
-
return<div>Failed to load</div>; //Unreachable
58
+
return<div>Falha ao carregar</div>; //Inalcançável
59
59
}
60
60
}
61
61
62
-
// ✅ Error boundary catches `use` errors
62
+
// ✅ Limite de erro captura erros de `use`
63
63
functionApp() {
64
64
return (
65
-
<ErrorBoundary fallback={<div>Failed to load</div>}>
66
-
<Suspense fallback={<div>Loading...</div>}>
65
+
<ErrorBoundary fallback={<div>Falha ao carregar</div>}>
0 commit comments