Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/learn/adding-interactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Leia **[Respondendo a Eventos](/learn/responding-to-events)** para aprender como

Componentes necessitam de alterar frequentemente o que está na tela como resultado de uma interação. O campo de entrada será atualizado ao digitar em um formulário, a imagem exibida será trocada ao clicar em "próxima" em um carrossel de imagens, um produto é colocado no carrinho de compras ao clicar em "comprar". Componentes precisam "memorizar" informações: o valor de entrada ou a imagem atual, assim como o carrinho de compras, por exemplo. Em React, este tipo de memória específica de componente é chamada de *state.*

É possível adicionar states a componentes com um Hook [`useState`](/apis/usestate). Hooks são funções especiais que possibilitam que seus componentes utilizem recursos do React (como o state, por exemplo). O Hook `useState` possibilita a declaração de uma variável de estado. Este recurso recebe o state inicial e retorna um par de valores: o state atual e uma função setter, que possibilita atualizá-lo.
É possível adicionar states a componentes com um Hook [`useState`](/reference/react/useState). Hooks são funções especiais que possibilitam que seus componentes utilizem recursos do React (como o state, por exemplo). O Hook `useState` possibilita a declaração de uma variável de estado. Este recurso recebe o state inicial e retorna um par de valores: o state atual e uma função setter, que possibilita atualizá-lo.

```js
const [index, setIndex] = useState(0);
Expand Down Expand Up @@ -799,4 +799,4 @@ Leia **[Atualizando Arrays no State](/learn/updating-arrays-in-state)** para apr

Vá até [Respondendo a Eventos](/learn/responding-to-events) para começar a ler este capítulo página por página!

Ou, se você já está familiarizado com estes tópicos, por que não ler sobre [Gerenciando o Estado](/learn/managing-state)?
Ou, se você já está familiarizado com estes tópicos, por que não ler sobre [Gerenciando o Estado](/learn/managing-state)?
2 changes: 1 addition & 1 deletion src/content/learn/keeping-components-pure.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ While functional programming relies heavily on purity, at some point, somewhere,

In React, **side effects usually belong inside [event handlers.](/learn/responding-to-events)** Event handlers are functions that React runs when you perform some action—for example, when you click a button. Even though event handlers are defined *inside* your component, they don't run *during* rendering! **So event handlers don't need to be pure.**

If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/apis/useeffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.**
If you've exhausted all other options and can't find the right event handler for your side effect, you can still attach it to your returned JSX with a [`useEffect`](/reference/react/useEffect) call in your component. This tells React to execute it later, after rendering, when side effects are allowed. **However, this approach should be your last resort.**

When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you!

Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ TypeScript é uma forma popular de adicionar definições de tipos à bases de c

* [TypeScript com Componentes React](/learn/typescript#typescript-with-react-components)
* [Exemplos de tipagem com hooks](/learn/typescript#example-hooks)
* [Tipos úteis do `@types/react`](/learn/typescript/#useful-types)
* [Conteúdo adicional para aprendizagem](/learn/typescript/#further-learning)
* [Tipos úteis do `@types/react`](/learn/typescript#useful-types)
* [Conteúdo adicional para aprendizagem](/learn/typescript#further-learning)

</YouWillLearn>

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/you-might-not-need-an-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,7 @@ function Form() {

Vamos aplicar os mesmos critérios do exemplo anterior.

A solicitação POST de análise deve permanecer em um Effect. Isso ocorre porque o _motivo_ para enviar o evento de análise é que o formulário foi exibido. (Ele seria disparado duas vezes no desenvolvimento, mas [veja aqui](/learn/synchronizing-with-effects#enviar-análises) para saber como lidar com isso).
A solicitação POST de análise deve permanecer em um Effect. Isso ocorre porque o _motivo_ para enviar o evento de análise é que o formulário foi exibido. (Ele seria disparado duas vezes no desenvolvimento, mas [veja aqui](/learn/synchronizing-with-effects#sending-analytics) para saber como lidar com isso).

No entanto, a solicitação POST `/api/register` não é causada pelo formulário que está sendo _exibido_. Você só deseja enviar a solicitação em um momento específico: quando o usuário pressiona o botão. Isso só deve acontecer _naquela interação específica_. Exclua o segundo Effect e mova essa solicitação POST para o manipulador de evento:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,7 @@ function ProfilePage() {
}
```

