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/purity.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,67 +4,67 @@ title: purity
4
4
5
5
<Intro>
6
6
7
-
Validates that [components/hooks are pure](/reference/rules/components-and-hooks-must-be-pure)by checking that they do not call known-impure functions.
7
+
Valida que [componentes/hooks são puros](/reference/rules/components-and-hooks-must-be-pure)verificando se eles não chamam funções conhecidas como impuras.
8
8
9
9
</Intro>
10
10
11
-
## Rule Details {/*rule-details*/}
11
+
## Detalhes da Regra {/*rule-details*/}
12
12
13
-
React components must be pure functions - given the same props, they should always return the same JSX. When components use functions like`Math.random()`or`Date.now()`during render, they produce different output each time, breaking React's assumptions and causing bugs like hydration mismatches, incorrect memoization, and unpredictable behavior.
13
+
Componentes React devem ser funções puras - dadas as mesmas props, eles devem sempre retornar o mesmo JSX. Quando componentes usam funções como`Math.random()`ou`Date.now()`durante a renderização, eles produzem saídas diferentes a cada vez, quebrando as suposições do React e causando erros como incompatibilidades de hidratação, memoização incorreta e comportamento imprevisível.
14
14
15
-
## Common Violations {/*common-violations*/}
15
+
## Violações Comuns {/*common-violations*/}
16
16
17
-
In general, any API that returns a different value for the same inputs violates this rule. Usual examples include:
17
+
Em geral, qualquer API que retorna um valor diferente para as mesmas entradas viola esta regra. Exemplos comuns incluem:
18
18
19
19
-`Math.random()`
20
20
-`Date.now()` / `new Date()`
21
21
-`crypto.randomUUID()`
22
22
-`performance.now()`
23
23
24
-
### Invalid {/*invalid*/}
24
+
### Inválido {/*invalid*/}
25
25
26
-
Examples of incorrect code for this rule:
26
+
Exemplos de código incorreto para esta regra:
27
27
28
28
```js
29
-
// ❌ Math.random() in render
29
+
// ❌ Math.random() na renderização
30
30
functionComponent() {
31
-
constid=Math.random(); //Different every render
31
+
constid=Math.random(); //Diferente a cada renderização
32
32
return<div key={id}>Content</div>;
33
33
}
34
34
35
-
// ❌ Date.now() for values
35
+
// ❌ Date.now() para valores
36
36
functionComponent() {
37
-
consttimestamp=Date.now(); //Changes every render
37
+
consttimestamp=Date.now(); //Muda a cada renderização
38
38
return<div>Created at: {timestamp}</div>;
39
39
}
40
40
```
41
41
42
-
### Valid {/*valid*/}
42
+
### Válido {/*valid*/}
43
43
44
-
Examples of correct code for this rule:
44
+
Exemplos de código correto para esta regra:
45
45
46
46
```js
47
-
// ✅ Stable IDs from initial state
47
+
// ✅ IDs estáveis a partir do estado inicial
48
48
functionComponent() {
49
49
const [id] =useState(() =>crypto.randomUUID());
50
50
return<div key={id}>Content</div>;
51
51
}
52
52
```
53
53
54
-
## Troubleshooting {/*troubleshooting*/}
54
+
## Solução de Problemas {/*troubleshooting*/}
55
55
56
-
### I need to show the current time {/*current-time*/}
56
+
### Preciso mostrar a hora atual {/*current-time*/}
57
57
58
-
Calling`Date.now()`during render makes your component impure:
58
+
Chamar`Date.now()`durante a renderização torna seu componente impuro:
59
59
60
60
```js {expectedErrors: {'react-compiler': [3]}}
61
-
// ❌ Wrong: Time changes every render
61
+
// ❌ Errado: A hora muda a cada renderização
62
62
functionClock() {
63
63
return<div>Current time: {Date.now()}</div>;
64
64
}
65
65
```
66
66
67
-
Instead, [move the impure function outside of render](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent):
67
+
Em vez disso, [mova a função impura para fora da renderização](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent):
0 commit comments