diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index d35071845..b55de6eff 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -1,28 +1,28 @@
 ---
-title: Preserving and Resetting State
+title: Preservando e Reinicializando o Estado
 ---
 
 <Intro>
 
-State is isolated between components. React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.
+O estado é isolado entre os componentes. O React controla qual estado pertence a qual componente com base em sua posição na árvore da UI. Você pode controlar quando preservar o estado e quando reiniciá-lo entre renderizações.
 
 </Intro>
 
 <YouWillLearn>
 
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
+* Quando o React escolhe preservar ou reiniciar o estado
+* Como forçar o React a reiniciar o estado do componente
+* Como chaves e tipos afetam se o estado é preservado
 
 </YouWillLearn>
 
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## O estado está associado a uma posição na árvore de renderização {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+O React constrói [árvores de renderização](learn/understanding-your-ui-as-a-tree#the-render-tree) para a estrutura do componente em sua UI.
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
+Quando você dá um estado a um componente, pode pensar que o estado "vive" dentro do componente. Mas o estado é, na verdade, mantido dentro do React. O React associa cada parte do estado que está armazenando com o componente correto pela posição em que esse componente se encontra na árvore de renderização.
 
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
+Aqui, há apenas uma tag JSX `<Counter />`, mas ela é renderizada em duas posições diferentes:
 
 <Sandpack>
 
@@ -56,7 +56,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -86,23 +86,23 @@ label {
 
 </Sandpack>
 
-Here's how these look as a tree:    
+Veja como isso fica como uma árvore:    
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. Each of the children are labeled 'Counter' and both contain a state bubble labeled 'count' with value 0.">
+<Diagram name="preserving_state_tree" height={248} width={395} alt="Diagrama de uma árvore de componentes React. O nó raiz é rotulado como 'div' e tem dois filhos. Cada um dos filhos é rotulado como 'Counter' e ambos contêm uma bolha de estado rotulada como 'count' com valor 0.">
 
-React tree
+Árvore React
 
 </Diagram>
 
 </DiagramGroup>
 
-**These are two separate counters because each is rendered at its own position in the tree.** You don't usually have to think about these positions to use React, but it can be useful to understand how it works.
+**Esses são dois contadores separados porque cada um é renderizado em sua própria posição na árvore.** Normalmente, você não precisa pensar sobre essas posições ao usar o React, mas pode ser útil entender como funciona.
 
-In React, each component on the screen has fully isolated state. For example, if you render two `Counter` components side by side, each of them will get its own, independent, `score` and `hover` states.
+No React, cada componente na tela tem estado totalmente isolado. Por exemplo, se você renderizar dois componentes `Counter` lado a lado, cada um deles terá seus próprios estados `score` e `hover`, independentes.
 
-Try clicking both counters and notice they don't affect each other:
+Tente clicar em ambos os contadores e perceba que eles não afetam um ao outro:
 
 <Sandpack>
 
@@ -135,7 +135,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -160,21 +160,21 @@ function Counter() {
 
 </Sandpack>
 
-As you can see, when one counter is updated, only the state for that component is updated:
+Como você pode ver, quando um contador é atualizado, apenas o estado daquele componente é atualizado:
 
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 1. The state bubble of the right child is highlighted in yellow to indicate its value has updated.">
+<Diagram name="preserving_state_increment" height={248} width={441} alt="Diagrama de uma árvore de componentes React. O nó raiz é rotulado como 'div' e tem dois filhos. O filho da esquerda é rotulado como 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 0. O filho da direita é rotulado como 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 1. A bolha de estado do filho da direita é destacada em amarelo para indicar que seu valor foi atualizado.">
 
-Updating state
+Atualizando estado
 
 </Diagram>
 
 </DiagramGroup>
 
 
-React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
+O React manterá o estado enquanto você renderizar o mesmo componente na mesma posição na árvore. Para ver isso, incremente ambos os contadores, em seguida, remova o segundo componente desmarcando a caixa "Renderizar o segundo contador" e, em seguida, adicione-o novamente marcando-a:
 
 <Sandpack>
 
@@ -195,7 +195,7 @@ export default function App() {
             setShowB(e.target.checked)
           }}
         />
-        Render the second counter
+        Renderizar o segundo contador
       </label>
     </div>
   );
@@ -218,7 +218,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -248,35 +248,35 @@ label {
 
 </Sandpack>
 
-Notice how the moment you stop rendering the second counter, its state disappears completely. That's because when React removes a component, it destroys its state.
+Perceba como no momento em que você para de renderizar o segundo contador, seu estado desaparece completamente. Isso ocorre porque quando o React remove um componente, ele destrói seu estado.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is missing, and in its place is a yellow 'poof' image, highlighting the component being deleted from the tree.">
+<Diagram name="preserving_state_remove_component" height={253} width={422} alt="Diagrama de uma árvore de componentes React. O nó raiz é rotulado como 'div' e tem dois filhos. O filho da esquerda é rotulado como 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 0. O filho da direita está ausente e em seu lugar há uma imagem amarelo 'poof', destacando o componente sendo deletado da árvore.">
 
-Deleting a component
+Deletando um componente
 
 </Diagram>
 
 </DiagramGroup>
 
-When you tick "Render the second counter", a second `Counter` and its state are initialized from scratch (`score = 0`) and added to the DOM.
+Quando você marca "Renderizar o segundo contador", um segundo `Counter` e seu estado são inicializados do zero (`score = 0`) e adicionados ao DOM.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagram of a tree of React components. The root node is labeled 'div' and has two children. The left child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The entire right child node is highlighted in yellow, indicating that it was just added to the tree.">
+<Diagram name="preserving_state_add_component" height={258} width={500} alt="Diagrama de uma árvore de componentes React. O nó raiz é rotulado como 'div' e tem dois filhos. O filho da esquerda é rotulado como 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 0. O filho da direita é rotulado como 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 0. O nó filho da direita inteiro é destacado em amarelo, indicando que foi adicionado recentemente à árvore.">
 
-Adding a component
+Adicionando um componente
 
 </Diagram>
 
 </DiagramGroup>
 
-**React preserves a component's state for as long as it's being rendered at its position in the UI tree.** If it gets removed, or a different component gets rendered at the same position, React discards its state.
+**O React preserva o estado de um componente enquanto ele é renderizado em sua posição na árvore da UI.** Se ele for removido, ou um componente diferente for renderizado na mesma posição, o React descarta seu estado.
 
-## Same component at the same position preserves state {/*same-component-at-the-same-position-preserves-state*/}
+## O mesmo componente na mesma posição preserva o estado {/*same-component-at-the-same-position-preserves-state*/}
 
-In this example, there are two different `<Counter />` tags:
+Neste exemplo, há duas tags `<Counter />` diferentes:
 
 <Sandpack>
 
@@ -300,7 +300,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Usar estilo elegante
       </label>
     </div>
   );
