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/blog/2024/12/05/react-19.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -41,9 +41,9 @@ Para obter uma lista de mudanças significativas, consulte o [Guia de Atualizaç
41
41
42
42
### Ações {/*actions*/}
43
43
44
-
Um caso de uso comum em aplicativos React é realizar uma mutação de dados e, em seguida, atualizar o estado em resposta. Por exemplo, quando um usuário envia um formulário para alterar seu nome, você fará uma solicitação de API e, em seguida, lidará com a resposta. No passado, você precisaria lidar manualmente com estados pendentes, erros, atualizações otimistas e solicitações sequenciais.
44
+
Um caso de uso comum em aplicativos React é realizar uma mutação de dados e, em seguida, atualizar o state em resposta. Por exemplo, quando um usuário envia um formulário para alterar seu nome, você fará uma solicitação de API e, em seguida, lidará com a resposta. No passado, você precisaria lidar manualmente com estados pendentes, erros, atualizações otimistas e solicitações sequenciais.
45
45
46
-
Por exemplo, você pode lidar com o estado pendente e de erro em `useState`:
46
+
Por exemplo, você pode lidar com o state pendente e de erro em `useState`:
47
47
48
48
```js
49
49
// Antes das Ações
@@ -77,10 +77,10 @@ function UpdateName({}) {
77
77
78
78
No React 19, estamos adicionando suporte para o uso de funções assíncronas em transições para lidar com estados pendentes, erros, formulários e atualizações otimistas automaticamente.
79
79
80
-
Por exemplo, você pode usar `useTransition` para lidar com o estado pendente por você:
80
+
Por exemplo, você pode usar `useTransition` para lidar com o state pendente por você:
81
81
82
82
```js
83
-
// Usando estado pendente das Ações
83
+
// Usando state pendente das Ações
84
84
functionUpdateName({}) {
85
85
const [name, setName] =useState("");
86
86
const [error, setError] =useState(null);
@@ -109,15 +109,15 @@ function UpdateName({}) {
109
109
}
110
110
```
111
111
112
-
A transição assíncrona definirá imediatamente o estado`isPending` como true, fará as solicitações assíncronas e definirá `isPending` como false após quaisquer transições. Isso permite que você mantenha a interface do usuário atual responsiva e interativa enquanto os dados estão mudando.
112
+
A transição assíncrona definirá imediatamente o state`isPending` como true, fará as solicitações assíncronas e definirá `isPending` como false após quaisquer transições. Isso permite que você mantenha a interface do usuário atual responsiva e interativa enquanto os dados estão mudando.
113
113
114
114
<Note>
115
115
116
116
#### Por convenção, as funções que usam transições assíncronas são chamadas de "Ações". {/*by-convention-functions-that-use-async-transitions-are-called-actions*/}
117
117
118
118
As Ações gerenciam o envio de dados automaticamente:
119
119
120
-
-**Estado pendente**: As Ações fornecem um estado pendente que começa no início de uma solicitação e redefine automaticamente quando a atualização final do estado é confirmada.
120
+
-**Estado pendente**: As Ações fornecem um state pendente que começa no início de uma solicitação e redefine automaticamente quando a atualização final do state é confirmada.
121
121
-**Atualizações otimistas**: As Ações oferecem suporte ao novo hook [`useOptimistic`](#new-hook-optimistic-updates) para que você possa mostrar aos usuários feedback instantâneo enquanto as solicitações são enviadas.
122
122
-**Tratamento de erros**: As Ações fornecem tratamento de erros para que você possa exibir Error Boundaries quando uma solicitação falhar e reverter as atualizações otimistas para seu valor original automaticamente.
123
123
-**Formulários**: Os elementos `<form>` agora oferecem suporte à passagem de funções para as propriedades `action` e `formAction`. A passagem de funções para as propriedades `action` usa Ações por padrão e redefine o formulário automaticamente após o envio.
`useActionState` aceita uma função (a "Ação") e retorna uma Ação encapsulada para chamar. Isso funciona porque as Ações se compõem. Quando a Ação encapsulada é chamada, `useActionState` retornará o último resultado da Ação como `data` e o estado pendente da Ação como `pending`.
179
+
`useActionState` aceita uma função (a "Ação") e retorna uma Ação encapsulada para chamar. Isso funciona porque as Ações se compõem. Quando a Ação encapsulada é chamada, `useActionState` retornará o último resultado da Ação como `data` e o state pendente da Ação como `pending`.
180
180
181
181
<Note>
182
182
@@ -188,7 +188,7 @@ Veja [#28491](https://github.com/facebook/react/pull/28491) para obter mais info
188
188
189
189
Para obter mais informações, consulte a documentação para [`useActionState`](/reference/react/useActionState).
190
190
191
-
### React DOM: `<form>` Ações {/*form-actions*/}
191
+
### React DOM: Ações de `<form>` {/*form-actions*/}
192
192
193
193
As Ações também são integradas aos novos recursos do `<form>` do React 19 para `react-dom`. Adicionamos suporte para passar funções como propriedades `action` e `formAction` dos elementos `<form>`, `<input>` e `<button>` para enviar formulários automaticamente com Ações:
194
194
@@ -219,7 +219,7 @@ Para obter mais informações, consulte a documentação do `react-dom` para [`u
219
219
220
220
### Novo hook: `useOptimistic` {/*new-hook-optimistic-updates*/}
221
221
222
-
Outro padrão comum de UI ao realizar uma mutação de dados é mostrar o estado final de forma otimista enquanto a solicitação assíncrona está em andamento. No React 19, estamos adicionando um novo hook chamado `useOptimistic` para facilitar isso:
222
+
Outro padrão comum de UI ao realizar uma mutação de dados é mostrar o state final de forma otimista enquanto a solicitação assíncrona está em andamento. No React 19, estamos adicionando um novo hook chamado `useOptimistic` para facilitar isso:
0 commit comments