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
Call`useEffectEvent`at the top level of your component to create an Effect Event.
23
+
Chame`useEffectEvent`no nível superior do seu componente para criar um Evento de Efeito.
24
24
25
25
```js {4,6}
26
26
import { useEffectEvent, useEffect } from'react';
@@ -32,56 +32,56 @@ function ChatRoom({ roomId, theme }) {
32
32
}
33
33
```
34
34
35
-
Effect Events are a part of your Effect logic, but they behave more like an event handler. They always “see” the latest values from render (like props and state) without re-synchronizing your Effect, so they're excluded from Effect dependencies. See [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects)to learn more.
35
+
Eventos de Efeito são parte da lógica do seu Efeito, mas se comportam mais como um manipulador de eventos. Eles sempre "enxergam" os valores mais recentes da renderização (como props e estado) sem re-sincronizar seu Efeito, portanto, são excluídos das dependências do Efeito. Veja [Separando Eventos de Efeitos](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects)para saber mais.
36
36
37
-
[See more examples below.](#usage)
37
+
[Veja mais exemplos abaixo.](#usage)
38
38
39
-
#### Parameters {/*parameters*/}
39
+
#### Parâmetros {/*parameters*/}
40
40
41
-
*`callback`: A function containing the logic for your Effect Event. The function can accept any number of arguments and return any value. When you call the returned Effect Event function, the`callback`always accesses the latest committed values from render at the time of the call.
41
+
*`callback`: Uma função que contém a lógica para o seu Evento de Efeito. A função pode aceitar qualquer número de argumentos e retornar qualquer valor. Ao chamar a função de Evento de Efeito retornada, o`callback`sempre acessa os valores commitados mais recentes da renderização no momento da chamada.
42
42
43
-
#### Returns {/*returns*/}
43
+
#### Retorna {/*returns*/}
44
44
45
-
`useEffectEvent`returns an Effect Event function with the same type signature as your`callback`.
45
+
`useEffectEvent`retorna uma função de Evento de Efeito com a mesma assinatura de tipo que seu`callback`.
46
46
47
-
You can call this function inside `useEffect`, `useLayoutEffect`, `useInsertionEffect`, or from within other Effect Events in the same component.
47
+
Você pode chamar esta função dentro de `useEffect`, `useLayoutEffect`, `useInsertionEffect`, ou de outros Eventos de Efeito no mesmo componente.
48
48
49
-
#### Caveats {/*caveats*/}
49
+
#### Ressalvas {/*caveats*/}
50
50
51
-
*`useEffectEvent`is a Hook, so you can only call it **at the top level of your component**or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the Effect Event into it.
52
-
*Effect Events can only be called from inside Effects or other Effect Events. Do not call them during rendering or pass them to other components or Hooks. The [`eslint-plugin-react-hooks`](/reference/eslint-plugin-react-hooks)linter enforces this restriction.
53
-
*Do not use `useEffectEvent`to avoid specifying dependencies in your Effect's dependency array. This hides bugs and makes your code harder to understand. Only use it for logic that is genuinely an event fired from Effects.
54
-
*Effect Event functions do not have a stable identity. Their identity intentionally changes on every render.
51
+
*`useEffectEvent`é um Hook, então você só pode chamá-lo **no nível superior do seu componente**ou dos seus próprios Hooks. Você não pode chamá-lo dentro de loops ou condições. Se precisar disso, extraia um novo componente e mova o Evento de Efeito para ele.
52
+
*Eventos de Efeito só podem ser chamados de dentro de Efeitos ou outros Eventos de Efeito. Não os chame durante a renderização nem os passe para outros componentes ou Hooks. O linter [`eslint-plugin-react-hooks`](/reference/eslint-plugin-react-hooks)impõe essa restrição.
53
+
*Não use `useEffectEvent`para evitar especificar dependências no array de dependências do seu Efeito. Isso oculta erros e torna seu código mais difícil de entender. Use-o apenas para lógica que seja genuinamente um evento disparado por Efeitos.
54
+
*Funções de Evento de Efeito não possuem uma identidade estável. Sua identidade muda intencionalmente a cada renderização.
55
55
56
56
<DeepDive>
57
57
58
-
#### Why are Effect Events not stable? {/*why-are-effect-events-not-stable*/}
58
+
#### Por que os Eventos de Efeito não são estáveis? {/*why-are-effect-events-not-stable*/}
59
59
60
-
Unlike `set`functions from `useState`or refs, Effect Event functions do not have a stable identity. Their identity intentionally changes on every render:
60
+
Diferente das funções `set`de `useState`ou de refs, as funções de Evento de Efeito não possuem uma identidade estável. Sua identidade muda intencionalmente a cada renderização:
61
61
62
62
```js
63
-
// 🔴 Wrong: including Effect Event in dependencies
63
+
// 🔴 Errado: incluindo Evento de Efeito nas dependências
64
64
useEffect(() => {
65
65
onSomething();
66
-
}, [onSomething]); // ESLint will warn about this
66
+
}, [onSomething]); //O ESLint avisará sobre isso
67
67
```
68
68
69
-
This is a deliberate design choice. Effect Events are meant to be called only from within Effects in the same component. Since you can only call them locally and cannot pass them to other components or include them in dependency arrays, a stable identity would serve no purpose, and would actually mask bugs.
69
+
Esta é uma escolha de design deliberada. Eventos de Efeito são feitos para serem chamados apenas de dentro de Efeitos no mesmo componente. Como você só pode chamá-los localmente e não pode passá-los para outros componentes ou incluí-los em arrays de dependência, uma identidade estável não teria propósito e, na verdade, mascararia erros.
70
70
71
-
The non-stable identity acts as a runtime assertion: if your code incorrectly depends on the function identity, you'll see the Effect re-running on every render, making the bug obvious.
71
+
A identidade não estável atua como uma asserção em tempo de execução: se seu código depender incorretamente da identidade da função, você verá o Efeito sendo reexecutado a cada renderização, tornando o erro óbvio.
72
72
73
-
This design reinforces that Effect Events conceptually belong to a particular effect, and are not a general purpose API to opt-out of reactivity.
73
+
Este design reforça que os Eventos de Efeito conceitualmente pertencem a um Efeito específico e não são uma API de propósito geral para optar por não reagir.
74
74
75
75
</DeepDive>
76
76
77
77
---
78
78
79
-
## Usage {/*usage*/}
79
+
## Uso {/*usage*/}
80
80
81
81
82
-
### Using an event in an Effect {/*using-an-event-in-an-effect*/}
82
+
### Usando um evento em um Efeito {/*using-an-event-in-an-effect*/}
83
83
84
-
Call`useEffectEvent`at the top level of your component to create an *Effect Event*:
84
+
Chame`useEffectEvent`no nível superior do seu componente para criar um *Evento de Efeito*:
`useEffectEvent`accepts an `event callback` and returns an <CodeStepstep={1}>Effect Event</CodeStep>. The Effect Event is a function that can be called inside of Effects without re-connecting the Effect:
95
+
`useEffectEvent`aceita um `callback de evento` e retorna um <CodeStepstep={1}>Evento de Efeito</CodeStep>. O Evento de Efeito é uma função que pode ser chamada dentro de Efeitos sem re-conectar o Efeito:
96
96
97
97
```js [[1, 3, "onConnected"]]
98
98
useEffect(() => {
@@ -105,38 +105,38 @@ useEffect(() => {
105
105
}, [roomId]);
106
106
```
107
107
108
-
Since`onConnected`is an <CodeStepstep={1}>Effect Event</CodeStep>, `muted`and`onConnect`are not in the Effect dependencies.
108
+
Como`onConnected`é um <CodeStepstep={1}>Evento de Efeito</CodeStep>, `muted`e`onConnect`não estão nas dependências do Efeito.
109
109
110
110
<Pitfall>
111
111
112
-
##### Don't use Effect Events to skip dependencies {/*pitfall-skip-dependencies*/}
112
+
##### Não use Eventos de Efeito para pular dependências {/*pitfall-skip-dependencies*/}
113
113
114
-
It might be tempting to use `useEffectEvent`to avoid listing dependencies that you think are "unnecessary." However, this hides bugs and makes your code harder to understand:
114
+
Pode ser tentador usar `useEffectEvent`para evitar listar dependências que você acha "desnecessárias". No entanto, isso oculta erros e torna seu código mais difícil de entender:
115
115
116
116
```js
117
-
// 🔴 Wrong: Using Effect Events to hide dependencies
117
+
// 🔴 Errado: Usando Eventos de Efeito para ocultar dependências
118
118
constlogVisit=useEffectEvent(() => {
119
119
log(pageUrl);
120
120
});
121
121
122
122
useEffect(() => {
123
123
logVisit()
124
-
}, []); //Missing pageUrl means you miss logs
124
+
}, []); // pageUrl ausente significa que você perde logs
125
125
```
126
126
127
-
If a value should cause your Effect to re-run, keep it as a dependency. Only use Effect Events for logic that genuinely should not re-trigger your Effect.
127
+
Se um valor deve fazer seu Efeito ser reexecutado, mantenha-o como uma dependência. Use Eventos de Efeito apenas para lógica que genuinamente não deve reativar seu Efeito.
128
128
129
-
See [Separating Events from Effects](/learn/separating-events-from-effects)to learn more.
129
+
Veja [Separando Eventos de Efeitos](/learn/separating-events-from-effects)para saber mais.
130
130
131
131
</Pitfall>
132
132
133
133
---
134
134
135
-
### Using a timer with latest values {/*using-a-timer-with-latest-values*/}
135
+
### Usando um timer com valores mais recentes {/*using-a-timer-with-latest-values*/}
136
136
137
-
When you use`setInterval`or`setTimeout`in an Effect, you often want to read the latest values from render without restarting the timer whenever those values change.
137
+
Quando você usa`setInterval`ou`setTimeout`em um Efeito, muitas vezes você quer ler os valores mais recentes da renderização sem reiniciar o timer sempre que esses valores mudam.
138
138
139
-
This counter increments`count`by the current `increment`value every second. The `onTick`Effect Event reads the latest `count`and`increment`without causing the interval to restart:
139
+
Este contador incrementa`count`pelo valor atual de `increment`a cada segundo. O Evento de Efeito `onTick`lê os `count`e`increment`mais recentes sem causar a reinicialização do intervalo:
140
140
141
141
<Sandpack>
142
142
@@ -188,15 +188,15 @@ button { margin: 10px; }
188
188
189
189
</Sandpack>
190
190
191
-
Try changing the increment value while the timer is running. The counter immediately uses the new increment value, but the timer keeps ticking smoothly without restarting.
191
+
Tente mudar o valor de incremento enquanto o timer está rodando. O contador usa imediatamente o novo valor de incremento, mas o timer continua funcionando suavemente sem reiniciar.
192
192
193
193
---
194
194
195
-
### Using an event listener with latest values {/*using-an-event-listener-with-latest-values*/}
195
+
### Usando um listener de eventos com valores mais recentes {/*using-an-event-listener-with-latest-values*/}
196
196
197
-
When you set up an event listener in an Effect, you often need to read the latest values from render in the callback. Without`useEffectEvent`, you would need to include the values in your dependencies, causing the listener to be removed and re-added on every change.
197
+
Quando você configura um listener de eventos em um Efeito, muitas vezes precisa ler os valores mais recentes da renderização no callback. Sem`useEffectEvent`, você precisaria incluir os valores em suas dependências, o que faria com que o listener fosse removido e adicionado novamente a cada mudança.
198
198
199
-
This example shows a dot that follows the cursor, but only when "Can move" is checked. The `onMove`Effect Event always reads the latest `canMove`value without re-running the Effect:
199
+
Este exemplo mostra um ponto que segue o cursor, mas apenas quando "Can move" está marcado. O Evento de Efeito `onMove`sempre lê o valor `canMove`mais recente sem reexecutar o Efeito:
200
200
201
201
<Sandpack>
202
202
@@ -254,15 +254,15 @@ body {
254
254
255
255
</Sandpack>
256
256
257
-
Toggle the checkbox and move your cursor. The dot responds immediately to the checkbox state, but the event listener is only set up once when the component mounts.
257
+
Marque a caixa de seleção e mova o cursor. O ponto responde imediatamente ao estado da caixa de seleção, mas o listener de eventos é configurado apenas uma vez quando o componente é montado.
258
258
259
259
---
260
260
261
-
### Avoid reconnecting to external systems {/*showing-a-notification-without-reconnecting*/}
261
+
### Evitar reconexões a sistemas externos {/*avoid-reconnecting-to-external-systems*/}
262
262
263
-
A common use case for `useEffectEvent`is when you want to do something in response to an Effect, but that "something" depends on a value you don't want to react to.
263
+
Um caso de uso comum para `useEffectEvent`é quando você quer fazer algo em resposta a um Efeito, mas esse "algo" depende de um valor ao qual você não quer reagir.
264
264
265
-
In this example, a chat component connects to a room and shows a notification when connected. The user can mute notifications with a checkbox. However, you don't want to reconnect to the chat room every time the user changes the settings:
265
+
Neste exemplo, um componente de chat se conecta a uma sala e mostra uma notificação quando conectado. O usuário pode silenciar notificações com uma caixa de seleção. No entanto, você não quer se reconectar à sala de chat toda vez que o usuário muda as configurações:
Try switching rooms. The chat reconnects and shows a notification. Now mute the notifications. Since`muted`is read inside the Effect Event rather than the Effect, the chat stays connected.
404
+
Tente mudar de sala. O chat se reconecta e mostra uma notificação. Agora, silencie as notificações. Como`muted`é lido dentro do Evento de Efeito em vez do Efeito, o chat permanece conectado.
405
405
406
406
---
407
407
408
-
### Using Effect Events in custom Hooks {/*using-effect-events-in-custom-hooks*/}
408
+
### Usando Eventos de Efeito em Hooks customizados {/*using-effect-events-in-custom-hooks*/}
409
409
410
-
You can use`useEffectEvent`inside your own custom Hooks. This lets you create reusable Hooks that encapsulate Effects while keeping some values non-reactive:
410
+
Você pode usar`useEffectEvent`dentro dos seus próprios Hooks customizados. Isso permite que você crie Hooks reutilizáveis que encapsulam Efeitos, mantendo alguns valores não reativos:
In this example, `useInterval`is a custom Hook that sets up an interval. The`callback`passed to it is wrapped in an Effect Event, so the interval does not reset even if a new`callback`is passed in every render.
475
+
Neste exemplo, `useInterval`é um Hook customizado que configura um intervalo. O`callback`passado para ele é envolvido em um Evento de Efeito, então o intervalo não é resetado mesmo que um novo`callback`seja passado a cada renderização.
476
476
477
477
---
478
478
479
-
## Troubleshooting {/*troubleshooting*/}
479
+
## Solução de problemas {/*troubleshooting*/}
480
480
481
-
### I'm getting an error: "A function wrapped in useEffectEvent can't be called during rendering" {/*cant-call-during-rendering*/}
481
+
### Estou recebendo um erro: "A function wrapped in useEffectEvent can't be called during rendering" {/*cant-call-during-rendering*/}
482
482
483
-
This error means you're calling an Effect Event function during the render phase of your component. Effect Events can only be called from inside Effects or other Effect Events.
483
+
Este erro significa que você está chamando uma função de Evento de Efeito durante a fase de renderização do seu componente. Eventos de Efeito só podem ser chamados de dentro de Efeitos ou outros Eventos de Efeito.
484
484
485
485
```js
486
486
functionMyComponent({ data }) {
487
487
constonLog=useEffectEvent(() => {
488
488
console.log(data);
489
489
});
490
490
491
-
// 🔴 Wrong: calling during render
491
+
// 🔴 Errado: chamando durante a renderização
492
492
onLog();
493
493
494
-
// ✅ Correct: call from an Effect
494
+
// ✅ Correto: chamar de um Efeito
495
495
useEffect(() => {
496
496
onLog();
497
497
}, []);
@@ -500,55 +500,55 @@ function MyComponent({ data }) {
500
500
}
501
501
```
502
502
503
-
If you need to run logic during render, don't wrap it in`useEffectEvent`. Call the logic directly or move it into an Effect.
503
+
Se você precisa executar lógica durante a renderização, não a envolva em`useEffectEvent`. Chame a lógica diretamente ou mova-a para um Efeito.
504
504
505
505
---
506
506
507
-
### I'm getting a lint error: "Functions returned from useEffectEvent must not be included in the dependency array" {/*effect-event-in-deps*/}
507
+
### Estou recebendo um erro de lint: "Functions returned from useEffectEvent must not be included in the dependency array" {/*effect-event-in-deps*/}
508
508
509
-
If you see a warning like "Functions returned from `useEffectEvent` must not be included in the dependency array", remove the Effect Event from your dependencies:
509
+
Se você vir um aviso como "Functions returned from `useEffectEvent` must not be included in the dependency array", remova o Evento de Efeito de suas dependências:
510
510
511
511
```js
512
512
constonSomething=useEffectEvent(() => {
513
513
// ...
514
514
});
515
515
516
-
// 🔴 Wrong: Effect Event in dependencies
516
+
// 🔴 Errado: Evento de Efeito nas dependências
517
517
useEffect(() => {
518
518
onSomething();
519
519
}, [onSomething]);
520
520
521
-
// ✅ Correct: no Effect Event in dependencies
521
+
// ✅ Correto: sem Evento de Efeito nas dependências
522
522
useEffect(() => {
523
523
onSomething();
524
524
}, []);
525
525
```
526
526
527
-
Effect Events are designed to be called from Effects without being listed as dependencies. The linter enforces this because the function identity is [intentionally not stable](#why-are-effect-events-not-stable). Including it would cause your Effect to re-run on every render.
527
+
Eventos de Efeito são projetados para serem chamados de Efeitos sem serem listados como dependências. O linter impõe isso porque a identidade da função é [intencionalmente não estável](#why-are-effect-events-not-stable). Incluí-la faria com que seu Efeito fosse reexecutado a cada renderização.
528
528
529
529
---
530
530
531
-
### I'm getting a lint error: "... is a function created with useEffectEvent, and can only be called from Effects" {/*effect-event-called-outside-effect*/}
531
+
### Estou recebendo um erro de lint: "... is a function created with useEffectEvent, and can only be called from Effects" {/*effect-event-called-outside-effect*/}
532
532
533
-
If you see a warning like "... is a function created with React Hook `useEffectEvent`, and can only be called from Effects and Effect Events", you're calling the function from the wrong place:
533
+
Se você vir um aviso como "... is a function created with React Hook `useEffectEvent`, and can only be called from Effects and Effect Events", você está chamando a função do lugar errado:
534
534
535
535
```js
536
536
constonSomething=useEffectEvent(() => {
537
537
console.log(value);
538
538
});
539
539
540
-
// 🔴 Wrong: calling from event handler
540
+
// 🔴 Errado: chamando de um manipulador de eventos
541
541
functionhandleClick() {
542
542
onSomething();
543
543
}
544
544
545
-
// 🔴 Wrong: passing to child component
545
+
// 🔴 Errado: passando para um componente filho
546
546
return<Child onSomething={onSomething} />;
547
547
548
-
// ✅ Correct: calling from Effect
548
+
// ✅ Correto: chamando de um Efeito
549
549
useEffect(() => {
550
550
onSomething();
551
551
}, []);
552
552
```
553
553
554
-
Effect Events are specifically designed to be used in Effects local to the component they're defined in. If you need a callback for event handlers or to pass to children, use a regular function or `useCallback`instead.
554
+
Eventos de Efeito são especificamente projetados para serem usados em Efeitos locais ao componente em que são definidos. Se você precisar de um callback para manipuladores de eventos ou para passar para filhos, use uma função regular ou `useCallback`em vez disso.
![translate-react-bot[bot]](https://avatars.githubusercontent.com/in/2525171?v=4&size=40){kind=avatar}
0 commit comments