@@ -326,7 +326,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -361,24 +361,24 @@ label {
 
 </Sandpack>
 
-When you tick or clear the checkbox, the counter state does not get reset. Whether `isFancy` is `true` or `false`, you always have a `<Counter />` as the first child of the `div` returned from the root `App` component:
+Quando você marca ou desmarca a caixa de seleção, o estado do contador não é reinicializado. Se `isFancy` for `true` ou `false`, você sempre terá um `<Counter />` como primeiro filho do componente raiz `App`:
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagram with two sections separated by an arrow transitioning between them. Each section contains a layout of components with a parent labeled 'App' containing a state bubble labeled isFancy. This component has one child labeled 'div', which leads to a prop bubble containing isFancy (highlighted in purple) passed down to the only child. The last child is labeled 'Counter' and contains a state bubble with label 'count' and value 3 in both diagrams. In the left section of the diagram, nothing is highlighted and the isFancy parent state value is false. In the right section of the diagram, the isFancy parent state value has changed to true and it is highlighted in yellow, and so is the props bubble below, which has also changed its isFancy value to true.">
+<Diagram name="preserving_state_same_component" height={461} width={600} alt="Diagrama com duas seções separadas por uma seta transitando entre elas. Cada seção contém um layout de componentes com um pai rotulado como 'App' contendo uma bolha de estado rotulada isFancy. Este componente tem um filho rotulado como 'div', que leva a uma bolha de prop contendo isFancy (destacada em roxo) passada para baixo para o único filho. O último filho é rotulado como 'Counter' e contém uma bolha de estado com rótulo 'count' e valor 3 em ambos os diagramas. Na seção esquerda do diagrama, nada está destacado e o valor do estado pai isFancy é falso. Na seção direita do diagrama, o valor do estado pai isFancy mudou para verdadeiro e está destacado em amarelo, assim como a bolha de props abaixo, que também mudou seu valor isFancy para verdadeiro.">
 
-Updating the `App` state does not reset the `Counter` because `Counter` stays in the same position
+Atualizando o estado do `App` não reinicializa o `Counter` porque `Counter` permanece na mesma posição
 
 </Diagram>
 
 </DiagramGroup>
 
 
-It's the same component at the same position, so from React's perspective, it's the same counter.
+É o mesmo componente na mesma posição, então do ponto de vista do React, é o mesmo contador.
 
 <Pitfall>
 
-Remember that **it's the position in the UI tree--not in the JSX markup--that matters to React!** This component has two `return` clauses with different `<Counter />` JSX tags inside and outside the `if`:
+Lembre-se de que **é a posição na árvore da UI--não na marcação JSX--que importa para o React!** Este componente tem duas cláusulas `return` com diferentes tags JSX `<Counter />` dentro e fora do `if`:
 
 <Sandpack>
 
@@ -399,7 +399,7 @@ export default function App() {
               setIsFancy(e.target.checked)
             }}
           />
-          Use fancy styling
+          Usar estilo elegante
         </label>
       </div>
     );
@@ -415,7 +415,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Usar estilo elegante
       </label>
     </div>
   );
