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/learn/you-might-not-need-an-effect.md
+12-12Lines changed: 12 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -198,7 +198,7 @@ Perceba que, neste exemplo, somente o componente externo `ProfilePage` é export
198
198
199
199
### Ajustando algum state quando uma prop é alterada {/*adjusting-some-state-when-a-prop-changes*/}
200
200
201
-
Às vezes, você pode querer redefinir ou ajustar uma parte do estado em uma alteração de prop, mas não todo ele.
201
+
Às vezes, você pode querer redefinir ou ajustar algum state específico, sem afetar outros, quando uma prop for alterada.
202
202
203
203
Este componente `List` recebe uma lista de `items` como uma prop e mantém o item selecionado na variável de estado `selection`. Você deseja redefinir a `selection` para `null` sempre que a prop `items` receber um array diferente:
204
204
@@ -277,7 +277,7 @@ function ProductPage({ product, addToCart }) {
277
277
}
278
278
```
279
279
280
-
Esse Effect é desnecessário. Ele também provavelmente causará bugs. Por exemplo, digamos que seu aplicativo "lembre" o carrinho de compras entre os recarregamentos da página. Se você adicionar um produto ao carrinho uma vez e atualizar a página, a notificação aparecerá novamente. Ela continuará aparecendo toda vez que você atualizar a página desse produto. Isso ocorre porque `product.isInCart` já será `true` no carregamento da página, de modo que o Effect acima chamará `showNotification()`.
280
+
Esse Effect é desnecessário. Ele também provavelmente causará bugs. Por exemplo, digamos que sua aplicação "lembre" o carrinho de compras entre os recarregamentos da página. Se você adicionar um produto ao carrinho uma vez e atualizar a página, a notificação aparecerá novamente. Ela continuará aparecendo toda vez que você atualizar a página desse produto. Isso ocorre porque `product.isInCart` já será `true` no carregamento da página, de modo que o Effect acima chamará `showNotification()`.
281
281
282
282
**Quando não tiver certeza se algum código deve estar em um Effect ou em um manipulador de eventos, pergunte a si mesmo *por que* esse código precisa ser executado. Use Effects somente para códigos que devem ser executados *porque* o componente foi exibido ao usuário.** Neste exemplo, a notificação deve aparecer porque o usuário *pressionou o botão*, não porque a página foi exibida! Exclua o Effect e coloque a lógica compartilhada em uma função chamada de ambos os manipuladores de evento:
283
283
@@ -305,7 +305,7 @@ Isso remove o Effect desnecessário e corrige o bug.
305
305
306
306
### Enviando uma solicitação POST {/*sending-a-post-request*/}
307
307
308
-
Esse componente `Form` envia dois tipos de solicitações POST. Ele envia um evento de analytics quando é montado. Quando você preencher o formulário e clicar no botão Submit, ele enviará uma solicitação POST para o endpoint `/api/register`:
308
+
Este componente `Form` envia dois tipos de solicitações POST. Ele envia um evento de analytics quando é montado. Quando você preencher o formulário e clicar no botão Submit, ele enviará uma requisição POST ao endpoint `/api/register`:
309
309
310
310
```js {5-8,10-16}
311
311
functionForm() {
@@ -362,7 +362,7 @@ Ao decidir se deve colocar alguma lógica em um manipulador de evento ou em um E
362
362
363
363
### Cadeias de processamentos {/*chains-of-computations*/}
364
364
365
-
Às vezes, você pode se sentir tentado a encadear Effects que ajustam uma parte do estado com base em outro estado:
365
+
Às vezes, você pode se sentir tentado a encadear Effects que ajustam um state com base em outro state:
366
366
367
367
```js {7-29}
368
368
functionGame() {
@@ -452,7 +452,7 @@ Lembre-se de que, dentro dos manipuladores de evento, [o estado se comporta como
452
452
453
453
Em alguns casos, você *não pode* calcular o próximo state diretamente no manipulador de evento. Por exemplo, imagine um formulário com vários menus suspensos em que as opções do próximo menu dependem do valor selecionado do menu anterior. Nesse caso, uma cadeia de Effects é apropriada porque você está sincronizando com a rede.
454
454
455
-
### Inicialização do aplicativo {/*initializing-the-application*/}
455
+
### Inicialização da aplicação {/*initializing-the-application*/}
456
456
457
457
Algumas lógicas devem ser executadas apenas uma vez quando o aplicativo for carregado.
458
458
@@ -471,7 +471,7 @@ function App() {
471
471
472
472
No entanto, você descobrirá rapidamente que ele [é executado duas vezes no desenvolvimento.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development) Isso pode causar problemas - por exemplo, talvez ele invalide o token de autenticação porque a função não foi projetada para ser chamada duas vezes. Em geral, seus componentes devem ser resistentes à remontagem. Isso inclui seu componente `App` de nível superior.
473
473
474
-
Embora talvez ele nunca seja remontado na prática em produção, seguir as mesmas restrições em todos os componentes facilita a movimentação e a reutilização do código. Se alguma lógica precisar ser executada *uma vez por carregamento de aplicativo* em vez de *uma vez por montagem de componente*, adicione uma variável no nível mais alto para registrar se ela já foi executada:
474
+
Embora talvez ele nunca seja remontado na prática em produção, seguir as mesmas restrições em todos os componentes facilita a movimentação e a reutilização do código. Se alguma lógica precisar ser executada *uma vez por carregamento da aplicação* em vez de *uma vez por montagem de componente*, adicione uma variável no nível mais alto para registrar se ela já foi executada:
475
475
476
476
```js {1,5-6,10}
477
477
let didInit =false;
@@ -480,7 +480,7 @@ function App() {
480
480
useEffect(() => {
481
481
if (!didInit) {
482
482
didInit =true;
483
-
// ✅ Só é executado uma vez por execução do aplicativo
483
+
// ✅ Só é executado uma vez por execução da aplicação
484
484
loadDataFromLocalStorage();
485
485
checkAuthToken();
486
486
}
@@ -489,11 +489,11 @@ function App() {
489
489
}
490
490
```
491
491
492
-
Você também pode executá-lo durante a inicialização do módulo e antes de o aplicativo ser renderizado:
492
+
Você também pode executá-lo durante a inicialização do módulo e antes de a aplicação ser renderizada:
493
493
494
494
```js {1,5}
495
495
if (typeofwindow!=='undefined') { // Verifica se estamos executando no navegador.
496
-
// ✅ Só é executado uma vez por execução do aplicativo
496
+
// ✅ Só é executado uma vez por execução da aplicação
497
497
checkAuthToken();
498
498
loadDataFromLocalStorage();
499
499
}
@@ -503,7 +503,7 @@ function App() {
503
503
}
504
504
```
505
505
506
-
O código no nível mais alto é executado uma vez quando o componente é importado, mesmo que ele não seja renderizado. Para evitar lentidão ou comportamento inesperado ao importar componentes arbitrários, não use esse padrão em excesso. Mantenha a lógica de inicialização de todo o aplicativo em módulos de componentes raiz como `App.js` ou no ponto de entrada do aplicativo.
506
+
O código no nível mais alto é executado uma vez quando o componente é importado, mesmo que ele não seja renderizado. Para evitar lentidão ou comportamento inesperado ao importar componentes arbitrários, não use esse padrão em excesso. Mantenha a lógica de inicialização de toda a aplicação em módulos de componentes raiz como `App.js` ou no ponto de entrada da aplicação.
507
507
508
508
### Notificar componentes pai sobre alterações de estado {/*notifying-parent-components-about-state-changes*/}
509
509
@@ -693,7 +693,7 @@ Essa abordagem é menos propensa a erros do que a sincronização manual de dado
693
693
694
694
### Buscando dados {/*fetching-data*/}
695
695
696
-
Muitos aplicativos usam o Effects para iniciar a busca de dados. É bastante comum escrever um Effect de busca de dados como este:
696
+
Muitas aplicações usam o Effects para iniciar a busca de dados. É bastante comum escrever um Effect de busca de dados como este:
697
697
698
698
```js {5-10}
699
699
functionSearchResults({ query }) {
@@ -788,7 +788,7 @@ function useData(url) {
788
788
789
789
Provavelmente, você também desejará adicionar alguma lógica para tratamento de erros e para verificar se o conteúdo está sendo carregado. Você mesmo pode criar um Hook como esse ou usar uma das muitas soluções já disponíveis no ecossistema React. **Embora isso, por si só, não seja tão eficiente quanto usar o mecanismo de busca de dados integrado de um framework, mover a lógica de busca de dados para um Hook personalizado facilitará a adoção de uma estratégia eficiente de busca de dados posteriormente.**
790
790
791
-
Em geral, sempre que tiver que recorrer à criação de Effects, fique atento para quando puder extrair uma parte da funcionalidade em um Hook personalizado com uma API mais declarativa e específica, como o `useData` acima. Quanto menos chamadas `useEffect` brutas você tiver em seus componentes, mais fácil será manter seu aplicativo.
791
+
Em geral, sempre que tiver que recorrer à criação de Effects, fique atento para quando puder extrair uma parte da funcionalidade em um Hook personalizado com uma API mais declarativa e específica, como o `useData` acima. Quanto menos chamadas `useEffect` brutas você tiver em seus componentes, mais fácil será manter sua aplicação.
0 commit comments