Skip to content

Commit 0448764

Browse files
committed
Translate useOptimistic.md to pt-br
1 parent 7148d38 commit 0448764

File tree

1 file changed

+23
-23
lines changed

1 file changed

+23
-23
lines changed

src/content/reference/react/useOptimistic.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ canary: true
55

66
<Canary>
77

8-
The `useOptimistic` Hook is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
8+
O Hook `useOptimistic` está atualmente disponível apenas nos canais Canary e experimentais do React. Saiba mais sobre [os canais de lançamento do React aqui](/community/versioning-policy#all-release-channels).
99

1010
</Canary>
1111

1212
<Intro>
1313

14-
`useOptimistic` is a React Hook that lets you optimistically update the UI.
14+
`useOptimistic` é um Hook do React que permite atualizar a interface do usuário de forma otimista.
1515

1616
```js
1717
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
@@ -23,13 +23,13 @@ The `useOptimistic` Hook is currently only available in React's Canary and exper
2323

2424
---
2525

26-
## Reference {/*reference*/}
26+
## Referência {/*reference*/}
2727

2828
### `useOptimistic(state, updateFn)` {/*use*/}
2929

30-
`useOptimistic` is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request. You provide a function that takes the current state and the input to the action, and returns the optimistic state to be used while the action is pending.
30+
`useOptimistic` é um Hook do React que permite mostrar um estado diferente enquanto uma ação assíncrona está em andamento. Ele aceita algum estado como argumento e retorna uma cópia desse estado que pode ser diferente durante a duração de uma ação assíncrona, como uma solicitação de rede. Você fornece uma função que recebe o estado atual e a entrada para a ação e retorna o estado otimista a ser usado enquanto a ação está pendente.
3131

32-
This state is called the "optimistic" state because it is usually used to immediately present the user with the result of performing an action, even though the action actually takes time to complete.
32+
Esse estado é chamado de estado "otimista" porque geralmente é usado para apresentar imediatamente ao usuário o resultado de realizar uma ação, mesmo que a ação realmente leve tempo para ser concluída.
3333

3434
```js
3535
import { useOptimistic } from 'react';
@@ -39,35 +39,35 @@ function AppContainer() {
3939
state,
4040
// updateFn
4141
(currentState, optimisticValue) => {
42-
// merge and return new state
43-
// with optimistic value
42+
// mesclar e retornar novo estado
43+
// com valor otimista
4444
}
4545
);
4646
}
4747
```
4848

49-
[See more examples below.](#usage)
49+
[Veja mais exemplos abaixo.](#usage)
5050

51-
#### Parameters {/*parameters*/}
51+
#### Parâmetros {/*parameters*/}
5252

53-
* `state`: the value to be returned initially and whenever no action is pending.
54-
* `updateFn(currentState, optimisticValue)`: a function that takes the current state and the optimistic value passed to `addOptimistic` and returns the resulting optimistic state. It must be a pure function. `updateFn` takes in two parameters. The `currentState` and the `optimisticValue`. The return value will be the merged value of the `currentState` and `optimisticValue`.
53+
* `state`: o valor a ser retornado inicialmente e sempre que nenhuma ação estiver pendente.
54+
* `updateFn(currentState, optimisticValue)`: uma função que recebe o estado atual e o valor otimista passado para `addOptimistic` e retorna o estado otimista resultante. Deve ser uma função pura. `updateFn` aceita dois parâmetros. O `currentState` e o `optimisticValue`. O valor de retorno será o valor mesclado do `currentState` e `optimisticValue`.
5555

5656

57-
#### Returns {/*returns*/}
57+
#### Retornos {/*returns*/}
5858

59-
* `optimisticState`: The resulting optimistic state. It is equal to `state` unless an action is pending, in which case it is equal to the value returned by `updateFn`.
60-
* `addOptimistic`: `addOptimistic` is the dispatching function to call when you have an optimistic update. It takes one argument, `optimisticValue`, of any type and will call the `updateFn` with `state` and `optimisticValue`.
59+
* `optimisticState`: O estado otimista resultante. É igual a `state`, a menos que uma ação esteja pendente, caso em que é igual ao valor retornado por `updateFn`.
60+
* `addOptimistic`: `addOptimistic` é a função de despacho a ser chamada quando você tiver uma atualização otimista. Aceita um argumento, `optimisticValue`, de qualquer tipo e chamará `updateFn` com `state` e `optimisticValue`.
6161

6262
---
6363

64-
## Usage {/*usage*/}
64+
## Uso {/*usage*/}
6565

66-
### Optimistically updating forms {/*optimistically-updating-with-forms*/}
66+
### Atualizando formulários de forma otimista {/*optimistically-updating-with-forms*/}
6767

68-
The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
68+
O Hook `useOptimistic` fornece uma maneira de atualizar de forma otimista a interface do usuário antes que uma operação em segundo plano, como uma solicitação de rede, seja concluída. No contexto de formulários, essa técnica ajuda a fazer os aplicativos parecerem mais responsivos. Quando um usuário envia um formulário, em vez de esperar pela resposta do servidor para refletir as mudanças, a interface é imediatamente atualizada com o resultado esperado.
6969

70-
For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed.
70+
Por exemplo, quando um usuário digita uma mensagem no formulário e clica no botão "Enviar", o Hook `useOptimistic` permite que a mensagem apareça imediatamente na lista com um rótulo "Enviando...", mesmo antes que a mensagem seja realmente enviada para um servidor. Essa abordagem "otimista" dá a impressão de velocidade e responsividade. O formulário então tenta realmente enviar a mensagem em segundo plano. Assim que o servidor confirma que a mensagem foi recebida, o rótulo "Enviando..." é removido.
7171

7272
<Sandpack>
7373

@@ -99,20 +99,20 @@ function Thread({ messages, sendMessage }) {
9999
{optimisticMessages.map((message, index) => (
100100
<div key={index}>
101101
{message.text}
102-
{!!message.sending && <small> (Sending...)</small>}
102+
{!!message.sending && <small> (Enviando...)</small>}
103103
</div>
104104
))}
105105
<form action={formAction} ref={formRef}>
106-
<input type="text" name="message" placeholder="Hello!" />
107-
<button type="submit">Send</button>
106+
<input type="text" name="message" placeholder="Olá!" />
107+
<button type="submit">Enviar</button>
108108
</form>
109109
</>
110110
);
111111
}
112112

113113
export default function App() {
114114
const [messages, setMessages] = useState([
115-
{ text: "Hello there!", sending: false, key: 1 }
115+
{ text: "Olá!", sending: false, key: 1 }
116116
]);
117117
async function sendMessage(formData) {
118118
const sentMessage = await deliverMessage(formData.get("message"));
@@ -142,4 +142,4 @@ export async function deliverMessage(message) {
142142
}
143143
```
144144

145-
</Sandpack>
145+
</Sandpack>

0 commit comments

Comments
 (0)