@@ -441,7 +441,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -476,15 +476,15 @@ label {
 
 </Sandpack>
 
-You might expect the state to reset when you tick checkbox, but it doesn't! This is because **both of these `<Counter />` tags are rendered at the same position.** React doesn't know where you place the conditions in your function. All it "sees" is the tree you return.
+Você pode esperar que o estado seja reinicializado ao marcar a caixa, mas não é! Isso acontece porque **ambas as tags `<Counter />` são renderizadas na mesma posição.** O React não sabe onde você coloca as condições em sua função. Tudo o que ele "vê" é a árvore que você retorna.
 
-In both cases, the `App` component returns a `<div>` with `<Counter />` as a first child. To React, these two counters have the same "address": the first child of the first child of the root. This is how React matches them up between the previous and next renders, regardless of how you structure your logic.
+Em ambos os casos, o componente `App` retorna uma `<div>` com `<Counter />` como primeiro filho. Para o React, esses dois contadores têm o mesmo "endereço": o primeiro filho do primeiro filho da raiz. É assim que o React os compara entre as renderizações anterior e seguinte, independentemente de como você estrutura sua lógica.
 
 </Pitfall>
 
-## Different components at the same position reset state {/*different-components-at-the-same-position-reset-state*/}
+## Componentes diferentes na mesma posição reinicializam o estado {/*different-components-at-the-same-position-reset-state*/}
 
-In this example, ticking the checkbox will replace `<Counter>` with a `<p>`:
+Neste exemplo, ao marcar a caixa de seleção, você substituirá `<Counter>` por um `<p>`:
 
 <Sandpack>
 
@@ -496,7 +496,7 @@ export default function App() {
   return (
     <div>
       {isPaused ? (
-        <p>See you later!</p> 
+        <p>Até mais!</p> 
       ) : (
         <Counter /> 
       )}
@@ -508,7 +508,7 @@ export default function App() {
             setIsPaused(e.target.checked)
           }}
         />
-        Take a break
+        Fazer uma pausa
       </label>
     </div>
   );
@@ -531,7 +531,7 @@ function Counter() {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -561,13 +561,13 @@ label {
 
 </Sandpack>
 
-Here, you switch between _different_ component types at the same position. Initially, the first child of the `<div>` contained a `Counter`. But when you swapped in a `p`, React removed the `Counter` from the UI tree and destroyed its state.
+Aqui, você alterna entre tipos de componentes _diferentes_ na mesma posição. Inicialmente, o primeiro filho da `<div>` continha um `Counter`. Mas quando você trocou por um `p`, o React removeu o `Counter` da árvore da UI e destruiu seu estado.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'p', highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt1" height={290} width={753} alt="Diagrama com três seções, com uma seta transitando entre cada seção. A primeira seção contém um componente React rotulado como 'div' com um único filho rotulado 'Counter' contendo uma bolha de estado rotulada como 'count' com valor 3. A seção do meio tem o mesmo pai 'div', mas o componente filho agora foi deletado, indicado por uma imagem amarela 'poof'. A terceira seção tem o mesmo pai 'div' novamente, agora com um novo filho rotulado 'p', destacado em amarelo.">
 
-When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
+Quando `Counter` muda para `p`, o `Counter` é deletado e o `p` é adicionado
 
 </Diagram>
 
@@ -575,15 +575,15 @@ When `Counter` changes to `p`, the `Counter` is deleted and the `p` is added
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'p'. The middle section has the same 'div' parent, but the child component has now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, highlighted in yellow.">
+<Diagram name="preserving_state_diff_pt2" height={290} width={753} alt="Diagrama com três seções, com uma seta transitando entre cada seção. A primeira seção contém um componente React rotulado 'p'. A seção do meio tem o mesmo pai 'div', mas o componente filho agora foi deletado, indicado por uma imagem amarela 'poof'. A terceira seção tem o mesmo pai 'div' novamente, agora com um novo filho rotulado 'Counter' contendo uma bolha de estado rotulada como 'count' com valor 0, destacado em amarelo.">
 
-When switching back, the `p` is deleted and the `Counter` is added
+Quando você alterna de volta, o `p` é deletado e o `Counter` é adicionado
 
 </Diagram>
 
 </DiagramGroup>
 
-Also, **when you render a different component in the same position, it resets the state of its entire subtree.** To see how this works, increment the counter and then tick the checkbox:
+Além disso, **quando você renderiza um componente diferente na mesma posição, isso reinicializa o estado de toda a sua subárvore.** Para ver como isso funciona, incremente o contador e, em seguida, marque a caixa de seleção:
 
 <Sandpack>
 
@@ -611,7 +611,7 @@ export default function App() {
             setIsFancy(e.target.checked)
           }}
         />
-        Use fancy styling
+        Usar estilo elegante
       </label>
     </div>
   );
@@ -637,7 +637,7 @@ function Counter({ isFancy }) {
     >
       <h1>{score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -672,13 +672,13 @@ label {
 
 </Sandpack>
 
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `div` to a `section`. When the child `div` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+O estado do contador é reinicializado quando você clica na caixa de seleção. Embora você renderize um `Counter`, o primeiro filho da `div` muda de `div` para `section`. Quando o filho `div` foi removido do DOM, toda a árvore abaixo dele (incluindo o `Counter` e seu estado) também foi destruída.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'section', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 3. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'div', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt1" height={350} width={794} alt="Diagrama com três seções, com uma seta transitando entre cada seção. A primeira seção contém um componente React rotulado 'div' com um único filho rotulado 'section', que tem um único filho rotulado 'Counter' contendo uma bolha de estado rotulada como 'count' com valor 3. A seção do meio tem o mesmo pai 'div', mas os componentes filhos agora foram deletados, indicado por uma imagem amarela 'poof'. A terceira seção tem o mesmo pai 'div' novamente, agora com um novo filho rotulado 'div', destacado em amarelo, também com um novo filho rotulado 'Counter' contendo uma bolha de estado rotulada como 'count' com valor 0, todos destacados em amarelo.">
 
-When `section` changes to `div`, the `section` is deleted and the new `div` is added
+Quando 'section' muda para 'div', a 'section' é deletada e o novo 'div' é adicionado
 
 </Diagram>
 
@@ -686,21 +686,21 @@ When `section` changes to `div`, the `section` is deleted and the new `div` is a
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a React component labeled 'div' with a single child labeled 'div', which has a single child labeled 'Counter' containing a state bubble labeled 'count' with value 0. The middle section has the same 'div' parent, but the child components have now been deleted, indicated by a yellow 'proof' image. The third section has the same 'div' parent again, now with a new child labeled 'section', highlighted in yellow, also with a new child labeled 'Counter' containing a state bubble labeled 'count' with value 0, all highlighted in yellow.">
+<Diagram name="preserving_state_diff_same_pt2" height={350} width={794} alt="Diagrama com três seções, com uma seta transitando entre cada seção. A primeira seção contém um componente React rotulado 'div' com um único filho rotulado 'div', que tem um único filho rotulado 'Counter' contendo uma bolha de estado rotulada como 'count' com valor 0. A seção do meio tem o mesmo pai 'div', mas os componentes filhos agora foram deletados, indicado por uma imagem amarela 'poof'. A terceira seção tem o mesmo pai 'div' novamente, agora com um novo filho rotulado 'section', destacado em amarelo, também com um novo filho rotulado 'Counter' contendo uma bolha de estado rotulada como 'count' com valor 0, todos destacados em amarelo.">
 
-When switching back, the `div` is deleted and the new `section` is added
+Quando alterna de volta, o 'div' é deletado e a nova 'section' é adicionada
 
 </Diagram>
 
 </DiagramGroup>
 
-As a rule of thumb, **if you want to preserve the state between re-renders, the structure of your tree needs to "match up"** from one render to another. If the structure is different, the state gets destroyed because React destroys state when it removes a component from the tree.
+Como regra geral, **se você quiser preservar o estado entre renderizações, a estrutura da sua árvore precisa "combinar" de uma renderização para outra.** Se a estrutura for diferente, o estado é destruído porque o React destrói o estado quando remove um componente da árvore.
 
 <Pitfall>
 
-This is why you should not nest component function definitions.
+Esse é o motivo pelo qual você não deve aninhar definições de funções de componentes.
 
-Here, the `MyTextField` component function is defined *inside* `MyComponent`:
+Aqui, a função de componente `MyTextField` é definida *dentro* de `MyComponent`:
 
 <Sandpack>
 
@@ -726,7 +726,7 @@ export default function MyComponent() {
       <MyTextField />
       <button onClick={() => {
         setCounter(counter + 1)
-      }}>Clicked {counter} times</button>
+      }}>Clicado {counter} vezes</button>
     </>
   );
 }
@@ -735,13 +735,13 @@ export default function MyComponent() {
 </Sandpack>
 
 
-Every time you click the button, the input state disappears! This is because a *different* `MyTextField` function is created for every render of `MyComponent`. You're rendering a *different* component in the same position, so React resets all state below. This leads to bugs and performance problems. To avoid this problem, **always declare component functions at the top level, and don't nest their definitions.**
+Toda vez que você clica no botão, o estado de entrada desaparece! Isso acontece porque uma *nova* função `MyTextField` é criada a cada renderização de `MyComponent`. Você está renderizando um *componente diferente* na mesma posição, então o React reinicializa todo o estado abaixo disso. Isso leva a bugs e problemas de desempenho. Para evitar esse problema, **declare sempre funções de componentes no nível superior e não aninhe suas definições.**
 
 </Pitfall>
 
-## Resetting state at the same position {/*resetting-state-at-the-same-position*/}
+## Reinicializando o estado na mesma posição {/*resetting-state-at-the-same-position*/}
 
-By default, React preserves state of a component while it stays at the same position. Usually, this is exactly what you want, so it makes sense as the default behavior. But sometimes, you may want to reset a component's state. Consider this app that lets two players keep track of their scores during each turn:
+Por padrão, o React preserva o estado de um componente enquanto ele permanece na mesma posição. Normalmente, isso é exatamente o que você deseja, então faz sentido como o comportamento padrão. Mas às vezes, você pode querer reinicializar o estado de um componente. Considere este aplicativo que permite que dois jogadores mantenham o controle de suas pontuações durante cada turno:
 
 <Sandpack>
 
@@ -760,7 +760,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Próximo jogador!
       </button>
     </div>
   );
@@ -783,7 +783,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -811,19 +811,19 @@ h1 {
 
 </Sandpack>
 
-Currently, when you change the player, the score is preserved. The two `Counter`s appear in the same position, so React sees them as *the same* `Counter` whose `person` prop has changed.
+Atualmente, quando você muda de jogador, a pontuação é preservada. Os dois `Counter`s aparecem na mesma posição, então o React os vê como *o mesmo* `Counter` cujo prop `person` mudou.
 
-But conceptually, in this app they should be two separate counters. They might appear in the same place in the UI, but one is a counter for Taylor, and another is a counter for Sarah.
+Mas, conceitualmente, neste aplicativo, eles deveriam ser dois contadores separados. Eles podem aparecer no mesmo lugar na UI, mas um é um contador para Taylor e outro é um contador para Sarah.
 
-There are two ways to reset state when switching between them:
+Existem duas maneiras de reinicializar o estado ao alternar entre eles:
 
-1. Render components in different positions
-2. Give each component an explicit identity with `key`
+1. Renderizar componentes em posições diferentes
+2. Dar a cada componente uma identidade explícita com `key`
 
 
-### Option 1: Rendering a component in different positions {/*option-1-rendering-a-component-in-different-positions*/}
+### Opção 1: Renderizando um componente em posições diferentes {/*option-1-rendering-a-component-in-different-positions*/}
 
-If you want these two `Counter`s to be independent, you can render them in two different positions:
+Se você quer que esses dois `Counter`s sejam independentes, pode renderizá-los em duas posições diferentes:
 
 <Sandpack>
 
@@ -843,7 +843,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Próximo jogador!
       </button>
     </div>
   );
@@ -866,7 +866,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -894,42 +894,50 @@ h1 {
 
 </Sandpack>
 
-* Initially, `isPlayerA` is `true`. So the first position contains `Counter` state, and the second one is empty.
-* When you click the "Next player" button the first position clears but the second one now contains a `Counter`.
+* Inicialmente, `isPlayerA` é `true`. Assim, a primeira posição contém o estado do `Counter`, e a segunda está vazia.
+* Quando você clica no botão "Próximo jogador", a primeira posição é limpa, mas a segunda agora contém um `Counter`.
 
 <DiagramGroup>
 
-<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The only child, arranged to the left, is labeled Counter with a state bubble labeled 'count' and value 0. All of the left child is highlighted in yellow, indicating it was added.">
+<Diagram name="preserving_state_diff_position_p1" height={375} width={504} alt="Diagrama com uma árvore de componentes React. O pai é rotulado 'Scoreboard' com uma bolha de estado rotulada isPlayerA com valor 'true'. O único filho, arranjado à esquerda, é rotulado como Counter com uma bolha de estado rotulada como 'count' com valor 0. Todos os filhos à esquerda estão destacados em amarelo, indicando que foram adicionados.">
 
-Initial state
+Estado inicial
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'false'. The state bubble is highlighted in yellow, indicating that it has changed. The left child is replaced with a yellow 'poof' image indicating that it has been deleted and there is a new child on the right, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0.">
+</DiagramGroup>
+
+<DiagramGroup>
 
-Clicking "next"
+<Diagram name="preserving_state_diff_position_p2" height={375} width={504} alt="Diagrama com uma árvore de componentes React. O pai é rotulado 'Scoreboard' com uma bolha de estado rotulada isPlayerA com valor 'false'. A bolha de estado está destacada em amarelo, indicando que mudou. O filho à esquerda é substituído por uma imagem amarela 'poof' indicando que foi deletado e há um novo filho à direita, destacado em amarelo, indicando que foi adicionado. O novo filho é rotulado como 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 0.">
+
+Clicando em "próximo"
 
 </Diagram>
 
-<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagram with a tree of React components. The parent is labeled 'Scoreboard' with a state bubble labeled isPlayerA with value 'true'. The state bubble is highlighted in yellow, indicating that it has changed. There is a new child on the left, highlighted in yellow indicating that it was added. The new child is labeled 'Counter' and contains a state bubble labeled 'count' with value 0. The right child is replaced with a yellow 'poof' image indicating that it has been deleted.">
+</DiagramGroup>
+
+<DiagramGroup>
+
+<Diagram name="preserving_state_diff_position_p3" height={375} width={504} alt="Diagrama com uma árvore de componentes React. O pai é rotulado 'Scoreboard' com uma bolha de estado rotulada isPlayerA com valor 'true'. A bolha de estado está destacada em amarelo, indicando que mudou. Existe um novo filho à esquerda, destacado em amarelo, indicando que foi adicionado. O novo filho é rotulado 'Counter' e contém uma bolha de estado rotulada como 'count' com valor 0. O filho à direita é substituído por uma imagem amarela 'poof' indicando que foi deletado.">
 
-Clicking "next" again
+Clicando em "próximo" novamente
 
 </Diagram>
 
 </DiagramGroup>
 
-Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
+Cada estado do `Counter` é destruído toda vez que ele é removido do DOM. Essa é a razão pela qual eles são reinicializados toda vez que você clica no botão.
 
-This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
+Essa solução é conveniente quando você tem apenas alguns componentes independentes renderizados no mesmo lugar. Neste exemplo, você tem apenas dois, então não é um problema renderizá-los separadamente no JSX.
 
-### Option 2: Resetting state with a key {/*option-2-resetting-state-with-a-key*/}
+### Opção 2: Reinicializando o estado com uma chave {/*option-2-resetting-state-with-a-key*/}
 
-There is also another, more generic, way to reset a component's state.
+Há também outra maneira mais genérica de reinicializar o estado de um componente.
 
-You might have seen `key`s when [rendering lists.](/learn/rendering-lists#keeping-list-items-in-order-with-key) Keys aren't just for lists! You can use keys to make React distinguish between any components. By default, React uses order within the parent ("first counter", "second counter") to discern between components. But keys let you tell React that this is not just a *first* counter, or a *second* counter, but a specific counter--for example, *Taylor's* counter. This way, React will know *Taylor's* counter wherever it appears in the tree!
+Você pode ter visto `keys` ao [renderizar listas.](/learn/rendering-lists#keeping-list-items-in-order-with-key) As chaves não são apenas para listas! Você pode usar chaves para fazer o React distinguir entre quaisquer componentes. Por padrão, o React usa a ordem dentro do pai ("primeiro contador", "segundo contador") para discernir entre os componentes. Mas as chaves permitem que você diga ao React que este não é apenas um *primeiro* contador, ou um *segundo* contador, mas um contador específico--por exemplo, o contador *de Taylor*. Dessa forma, o React saberá qual é o contador *de Taylor* onde quer que apareça na árvore!
 
-In this example, the two `<Counter />`s don't share state even though they appear in the same place in JSX:
+Neste exemplo, os dois `<Counter />` não compartilham estado, mesmo que apareçam no mesmo lugar no JSX:
 
 <Sandpack>
 
@@ -948,7 +956,7 @@ export default function Scoreboard() {
       <button onClick={() => {
         setIsPlayerA(!isPlayerA);
       }}>
-        Next player!
+        Próximo jogador!
       </button>
     </div>
   );
@@ -971,7 +979,7 @@ function Counter({ person }) {
     >
       <h1>{person}'s score: {score}</h1>
       <button onClick={() => setScore(score + 1)}>
-        Add one
+        Adicionar um
       </button>
     </div>
   );
@@ -999,7 +1007,7 @@ h1 {
 
 </Sandpack>
 
-Switching between Taylor and Sarah does not preserve the state. This is because **you gave them different `key`s:**
+Alternar entre Taylor e Sarah não preserva o estado. Isso acontece porque **você deu a eles `key`s diferentes:**
 
 ```js
 {isPlayerA ? (
@@ -1009,19 +1017,19 @@ Switching between Taylor and Sarah does not preserve the state. This is because
 )}
 ```
 
-Specifying a `key` tells React to use the `key` itself as part of the position, instead of their order within the parent. This is why, even though you render them in the same place in JSX, React sees them as two different counters, and so they will never share state. Every time a counter appears on the screen, its state is created. Every time it is removed, its state is destroyed. Toggling between them resets their state over and over.
+Especificar uma `key` diz ao React para usar a `key` em si como parte da posição, em vez de sua ordem dentro do pai. É por isso que, mesmo que você os renderize no mesmo lugar no JSX, o React os vê como dois contadores diferentes, e assim eles nunca compartilharão estado. Cada vez que um contador aparece na tela, seu estado é criado. Cada vez que é removido, seu estado é destruído. Alternar entre eles reinicializa seu estado repetidamente.
 
 <Note>
 
-Remember that keys are not globally unique. They only specify the position *within the parent*.
+Lembre-se de que as chaves não são globalmente únicas. Elas apenas especificam a posição *dentro do pai*.
 
 </Note>
 
-### Resetting a form with a key {/*resetting-a-form-with-a-key*/}
+### Reinicializando um formulário com uma chave {/*resetting-a-form-with-a-key*/}
 
-Resetting state with a key is particularly useful when dealing with forms.
+Reinicializar o estado com uma chave é particularmente útil quando se trata de formulários.
 
-In this chat app, the `<Chat>` component contains the text input state:
+Neste aplicativo de chat, o componente `<Chat>` contém o estado da entrada de texto:
 
 <Sandpack>
 
@@ -1084,11 +1092,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'Converse com ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>Enviar para {contact.email}</button>
     </section>
   );
 }
@@ -1116,17 +1124,17 @@ textarea {
 
 </Sandpack>
 
-Try entering something into the input, and then press "Alice" or "Bob" to choose a different recipient. You will notice that the input state is preserved because the `<Chat>` is rendered at the same position in the tree.
+Tente digitar algo na entrada e, em seguida, pressione "Alice" ou "Bob" para escolher um destinatário diferente. Você notará que o estado de entrada é preservado porque o `<Chat>` é renderizado na mesma posição na árvore.
 
-**In many apps, this may be the desired behavior, but not in a chat app!** You don't want to let the user send a message they already typed to a wrong person due to an accidental click. To fix it, add a `key`:
+**Em muitos aplicativos, esse pode ser o comportamento desejado, mas não em um aplicativo de chat!** Você não quer que o usuário envie uma mensagem que ele já digitou para uma pessoa errada devido a um clique acidental. Para consertar isso, adicione uma `key`:
 
 ```js
 <Chat key={to.id} contact={to} />
 ```
 
-This ensures that when you select a different recipient, the `Chat` component will be recreated from scratch, including any state in the tree below it. React will also re-create the DOM elements instead of reusing them.
+Isso garante que, ao selecionar um destinatário diferente, o componente `Chat` seja recriado do zero, incluindo qualquer estado na árvore abaixo dele. O React também recriará os elementos DOM em vez de reutilizá-los.
 
-Now switching the recipient always clears the text field:
+Agora, alternar o destinatário sempre limpa o campo de texto:
 
 <Sandpack>
 
@@ -1189,11 +1197,11 @@ export default function Chat({ contact }) {
     <section className="chat">
       <textarea
         value={text}
-        placeholder={'Chat to ' + contact.name}
+        placeholder={'Converse com ' + contact.name}
         onChange={e => setText(e.target.value)}
       />
       <br />
-      <button>Send to {contact.email}</button>
+      <button>Enviar para {contact.email}</button>
     </section>
   );
 }
@@ -1223,24 +1231,24 @@ textarea {
 
 <DeepDive>
 
-#### Preserving state for removed components {/*preserving-state-for-removed-components*/}
+#### Preservando o estado para componentes removidos {/*preserving-state-for-removed-components*/}
 
-In a real chat app, you'd probably want to recover the input state when the user selects the previous recipient again. There are a few ways to keep the state "alive" for a component that's no longer visible:
+Em um aplicativo de chat real, você provavelmente vai querer recuperar o estado de entrada quando o usuário selecionar novamente o destinatário anterior. Existe uma série de maneiras de manter o estado "vivo" para um componente que não está mais visível:
 
-- You could render _all_ chats instead of just the current one, but hide all the others with CSS. The chats would not get removed from the tree, so their local state would be preserved. This solution works great for simple UIs. But it can get very slow if the hidden trees are large and contain a lot of DOM nodes.
-- You could [lift the state up](/learn/sharing-state-between-components) and hold the pending message for each recipient in the parent component. This way, when the child components get removed, it doesn't matter, because it's the parent that keeps the important information. This is the most common solution.
-- You might also use a different source in addition to React state. For example, you probably want a message draft to persist even if the user accidentally closes the page. To implement this, you could have the `Chat` component initialize its state by reading from the [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), and save the drafts there too.
+- Você poderia renderizar _todos_ os chats em vez de apenas o atual, mas ocultar todos os outros com CSS. Os chats não seriam removidos da árvore, então seu estado local seria preservado. Essa solução funciona muito bem para UIs simples. Mas pode ficar muito devagar se as árvores ocultas forem grandes e conterem muitos nós DOM.
+- Você poderia [elevar o estado](/learn/sharing-state-between-components) e manter a mensagem pendente para cada destinatário no componente pai. Dessa forma, quando os componentes filhos forem removidos, não importa, porque é o pai que mantém as informações importantes. Esta é a solução mais comum.
+- Você também pode usar uma fonte diferente além do estado do React. Por exemplo, você pode querer que um rascunho de mensagem persista mesmo que o usuário feche acidentalmente a página. Para implementar isso, você poderia fazer o componente `Chat` inicializar seu estado lendo do [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) e salvar os rascunhos lá também.
 
-No matter which strategy you pick, a chat _with Alice_ is conceptually distinct from a chat _with Bob_, so it makes sense to give a `key` to the `<Chat>` tree based on the current recipient.
+Não importa qual estratégia você escolha, um chat _com Alice_ é conceitualmente distinto de um chat _com Bob_, então faz sentido dar uma `key` à árvore `<Chat>` com base no destinatário atual.
 
 </DeepDive>
 
 <Recap>
 
-- React keeps state for as long as the same component is rendered at the same position.
-- State is not kept in JSX tags. It's associated with the tree position in which you put that JSX.
-- You can force a subtree to reset its state by giving it a different key.
-- Don't nest component definitions, or you'll reset state by accident.
+- O React mantém o estado enquanto o mesmo componente é renderizado na mesma posição.
+- O estado não é mantido nas tags JSX. Está associado à posição da árvore em que você colocou esse JSX.
+- Você pode forçar uma subárvore a reinicializar seu estado dando uma chave diferente a ela.
+- Não aninhe definições de componentes, ou você reinicializará o estado acidentalmente.
 
 </Recap>
 
@@ -1248,9 +1256,9 @@ No matter which strategy you pick, a chat _with Alice_ is conceptually distinct
 
 <Challenges>
 
-#### Fix disappearing input text {/*fix-disappearing-input-text*/}
+#### Corrigir o desaparecimento do texto da entrada {/*fix-disappearing-input-text*/}
 
-This example shows a message when you press the button. However, pressing the button also accidentally resets the input. Why does this happen? Fix it so that pressing the button does not reset the input text.
+Este exemplo mostra uma mensagem quando você pressiona o botão. No entanto, pressionar o botão também redefine acidentalmente a entrada. Por que isso acontece? Corrija para que pressionar o botão não redefina o texto de entrada.
 
 <Sandpack>
 
@@ -1262,11 +1270,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Dica: Sua cidade favorita?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Esconder dica</button>
       </div>
     );
   }
@@ -1275,7 +1283,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>Mostrar dica</button>
     </div>
   );
 }