Se ocorrer um erro no componente `Posts` ou em algum lugar dentro dele, o React [tentará se recuperar dele:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
Se ocorrer um erro no componente `Posts` ou em algum lugar dentro dele, o React [tentará se recuperar dele:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)

1. Ele emitirá o fallback de carregamento para o `<Suspense>` mais próximo (`PostsGlimmer`) no HTML.
2. Ele "desistirá" de tentar renderizar o conteúdo `Posts` no servidor.
Expand Down Expand Up @@ -605,4 +605,4 @@ setTimeout(() => {
}, 10000);
```

O React irá descarregar os fallbacks de carregamento restantes como HTML e tentará renderizar o restante no cliente.
O React irá descarregar os fallbacks de carregamento restantes como HTML e tentará renderizar o restante no cliente.
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@ function ProfilePage() {
}
```

Se um erro ocorrer no componente `Posts` ou em algum lugar dentro dele, o React [tentará se recuperar disso:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
Se um erro ocorrer no componente `Posts` ou em algum lugar dentro dele, o React [tentará se recuperar disso:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)

1. Ele emitirá o fallback de carregamento para o limite `<Suspense>` mais próximo (`PostsGlimmer`) no HTML.
2. Ele "desistirá" de tentar renderizar o conteúdo `Posts` no servidor.
Expand Down Expand Up @@ -620,4 +620,4 @@ async function handler(request) {
// ...
```

React descartará os fallbacks de carregamento restantes como HTML e tentará renderizar o restante no cliente.
React descartará os fallbacks de carregamento restantes como HTML e tentará renderizar o restante no cliente.
6 changes: 3 additions & 3 deletions src/content/reference/react/Component.md
Original file line number Diff line number Diff line change
Expand Up @@ -786,7 +786,7 @@ Se você definir `UNSAFE_componentWillReceiveProps`, o React irá chamá-lo quan

[Veja exemplos de como migrar de lifecycles inseguros.](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props)

#### Parâmetros {/*unsafe_componentwillreceiveprops-parameters*/}```text
#### Parâmetros {/*unsafe_componentwillreceiveprops-parameters*/}```text {/*parâmetros-unsafe_componentwillreceiveprops-parameterstext*/}
- `nextProps`: As próximas props que o componente está prestes a receber de seu componente pai. Compare `nextProps` com [`this.props`](#props) para determinar o que mudou.
- `nextContext`: O próximo contexto que o componente está prestes a receber do provedor mais próximo. Compare `nextContext` com [`this.context`](#context) para determinar o que mudou. Disponível somente se você especificar [`static contextType`](#static-contexttype).

Expand All @@ -806,7 +806,7 @@ Se você definir `UNSAFE_componentWillReceiveProps`, o React irá chamá-lo quan

<Note>

Chamar [`setState`](#setstate) dentro de `UNSAFE_componentWillReceiveProps` em um componente de classe para "ajustar" o estado é equivalente a [chamar a função `set` de `useState` durante a renderização](/reference/react/useState#armazenando-informa%C3%A7%C3%B5es-de-renderiza%C3%A7%C3%B5es-anteriores) em um componente de função.
Chamar [`setState`](#setstate) dentro de `UNSAFE_componentWillReceiveProps` em um componente de classe para "ajustar" o estado é equivalente a [chamar a função `set` de `useState` durante a renderização](/reference/react/useState#storing-information-from-previous-renders) em um componente de função.

</Note>

Expand Down Expand Up @@ -1013,7 +1013,7 @@ Derivar o estado leva a um código prolixo e dificulta a reflexão sobre seus co

<Note>

Implementar `static getDerivedStateFromProps` em um componente de classe é equivalente a [chamar a função `set` de `useState` durante a renderização](/reference/react/useState#armazenando-informa%C3%A7%C3%B5es-de-renderiza%C3%A7%C3%B5es-anteriores) em um componente de função.
Implementar `static getDerivedStateFromProps` em um componente de classe é equivalente a [chamar a função `set` de `useState` durante a renderização](/reference/react/useState#storing-information-from-previous-renders) em um componente de função.

</Note>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/Suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -2002,7 +2002,7 @@ No entanto, agora imagine que você está navegando entre dois perfis de usuári

---

### Fornecendo um fallback para erros no servidor e conteúdo somente do cliente {/*providing-a-fallback-for-server-errors-and-client-only-content*/}
### Fornecendo um fallback para erros no servidor e conteúdo somente do cliente {/*providing-a-fallback-for-server-errors-and-server-only-content*/}

Se você usar uma das [APIs de renderização no servidor de streaming](/reference/react-dom/server) (ou um framework que dependa delas), React também usará seus limites de `<Suspense>` para lidar com erros no servidor. Se um componente lançar um erro no servidor, o React não abortará a renderização do servidor. Em vez disso, ele encontrará o componente `<Suspense>` mais próximo acima dele e incluirá seu fallback (como um spinner) no HTML do servidor gerado. O usuário verá um spinner no início.

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useImperativeHandle.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ A partir do React 19, [`ref` está disponível como uma prop.](/blog/2024/12/05/

### Expondo um identificador de referência customizado ao componente pai {/*exposing-a-custom-ref-handle-to-the-parent-component*/}

Por padrão, os componentes não expõem seus nós DOM aos componentes pai. Por exemplo, se você deseja que o componente pai de `MyInput` [tenha acesso](/learn/manipulating-the-dom-with-refs) ao nó DOM `<input>`, você deve optar por [`forwardRef`:](/referência/react/forwardRef)
Por padrão, os componentes não expõem seus nós DOM aos componentes pai. Por exemplo, se você deseja que o componente pai de `MyInput` [tenha acesso](/learn/manipulating-the-dom-with-refs) ao nó DOM `<input>`, você deve optar por [`forwardRef`:](/reference/react/forwardRef)

Para expor um nó DOM ao elemento pai, passe a prop `ref` para o nó.

Expand Down
6 changes: 3 additions & 3 deletions src/content/reference/react/useState.md
Original file line number Diff line number Diff line change
Expand Up @@ -626,7 +626,7 @@ img { width: 200px; height: 200px; }

<Solution />

#### Lista (array) {/*list-array*/}```md
#### Lista (array) {/*list-array*/}```md {/*lista-array-list-arraymd*/}
Neste exemplo, a variável de estado `todos` contém um array. Cada manipulador de botões chama `setTodos` com a próxima versão desse array. A sintaxe de espalhamento `[...todos]`, `todos.map()` e `todos.filter()` garante que o array de estado seja substituído em vez de mutado.

<Sandpack>
Expand Down Expand Up @@ -883,7 +883,7 @@ function ItemList({ artworks, onToggle }) {

---

### Evitando recriar o estado inicial {/*evitando-recriar-o-estado-inicial*/}
### Evitando recriar o estado inicial {/*avoiding-recreating-the-initial-state*/}

React salva o estado inicial uma vez e o ignora nas próximas renderizações.

Expand Down Expand Up @@ -1070,7 +1070,7 @@ button { display: block; margin-bottom: 20px; }

---

### Armazenando informações das renderizações anteriores {/*armazenando-informacoes-das-renderizacoes-anteriores*/}
### Armazenando informações das renderizações anteriores {/*storing-information-from-previous-renders*/}

Normalmente, você atualizará o estado em manipuladores de eventos. No entanto, em casos raros, você pode querer ajustar o estado em resposta à renderização -- por exemplo, você pode querer alterar uma variável de estado quando uma prop for alterada.

Expand Down
4 changes: 2 additions & 2 deletions src/content/reference/react/useSyncExternalStore.md
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ A função `getServerSnapshot` é semelhante a `getSnapshot`, mas ela é executa
* Ele é executado no servidor ao gerar o HTML.
* Ele é executado no cliente durante a [hidratação](/reference/react-dom/client/hydrateRoot), ou seja, quando o React pega o HTML do servidor e o torna interativo.

Isso permite que você forneça o valor inicial do snapshot, que será usado antes que o aplicativo se torne interativo. Se não houver um valor inicial significativo para a renderização do servidor, omita este argumento para [forçar a renderização no cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
Isso permite que você forneça o valor inicial do snapshot, que será usado antes que o aplicativo se torne interativo. Se não houver um valor inicial significativo para a renderização do servidor, omita este argumento para [forçar a renderização no cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)

<Note>

Expand Down Expand Up @@ -445,4 +445,4 @@ function ChatIndicator({ userId }) {

// ...
}
```
```
2 changes: 1 addition & 1 deletion src/content/reference/rsc/use-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ Para simplicidade, falamos sobre Componentes do Servidor, mas os mesmos princíp
* Componentes do Servidor não podem usar a maioria dos Hooks.
* Quando os Componentes do Servidor são renderizados, sua saída é essencialmente uma lista de componentes para o cliente renderizar. Componentes do Servidor não persistem em memória após a renderização e não podem ter seu próprio estado.

### Tipos serializáveis retornados por Componentes do Servidor {/*serializable-types*/}
### Tipos serializáveis retornados por Componentes do Servidor {/*passing-props-from-server-to-client-components*/}

Como em qualquer aplicativo React, os componentes pai passam dados para os componentes filhos. Como eles são renderizados em ambientes diferentes, passar dados de um Componente do Servidor para um Componente do Cliente requer consideração extra.

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/rsc/use-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ Notavelmente, estes não são suportados:

Os valores de retorno serializáveis suportados são os mesmos que os [props serializáveis](/reference/rsc/use-client#passing-props-from-server-to-client-components) para um Client Component de limite.

Os valores de retorno serializáveis suportados são os mesmos que os [props serializáveis](/reference/rsc/use-client#serializable-types) para um Client Component de limite.
Os valores de retorno serializáveis suportados são os mesmos que os [props serializáveis](/reference/rsc/use-client#passing-props-from-server-to-client-components) para um Client Component de limite.

## Uso {/*usage*/}

Expand Down