@@ -1299,9 +1307,9 @@ textarea { display: block; margin: 10px 0; }
 
 <Solution>
 
-The problem is that `Form` is rendered in different positions. In the `if` branch, it is the second child of the `<div>`, but in the `else` branch, it is the first child. Therefore, the component type in each position changes. The first position changes between holding a `p` and a `Form`, while the second position changes between holding a `Form` and a `button`. React resets the state every time the component type changes.
+O problema é que o `Form` está sendo renderizado em posições diferentes. Na cláusula `if`, ele é o segundo filho da `<div>`, mas na cláusula `else`, ele é o primeiro filho. Portanto, o tipo de componente em cada posição muda. A primeira posição muda entre segurar um `p` e um `Form`, enquanto a segunda posição muda entre segurar um `Form` e um `button`. O React redefine o estado toda vez que o tipo de componente muda.
 
-The easiest solution is to unify the branches so that `Form` always renders in the same position:
+A solução mais simples é unificar as cláusulas para que `Form` seja sempre renderizado na mesma posição:
 
 <Sandpack>
 
@@ -1313,17 +1321,17 @@ export default function App() {
   return (
     <div>
       {showHint &&
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Dica: Sua cidade favorita?</i></p>
       }
       <Form />
       {showHint ? (
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Esconder dica</button>
       ) : (
         <button onClick={() => {
           setShowHint(true);
-        }}>Show hint</button>
+        }}>Mostrar dica</button>
       )}
     </div>
   );
@@ -1347,7 +1355,7 @@ textarea { display: block; margin: 10px 0; }
 </Sandpack>
 
 
-Technically, you could also add `null` before `<Form />` in the `else` branch to match the `if` branch structure:
+Tecnicamente, você também poderia adicionar `null` antes de `<Form />` no ramo `else` para combinar com a estrutura do ramo `if`:
 
 <Sandpack>
 
@@ -1359,11 +1367,11 @@ export default function App() {
   if (showHint) {
     return (
       <div>
-        <p><i>Hint: Your favorite city?</i></p>
+        <p><i>Dica: Sua cidade favorita?</i></p>
         <Form />
         <button onClick={() => {
           setShowHint(false);
-        }}>Hide hint</button>
+        }}>Esconder dica</button>
       </div>
     );
   }
@@ -1373,7 +1381,7 @@ export default function App() {
       <Form />
       <button onClick={() => {
         setShowHint(true);
-      }}>Show hint</button>
+      }}>Mostrar dica</button>
     </div>
   );
 }
@@ -1395,21 +1403,21 @@ textarea { display: block; margin: 10px 0; }
 
 </Sandpack>
 
-This way, `Form` is always the second child, so it stays in the same position and keeps its state. But this approach is much less obvious and introduces a risk that someone else will remove that `null`.
+Dessa forma, `Form` é sempre o segundo filho, então fica na mesma posição e mantém seu estado. Mas essa abordagem é muito menos óbvia e apresenta o risco de que alguém remoção esse `null`.
 
 </Solution>
 
-#### Swap two form fields {/*swap-two-form-fields*/}
+#### Trocar dois campos de formulário {/*swap-two-form-fields*/}
 
-This form lets you enter first and last name. It also has a checkbox controlling which field goes first. When you tick the checkbox, the "Last name" field will appear before the "First name" field.
+Este formulário permite que você insira primeiro e sobrenome. Ele também tem uma caixa de seleção controlando qual campo vai primeiro. Quando você marca a caixa de seleção, o campo "Sobrenome" aparecerá antes do campo "Primeiro nome".
 
-It almost works, but there is a bug. If you fill in the "First name" input and tick the checkbox, the text will stay in the first input (which is now "Last name"). Fix it so that the input text *also* moves when you reverse the order.
+Funciona quase, mas há um bug. Se você preencher a entrada "Primeiro nome" e marcar a caixa de seleção, o texto ficará na primeira entrada (que agora é "Sobrenome"). Corrija para que o texto da entrada *também* se mova quando você inverter a ordem.
 
-<Hint>
+<Dica>
 
-It seems like for these fields, their position within the parent is not enough. Is there some way to tell React how to match up the state between re-renders?
+Parece que, para esses campos, a posição deles dentro do pai não é suficiente. Existe alguma maneira de dizer ao React como combinar o estado entre renderizações?
 
-</Hint>
+</Dica>
 
 <Sandpack>
 
@@ -1425,22 +1433,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      Inverter ordem
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field label="Last name" /> 
-        <Field label="First name" />
+        <Field label="Sobrenome" /> 
+        <Field label="Primeiro nome" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field label="First name" /> 
-        <Field label="Last name" />
+        <Field label="Primeiro nome" /> 
+        <Field label="Sobrenome" />
         {checkbox}
       </>
     );    
@@ -1471,7 +1479,7 @@ label { display: block; margin: 10px 0; }
 
 <Solution>
 
-Give a `key` to both `<Field>` components in both `if` and `else` branches. This tells React how to "match up" the correct state for either `<Field>` even if their order within the parent changes:
+Dê uma `key` para ambos os componentes `<Field>` em ambos os ramos `if` e `else`. Isso diz ao React como "combinar" o estado correto para cada `<Field>` mesmo que sua ordem dentro do pai mude:
 
 <Sandpack>
 
@@ -1487,22 +1495,22 @@ export default function App() {
         checked={reverse}
         onChange={e => setReverse(e.target.checked)}
       />
-      Reverse order
+      Inverter ordem
     </label>
   );
   if (reverse) {
     return (
       <>
-        <Field key="lastName" label="Last name" /> 
-        <Field key="firstName" label="First name" />
+        <Field key="lastName" label="Sobrenome" /> 
+        <Field key="firstName" label="Primeiro nome" />
         {checkbox}
       </>
     );
   } else {
     return (
       <>
-        <Field key="firstName" label="First name" /> 
-        <Field key="lastName" label="Last name" />
+        <Field key="firstName" label="Primeiro nome" /> 
+        <Field key="lastName" label="Sobrenome" />
         {checkbox}
       </>
     );    
@@ -1533,11 +1541,11 @@ label { display: block; margin: 10px 0; }
 
 </Solution>
 
-#### Reset a detail form {/*reset-a-detail-form*/}
+#### Reinicializar um formulário de detalhes {/*reset-a-detail-form*/}
 
-This is an editable contact list. You can edit the selected contact's details and then either press "Save" to update it, or "Reset" to undo your changes.
+Esta é uma lista de contatos editável. Você pode editar os detalhes do contato selecionado e depois pressionar "Salvar" para atualizá-lo ou "Reinicializar" para desfazer suas alterações.
 
-When you select a different contact (for example, Alice), the state updates but the form keeps showing the previous contact's details. Fix it so that the form gets reset when the selected contact changes.
+Quando você seleciona um contato diferente (por exemplo, Alice), o estado é atualizado, mas o formulário continua mostrando os detalhes do contato anterior. Corrija para que o formulário seja reinicializado quando o contato selecionado mudar.
 
 <Sandpack>
 
@@ -1629,7 +1637,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        Nome:{' '}
         <input
           type="text"
           value={name}
@@ -1652,13 +1660,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        Salvar
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        Reinicializar
       </button>
     </section>
   );
@@ -1689,7 +1697,7 @@ button {
 
 <Solution>
 
-Give `key={selectedId}` to the `EditContact` component. This way, switching between different contacts will reset the form:
+Dê `key={selectedId}` para o componente `EditContact`. Dessa forma, alternar entre diferentes contatos irá reinicializar o formulário:
 
 <Sandpack>
 
@@ -1782,7 +1790,7 @@ export default function EditContact({ initialData, onSave }) {
   return (
     <section>
       <label>
-        Name:{' '}
+        Nome:{' '}
         <input
           type="text"
           value={name}
@@ -1805,13 +1813,13 @@ export default function EditContact({ initialData, onSave }) {
         };
         onSave(updatedData);
       }}>
-        Save
+        Salvar
       </button>
       <button onClick={() => {
         setName(initialData.name);
         setEmail(initialData.email);
       }}>
-        Reset
+        Reinicializar
       </button>
     </section>
   );
@@ -1842,15 +1850,15 @@ button {
 
 </Solution>
 
-#### Clear an image while it's loading {/*clear-an-image-while-its-loading*/}
+#### Limpar uma imagem enquanto está carregando {/*clear-an-image-while-its-loading*/}
 
-When you press "Next", the browser starts loading the next image. However, because it's displayed in the same `<img>` tag, by default you would still see the previous image until the next one loads. This may be undesirable if it's important for the text to always match the image. Change it so that the moment you press "Next", the previous image immediately clears.
+Quando você pressiona "Próximo", o navegador começa a carregar a próxima imagem. No entanto, como ela é exibida na mesma tag `<img>`, por padrão, você ainda verá a imagem anterior até a próxima ser carregada. Isso pode ser indesejável se for importante que o texto sempre corresponda à imagem. Mude para que, no momento em que você pressionar "Próximo", a imagem anterior seja imediatamente limpa.
 
-<Hint>
+<Dica>
 
-Is there a way to tell React to re-create the DOM instead of reusing it?
+Há alguma maneira de dizer ao React para recriar o DOM em vez de reutilizá-lo?
 
-</Hint>
+</Dica>
 
 <Sandpack>
 
@@ -1873,10 +1881,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        Próximo
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        Imagem {index + 1} de {images.length}
       </h3>
       <img src={image.src} />
       <p>
@@ -1887,25 +1895,25 @@ export default function Gallery() {
 }
 
 let images = [{
-  place: 'Penang, Malaysia',
+  place: 'Penang, Malásia',
   src: 'https://i.imgur.com/FJeJR8M.jpg'
 }, {
-  place: 'Lisbon, Portugal',
+  place: 'Lisboa, Portugal',
   src: 'https://i.imgur.com/dB2LRbj.jpg'
 }, {
-  place: 'Bilbao, Spain',
+  place: 'Bilbao, Espanha',
   src: 'https://i.imgur.com/z08o2TS.jpg'
 }, {
   place: 'Valparaíso, Chile',
   src: 'https://i.imgur.com/Y3utgTi.jpg'
 }, {
-  place: 'Schwyz, Switzerland',
+  place: 'Schwyz, Suíça',
   src: 'https://i.imgur.com/JBbMpWY.jpg'
 }, {
-  place: 'Prague, Czechia',
+  place: 'Praga, República Checa',
   src: 'https://i.imgur.com/QwUKKmF.jpg'
 }, {
-  place: 'Ljubljana, Slovenia',
+  place: 'Liubliana, Eslovênia',
   src: 'https://i.imgur.com/3aIiwfm.jpg'
 }];
 ```
@@ -1918,7 +1926,7 @@ img { width: 150px; height: 150px; }
 
 <Solution>
 
-You can provide a `key` to the `<img>` tag. When that `key` changes, React will re-create the `<img>` DOM node from scratch. This causes a brief flash when each image loads, so it's not something you'd want to do for every image in your app. But it makes sense if you want to ensure the image always matches the text.
+Você pode fornecer uma `key` para a tag `<img>`. Quando essa `key` muda, o React recriará o nó DOM `<img>` do zero. Isso causa um breve flash quando cada imagem carrega, então não é algo que você gostaria de fazer para cada imagem em seu aplicativo. Mas faz sentido se você quiser garantir que a imagem sempre corresponda ao texto.
 
 <Sandpack>
 
@@ -1941,10 +1949,10 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleClick}>
-        Next
+        Próximo
       </button>
       <h3>
-        Image {index + 1} of {images.length}
+        Imagem {index + 1} de {images.length}
       </h3>
       <img key={image.src} src={image.src} />
       <p>
@@ -1955,25 +1963,25 @@ export default function Gallery() {
 }
 
 let images = [{
-  place: 'Penang, Malaysia',
+  place: 'Penang, Malásia',
   src: 'https://i.imgur.com/FJeJR8M.jpg'
 }, {
-  place: 'Lisbon, Portugal',
+  place: 'Lisboa, Portugal',
   src: 'https://i.imgur.com/dB2LRbj.jpg'
 }, {
-  place: 'Bilbao, Spain',
+  place: 'Bilbao, Espanha',
   src: 'https://i.imgur.com/z08o2TS.jpg'
 }, {
   place: 'Valparaíso, Chile',
   src: 'https://i.imgur.com/Y3utgTi.jpg'
 }, {
-  place: 'Schwyz, Switzerland',
+  place: 'Schwyz, Suíça',
   src: 'https://i.imgur.com/JBbMpWY.jpg'
 }, {
-  place: 'Prague, Czechia',
+  place: 'Praga, República Checa',
   src: 'https://i.imgur.com/QwUKKmF.jpg'
 }, {
-  place: 'Ljubljana, Slovenia',
+  place: 'Liubliana, Eslovênia',
   src: 'https://i.imgur.com/3aIiwfm.jpg'
 }];
 ```
@@ -1986,11 +1994,11 @@ img { width: 150px; height: 150px; }
 
 </Solution>
 
-#### Fix misplaced state in the list {/*fix-misplaced-state-in-the-list*/}
+#### Corrigir estado deslocado na lista {/*fix-misplaced-state-in-the-list*/}
 
-In this list, each `Contact` has state that determines whether "Show email" has been pressed for it. Press "Show email" for Alice, and then tick the "Show in reverse order" checkbox. You will notice that it's _Taylor's_ email that is expanded now, but Alice's--which has moved to the bottom--appears collapsed.
+Nesta lista, cada `Contact` tem um estado que determina se "Mostrar email" foi pressionado para ele. Pressione "Mostrar email" para Alice e, em seguida, marque a caixa "Mostrar em ordem inversa". Você notará que é o email _de Taylor_ que agora está expandido, mas o de Alice--que se deslocou para a parte inferior--aparece colapsado.
 
-Fix it so that the expanded state is associated with each contact, regardless of the chosen ordering.
+Corrija para que o estado expandido seja associado a cada contato, independentemente da ordem escolhida.
 
 <Sandpack>
 
@@ -2016,7 +2024,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Mostrar em ordem inversa
       </label>
       <ul>
         {displayedContacts.map((contact, i) =>
@@ -2050,7 +2058,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? 'Esconder' : 'Mostrar'} email
       </button>
     </>
   );
@@ -2080,16 +2088,16 @@ button {
 
 <Solution>
 
-The problem is that this example was using index as a `key`:
+O problema é que este exemplo estava usando o índice como `key`:
 
 ```js
 {displayedContacts.map((contact, i) =>
   <li key={i}>
 ```
 
-However, you want the state to be associated with _each particular contact_.
+No entanto, você quer que o estado seja associado a _cada contato específico_.
 
-Using the contact ID as a `key` instead fixes the issue:
+Usar o ID do contato como `key` resolve o problema:
 
 <Sandpack>
 
@@ -2115,7 +2123,7 @@ export default function ContactList() {
             setReverse(e.target.checked)
           }}
         />{' '}
-        Show in reverse order
+        Mostrar em ordem inversa
       </label>
       <ul>
         {displayedContacts.map(contact =>
@@ -2149,7 +2157,7 @@ export default function Contact({ contact }) {
       <button onClick={() => {
         setExpanded(!expanded);
       }}>
-        {expanded ? 'Hide' : 'Show'} email
+        {expanded ? 'Esconder' : 'Mostrar'} email
       </button>
     </>
   );
@@ -2177,8 +2185,6 @@ button {
 
 </Sandpack>
 
-State is associated with the tree position. A `key` lets you specify a named position instead of relying on order.
-
-</Solution>
+O estado está associado à posição da árvore. Uma `key` permite que você especifique uma posição nomeada em vez de depender da ordem.
 
-</Challenges>
+</Solution>
\ No newline at end of file