diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 087f0e26e..3653bf9be 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -1,41 +1,41 @@ --- -title: Keeping Components Pure +title: Mantendo Componentes Puras --- -Some JavaScript functions are *pure.* Pure functions only perform a calculation and nothing more. By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. To get these benefits, though, there are a few rules you must follow. +Algumas funções JavaScript são *purificadas.* Funções puras apenas realizam um cálculo e nada mais. Ao escrever estritamente seus componentes como funções puras, você pode evitar uma classe inteira de bugs confusos e comportamentos imprevisíveis à medida que sua base de código cresce. Para obter esses benefícios, no entanto, há algumas regras que você deve seguir. -* What purity is and how it helps you avoid bugs -* How to keep components pure by keeping changes out of the render phase -* How to use Strict Mode to find mistakes in your components +* O que é pureza e como isso ajuda você a evitar bugs +* Como manter os componentes puros mantendo as mudanças fora da fase de renderização +* Como usar o Modo Estrito para encontrar erros em seus componentes -## Purity: Components as formulas {/*purity-components-as-formulas*/} +## Pureza: Componentes como fórmulas {/*purity-components-as-formulas*/} -In computer science (and especially the world of functional programming), [a pure function](https://wikipedia.org/wiki/Pure_function) is a function with the following characteristics: +Na ciência da computação (e especialmente no mundo da programação funcional), [uma função pura](https://wikipedia.org/wiki/Pure_function) é uma função com as seguintes características: -* **It minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **Ela cuida dos seus próprios assuntos.** Ela não altera nenhum objeto ou variável que existia antes de ser chamada. +* **Mesmos inputs, mesma saída.** Dado os mesmos inputs, uma função pura deve sempre retornar o mesmo resultado. -You might already be familiar with one example of pure functions: formulas in math. +Você pode já estar familiarizado com um exemplo de funções puras: fórmulas em matemática. -Consider this math formula: y = 2x. +Considere esta fórmula matemática: y = 2x. -If x = 2 then y = 4. Always. +Se x = 2, então y = 4. Sempre. -If x = 3 then y = 6. Always. +Se x = 3, então y = 6. Sempre. -If x = 3, y won't sometimes be 9 or –1 or 2.5 depending on the time of day or the state of the stock market. +Se x = 3, y não será às vezes 9 ou –1 ou 2.5 dependendo da hora do dia ou do estado do mercado de ações. -If y = 2x and x = 3, y will _always_ be 6. +Se y = 2x e x = 3, y _sempre_ será 6. -If we made this into a JavaScript function, it would look like this: +Se nós fizermos isso em uma função JavaScript, ela se pareceria com isso: ```js function double(number) { @@ -43,9 +43,9 @@ function double(number) { } ``` -In the above example, `double` is a **pure function.** If you pass it `3`, it will return `6`. Always. +No exemplo acima, `double` é uma **função pura.** Se você passar `3`, ela retornará `6`. Sempre. -React is designed around this concept. **React assumes that every component you write is a pure function.** This means that React components you write must always return the same JSX given the same inputs: +O React é projetado em torno desse conceito. **O React assume que todo componente que você escreve é uma função pura.** Isso significa que os componentes React que você escreve devem sempre retornar o mesmo JSX dado os mesmos inputs: @@ -53,9 +53,9 @@ React is designed around this concept. **React assumes that every component you function Recipe({ drinkers }) { return (
    -
  1. Boil {drinkers} cups of water.
    2. -
  2. Add {drinkers} spoons of tea and {0.5 * drinkers} spoons of spice.
    3. -
  3. Add {0.5 * drinkers} cups of milk to boil and sugar to taste.
    4. +
  4. Ferva {drinkers} xícaras de água.
    5. +
  5. Adicione {drinkers} colheres de chá e {0.5 * drinkers} colheres de especiarias.
    6. +
  6. Adicione {0.5 * drinkers} xícaras de leite para ferver e açúcar a gosto.
); } @@ -63,10 +63,10 @@ function Recipe({ drinkers }) { export default function App() { return (
-

Spiced Chai Recipe

-

For two

+

Receita de Chai Temperado

+

Para dois

-

For a gathering

+

Para uma reunião

); @@ -75,21 +75,21 @@ export default function App() { -When you pass `drinkers={2}` to `Recipe`, it will return JSX containing `2 cups of water`. Always. +Quando você passa `drinkers={2}` para `Recipe`, ele retornará JSX contendo `2 xícaras de água`. Sempre. -If you pass `drinkers={4}`, it will return JSX containing `4 cups of water`. Always. +Se você passar `drinkers={4}`, ele retornará JSX contendo `4 xícaras de água`. Sempre. -Just like a math formula. +Assim como uma fórmula matemática. -You could think of your components as recipes: if you follow them and don't introduce new ingredients during the cooking process, you will get the same dish every time. That "dish" is the JSX that the component serves to React to [render.](/learn/render-and-commit) +Você poderia pensar nos seus componentes como receitas: se você segui-los e não introduzir novos ingredientes durante o processo de cozimento, você obterá o mesmo prato toda vez. Esse "prato" é o JSX que o componente serve ao React para [renderizar.](/learn/render-and-commit) - + -## Side Effects: (un)intended consequences {/*side-effects-unintended-consequences*/} +## Efeitos Colaterais: consequências (não) intencionais {/*side-effects-unintended-consequences*/} -React's rendering process must always be pure. Components should only *return* their JSX, and not *change* any objects or variables that existed before rendering—that would make them impure! +O processo de renderização do React deve sempre ser puro. Os componentes devem apenas *retornar* seu JSX, e não *alterar* nenhum objeto ou variável que existia antes da renderização — isso os tornaria impuros! -Here is a component that breaks this rule: +Aqui está um componente que quebra essa regra: @@ -97,9 +97,9 @@ Here is a component that breaks this rule: let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // Mau: alterando uma variável preexistente! guest = guest + 1; - return

Tea cup for guest #{guest}

; + return

Xícara de chá para o convidado #{guest}

; } export default function TeaSet() { @@ -115,17 +115,17 @@ export default function TeaSet() { -This component is reading and writing a `guest` variable declared outside of it. This means that **calling this component multiple times will produce different JSX!** And what's more, if _other_ components read `guest`, they will produce different JSX, too, depending on when they were rendered! That's not predictable. +Este componente está lendo e escrevendo uma variável `guest` declarada fora dele. Isso significa que **chamar este componente múltiplas vezes produzirá JSX diferente!** E o que é mais, se _outros_ componentes lerem `guest`, eles também produzirão JSX diferente, dependendo de quando foram renderizados! Isso não é previsível. -Going back to our formula y = 2x, now even if x = 2, we cannot trust that y = 4. Our tests could fail, our users would be baffled, planes would fall out of the sky—you can see how this would lead to confusing bugs! +Voltando à nossa fórmula y = 2x, agora mesmo se x = 2, não podemos confiar que y = 4. Nossos testes poderiam falhar, nossos usuários ficariam confusos, aviões cairiam do céu — você pode ver como isso levaria a bugs confusos! -You can fix this component by [passing `guest` as a prop instead](/learn/passing-props-to-a-component): +Você pode corrigir este componente [passando `guest` como uma prop em vez](/learn/passing-props-to-a-component): ```js function Cup({ guest }) { - return

Tea cup for guest #{guest}

; + return

Xícara de chá para o convidado #{guest}

; } export default function TeaSet() { @@ -141,37 +141,37 @@ export default function TeaSet() { -Now your component is pure, as the JSX it returns only depends on the `guest` prop. +Agora seu componente é puro, pois o JSX que ele retorna depende apenas da prop `guest`. -In general, you should not expect your components to be rendered in any particular order. It doesn't matter if you call y = 2x before or after y = 5x: both formulas will resolve independently of each other. In the same way, each component should only "think for itself", and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own! +Em geral, você não deve esperar que seus componentes sejam renderizados em uma ordem particular. Não importa se você chama y = 2x antes ou depois de y = 5x: ambas as fórmulas resolverão independentemente uma da outra. Da mesma forma, cada componente deve apenas "pensar por si mesmo", e não tentar coordenar ou depender de outros durante a renderização. Renderizar é como um exame escolar: cada componente deve calcular o JSX por conta própria! -#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/} +#### Detectando cálculos impuros com o Modo Estrito {/*detecting-impure-calculations-with-strict-mode*/} -Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only. +Embora você ainda possa não ter usado todos eles, no React existem três tipos de inputs que você pode ler durante a renderização: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory) e [context.](/learn/passing-data-deeply-with-context) Você deve sempre tratar esses inputs como somente leitura. -When you want to *change* something in response to user input, you should [set state](/learn/state-a-components-memory) instead of writing to a variable. You should never change preexisting variables or objects while your component is rendering. +Quando você quer *mudar* algo em resposta à entrada do usuário, você deve [definir o estado](/learn/state-a-components-memory) em vez de escrever em uma variável. Você nunca deve alterar variáveis ou objetos preexistentes enquanto seu componente está renderizando. -React offers a "Strict Mode" in which it calls each component's function twice during development. **By calling the component functions twice, Strict Mode helps find components that break these rules.** +O React oferece um "Modo Estrito" no qual ele chama a função de cada componente duas vezes durante o desenvolvimento. **Ao chamar as funções de componentes duas vezes, o Modo Estrito ajuda a encontrar componentes que quebram essas regras.** -Notice how the original example displayed "Guest #2", "Guest #4", and "Guest #6" instead of "Guest #1", "Guest #2", and "Guest #3". The original function was impure, so calling it twice broke it. But the fixed pure version works even if the function is called twice every time. **Pure functions only calculate, so calling them twice won't change anything**--just like calling `double(2)` twice doesn't change what's returned, and solving y = 2x twice doesn't change what y is. Same inputs, same outputs. Always. +Note como o exemplo original exibiu "Convidado #2", "Convidado #4", e "Convidado #6" ao invés de "Convidado #1", "Convidado #2", e "Convidado #3". A função original era impura, então chamá-la duas vezes a quebrou. Mas a versão pura corrigida funciona mesmo se a função for chamada duas vezes a cada vez. **Funções puras apenas calculam, então chamá-las duas vezes não mudará nada** — assim como chamar `double(2)` duas vezes não muda o que é retornado, e resolver y = 2x duas vezes não muda o que y é. Mesmos inputs, mesmas saídas. Sempre. -Strict Mode has no effect in production, so it won't slow down the app for your users. To opt into Strict Mode, you can wrap your root component into ``. Some frameworks do this by default. +O Modo Estrito não tem efeito na produção, então não irá desacelerar o aplicativo para seus usuários. Para optar pelo Modo Estrito, você pode envolver seu componente raiz em ``. Algumas estruturas fazem isso por padrão. -### Local mutation: Your component's little secret {/*local-mutation-your-components-little-secret*/} +### Mutação Local: O pequeno segredo do seu componente {/*local-mutation-your-components-little-secret*/} -In the above example, the problem was that the component changed a *preexisting* variable while rendering. This is often called a **"mutation"** to make it sound a bit scarier. Pure functions don't mutate variables outside of the function's scope or objects that were created before the call—that makes them impure! +No exemplo acima, o problema era que o componente mudou uma variável *preexistente* durante a renderização. Isso é frequentemente chamado de **"mutação"** para torná-lo um pouco mais assustador. Funções puras não mutam variáveis fora do escopo da função ou objetos que foram criados antes da chamada — isso as torna impuras! -However, **it's completely fine to change variables and objects that you've *just* created while rendering.** In this example, you create an `[]` array, assign it to a `cups` variable, and then `push` a dozen cups into it: +No entanto, **é completamente aceitável mudar variáveis e objetos que você *acabou de* criar durante a renderização.** Neste exemplo, você cria um array `[]`, atribui-o a uma variável `cups`, e então `push` uma dúzia de xícaras nele: ```js function Cup({ guest }) { - return

Tea cup for guest #{guest}

; + return

Xícara de chá para o convidado #{guest}

; } export default function TeaGathering() { @@ -185,43 +185,43 @@ export default function TeaGathering() { -If the `cups` variable or the `[]` array were created outside the `TeaGathering` function, this would be a huge problem! You would be changing a *preexisting* object by pushing items into that array. +Se a variável `cups` ou o array `[]` fossem criados fora da função `TeaGathering`, isso seria um grande problema! Você estaria mudando um objeto *preexistente* ao adicionar itens àquele array. -However, it's fine because you've created them *during the same render*, inside `TeaGathering`. No code outside of `TeaGathering` will ever know that this happened. This is called **"local mutation"**—it's like your component's little secret. +No entanto, isso é aceitável porque você os criou *durante a mesma renderização*, dentro de `TeaGathering`. Nenhum código fora de `TeaGathering` saberá que isso aconteceu. Isso é chamado de **"mutação local"** — é como o pequeno segredo do seu componente. -## Where you _can_ cause side effects {/*where-you-_can_-cause-side-effects*/} +## Onde você _pode_ causar efeitos colaterais {/*where-you-_can_-cause-side-effects*/} -While functional programming relies heavily on purity, at some point, somewhere, _something_ has to change. That's kind of the point of programming! These changes—updating the screen, starting an animation, changing the data—are called **side effects.** They're things that happen _"on the side"_, not during rendering. +Enquanto a programação funcional depende fortemente da pureza, em algum momento, em algum lugar, _algo_ precisa mudar. Esse é meio que o ponto da programação! Essas mudanças — atualizar a tela, iniciar uma animação, mudar os dados — são chamadas de **efeitos colaterais.** São coisas que acontecem _"à parte"_, não durante a renderização. -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.** +No React, **efeitos colaterais geralmente pertencem dentro de [manipuladores de eventos.](/learn/responding-to-events)** Manipuladores de eventos são funções que o React executa quando você realiza alguma ação — por exemplo, quando clica em um botão. Mesmo que os manipuladores de eventos sejam definidos *dentro* do seu componente, eles não são executados *durante* a renderização! **Assim, os manipuladores de eventos não precisam ser puros.** -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.** +Se você esgotou todas as outras opções e não consegue encontrar o manipulador de eventos certo para seu efeito colateral, você ainda pode anexá-lo ao seu JSX retornado com uma chamada [`useEffect`](/apis/useeffect) em seu componente. Isso diz ao React para executá-lo mais tarde, após a renderização, quando os efeitos colaterais são permitidos. **No entanto, essa abordagem deve ser seu último recurso.** -When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you! +Quando possível, tente expressar sua lógica apenas com a renderização. Você ficará surpreso com a facilidade que isso pode trazer! -#### Why does React care about purity? {/*why-does-react-care-about-purity*/} +#### Por que o React se importa com a pureza? {/*why-does-react-care-about-purity*/} -Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities: +Escrever funções puras exige um pouco de hábito e disciplina. Mas também desbloqueia oportunidades maravilhosas: -* Your components could run in a different environment—for example, on the server! Since they return the same result for the same inputs, one component can serve many user requests. -* You can improve performance by [skipping rendering](/reference/react/memo) components whose inputs have not changed. This is safe because pure functions always return the same results, so they are safe to cache. -* If some data changes in the middle of rendering a deep component tree, React can restart rendering without wasting time to finish the outdated render. Purity makes it safe to stop calculating at any time. +* Seus componentes poderiam ser executados em um ambiente diferente — por exemplo, no servidor! Como eles retornam o mesmo resultado para os mesmos inputs, um componente pode atender a muitos pedidos de usuários. +* Você pode melhorar o desempenho ao [pular a renderização](/reference/react/memo) de componentes cujos inputs não mudaram. Isso é seguro porque funções puras sempre retornam os mesmos resultados, então elas são seguras para serem cacheadas. +* Se alguns dados mudam no meio da renderização de uma árvore de componentes profunda, o React pode reiniciar a renderização sem perder tempo para terminar a renderização antiga. A pureza torna seguro parar de calcular a qualquer momento. -Every new React feature we're building takes advantage of purity. From data fetching to animations to performance, keeping components pure unlocks the power of the React paradigm. +Cada novo recurso do React que estamos construindo aproveita a pureza. Desde busca de dados até animações e desempenho, manter os componentes puros desbloqueia o poder do paradigma React. -* A component must be pure, meaning: - * **It minds its own business.** It should not change any objects or variables that existed before rendering. - * **Same inputs, same output.** Given the same inputs, a component should always return the same JSX. -* Rendering can happen at any time, so components should not depend on each others' rendering sequence. -* You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, ["set" state](/learn/state-a-components-memory) instead of mutating preexisting objects. -* Strive to express your component's logic in the JSX you return. When you need to "change things", you'll usually want to do it in an event handler. As a last resort, you can `useEffect`. -* Writing pure functions takes a bit of practice, but it unlocks the power of React's paradigm. +* Um componente deve ser puro, significando: + * **Ela cuida dos seus próprios assuntos.** Não deve alterar nenhum objeto ou variável que existia antes da renderização. + * **Mesmos inputs, mesma saída.** Dado os mesmos inputs, um componente deve sempre retornar o mesmo JSX. +* A renderização pode acontecer a qualquer momento, então os componentes não devem depender da sequência de renderização uns dos outros. +* Você não deve mutar nenhum dos inputs que seus componentes usam para renderização. Isso inclui props, state e context. Para atualizar a tela, ["defina" o estado](/learn/state-a-components-memory) em vez de mutar objetos preexistentes. +* Esforce-se para expressar a lógica do seu componente no JSX que você retorna. Quando você precisar "mudar as coisas", geralmente você vai querer fazer isso em um manipulador de eventos. Como último recurso, você pode usar `useEffect`. +* Escrever funções puras exige um pouco de prática, mas desbloqueia o poder do paradigma do React. @@ -229,15 +229,15 @@ Every new React feature we're building takes advantage of purity. From data fetc -#### Fix a broken clock {/*fix-a-broken-clock*/} +#### Conserte um relógio quebrado {/*fix-a-broken-clock*/} -This component tries to set the `

`'s CSS class to `"night"` during the time from midnight to six hours in the morning, and `"day"` at all other times. However, it doesn't work. Can you fix this component? +Este componente tenta definir a classe CSS do `

` para `"night"` durante o tempo da meia-noite até seis horas da manhã, e `"day"` em todos os outros momentos. No entanto, não funciona. Você pode consertar este componente? -You can verify whether your solution works by temporarily changing the computer's timezone. When the current time is between midnight and six in the morning, the clock should have inverted colors! +Você pode verificar se sua solução funciona mudando temporariamente o fuso horário do computador. Quando a hora atual estiver entre meia-noite e seis da manhã, o relógio deve ter cores invertidas! -Rendering is a *calculation*, it shouldn't try to "do" things. Can you express the same idea differently? +Renderização é uma *cálculo*, não deve tentar "fazer" coisas. Você consegue expressar a mesma ideia de forma diferente? @@ -301,7 +301,7 @@ body > * { -You can fix this component by calculating the `className` and including it in the render output: +Você pode consertar este componente calculando a `className` e incluindo-a na saída da renderização: @@ -362,19 +362,19 @@ body > * { -In this example, the side effect (modifying the DOM) was not necessary at all. You only needed to return JSX. +Neste exemplo, o efeito colateral (modificando o DOM) não era necessário. Você só precisava retornar JSX. -#### Fix a broken profile {/*fix-a-broken-profile*/} +#### Conserte um perfil quebrado {/*fix-a-broken-profile*/} -Two `Profile` components are rendered side by side with different data. Press "Collapse" on the first profile, and then "Expand" it. You'll notice that both profiles now show the same person. This is a bug. +Dois componentes `Profile` são renderizados lado a lado com dados diferentes. Pressione "Colapsar" no primeiro perfil e depois "Expandir". Você notará que ambos os perfis agora mostram a mesma pessoa. Este é um bug. -Find the cause of the bug and fix it. +Encontre a causa do bug e conserte-o. -The buggy code is in `Profile.js`. Make sure you read it all from top to bottom! +O código com bug está em `Profile.js`. Certifique-se de lê-lo de cima a baixo! @@ -421,7 +421,7 @@ export default function Panel({ children }) { return (
{open && children}
@@ -475,9 +475,9 @@ h1 { margin: 5px; font-size: 18px; } -The problem is that the `Profile` component writes to a preexisting variable called `currentPerson`, and the `Header` and `Avatar` components read from it. This makes *all three of them* impure and difficult to predict. +O problema é que o componente `Profile` escreve em uma variável preexistente chamada `currentPerson`, e os componentes `Header` e `Avatar` leem dela. Isso torna *todos três* impuros e difíceis de prever. -To fix the bug, remove the `currentPerson` variable. Instead, pass all information from `Profile` to `Header` and `Avatar` via props. You'll need to add a `person` prop to both components and pass it all the way down. +Para corrigir o bug, remova a variável `currentPerson`. Em vez disso, passe todas as informações do `Profile` para `Header` e `Avatar` através de props. Você precisará adicionar uma prop `person` a ambos os componentes e passá-la por completo. @@ -519,7 +519,7 @@ export default function Panel({ children }) { return (
{open && children}
@@ -571,15 +571,15 @@ h1 { margin: 5px; font-size: 18px; } -Remember that React does not guarantee that component functions will execute in any particular order, so you can't communicate between them by setting variables. All communication must happen through props. +Lembre-se de que o React não garante que as funções dos componentes serão executadas em qualquer ordem particular, portanto, você não pode se comunicar entre eles definindo variáveis. Toda comunicação deve ocorrer através de props. -#### Fix a broken story tray {/*fix-a-broken-story-tray*/} +#### Conserte um tray de histórias quebrado {/*fix-a-broken-story-tray*/} -The CEO of your company is asking you to add "stories" to your online clock app, and you can't say no. You've written a `StoryTray` component that accepts a list of `stories`, followed by a "Create Story" placeholder. +O CEO da sua empresa está pedindo para você adicionar "histórias" ao seu aplicativo de relógio online, e você não pode dizer não. Você escreveu um componente `StoryTray` que aceita uma lista de `stories`, seguido por um espaço reservado "Criar História". -You implemented the "Create Story" placeholder by pushing one more fake story at the end of the `stories` array that you receive as a prop. But for some reason, "Create Story" appears more than once. Fix the issue. +Você implementou o espaço reservado "Criar História" adicionando uma história falsa a mais no final do array `stories` que você recebe como prop. Mas, por algum motivo, "Criar História" aparece mais de uma vez. Corrija o problema. @@ -587,7 +587,7 @@ You implemented the "Create Story" placeholder by pushing one more fake story at export default function StoryTray({ stories }) { stories.push({ id: 'create', - label: 'Create Story' + label: 'Criar História' }); return ( @@ -607,16 +607,16 @@ import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; let initialStories = [ - {id: 0, label: "Ankit's Story" }, - {id: 1, label: "Taylor's Story" }, + {id: 0, label: "História de Ankit" }, + {id: 1, label: "História de Taylor" }, ]; export default function App() { let [stories, setStories] = useState([...initialStories]) let time = useTime(); - // HACK: Prevent the memory from growing forever while you read docs. - // We're breaking our own rules here. + // HACK: Impedir que a memória cresça infinitamente enquanto você lê a documentação. + // Estamos quebrando nossas próprias regras aqui. if (stories.length > 100) { stories.length = 100; } @@ -629,7 +629,7 @@ export default function App() { textAlign: 'center', }} > -

It is {time.toLocaleTimeString()} now.

+

É {time.toLocaleTimeString()} agora.

); @@ -675,11 +675,11 @@ li { -Notice how whenever the clock updates, "Create Story" is added *twice*. This serves as a hint that we have a mutation during rendering--Strict Mode calls components twice to make these issues more noticeable. +Note como sempre que o relógio é atualizado, "Criar História" é adicionado *duas vezes*. Isso serve como uma dica de que temos uma mutação durante a renderização - o Modo Estrito chama componentes duas vezes para tornar esses problemas mais perceptíveis. -`StoryTray` function is not pure. By calling `push` on the received `stories` array (a prop!), it is mutating an object that was created *before* `StoryTray` started rendering. This makes it buggy and very difficult to predict. +A função `StoryTray` não é pura. Ao chamar `push` no array `stories` recebido (uma prop!), ela está mutando um objeto que foi criado *antes* do início da renderização de `StoryTray`. Isso a torna cheia de bugs e muito difícil de prever. -The simplest fix is to not touch the array at all, and render "Create Story" separately: +A correção mais simples é não tocar no array de forma alguma e renderizar "Criar História" separadamente: @@ -692,7 +692,7 @@ export default function StoryTray({ stories }) { {story.label} ))} -
  • Create Story
    • +
  • Criar História
    • ); } @@ -703,16 +703,16 @@ import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; let initialStories = [ - {id: 0, label: "Ankit's Story" }, - {id: 1, label: "Taylor's Story" }, + {id: 0, label: "História de Ankit" }, + {id: 1, label: "História de Taylor" }, ]; export default function App() { let [stories, setStories] = useState([...initialStories]) let time = useTime(); - // HACK: Prevent the memory from growing forever while you read docs. - // We're breaking our own rules here. + // HACK: Impedir que a memória cresça infinitamente enquanto você lê a documentação. + // Estamos quebrando nossas próprias regras aqui. if (stories.length > 100) { stories.length = 100; } @@ -725,7 +725,7 @@ export default function App() { textAlign: 'center', }} > -

    It is {time.toLocaleTimeString()} now.

    +

    É {time.toLocaleTimeString()} agora.

    ); @@ -763,19 +763,19 @@ li {     -Alternatively, you could create a _new_ array (by copying the existing one) before you push an item into it: +Alternativamente, você poderia criar um _novo_ array (copiando o existente) antes de adicionar um item a ele: ```js src/StoryTray.js active export default function StoryTray({ stories }) { - // Copy the array! + // Copie o array! let storiesToDisplay = stories.slice(); - // Does not affect the original array: + // Não afeta o array original: storiesToDisplay.push({ id: 'create', - label: 'Create Story' + label: 'Criar História' }); return ( @@ -795,16 +795,16 @@ import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; let initialStories = [ - {id: 0, label: "Ankit's Story" }, - {id: 1, label: "Taylor's Story" }, + {id: 0, label: "História de Ankit" }, + {id: 1, label: "História de Taylor" }, ]; export default function App() { let [stories, setStories] = useState([...initialStories]) let time = useTime(); - // HACK: Prevent the memory from growing forever while you read docs. - // We're breaking our own rules here. + // HACK: Impedir que a memória cresça infinitamente enquanto você lê a documentação. + // Estamos quebrando nossas próprias regras aqui. if (stories.length > 100) { stories.length = 100; } @@ -817,7 +817,7 @@ export default function App() { textAlign: 'center', }} > -

    It is {time.toLocaleTimeString()} now.

    +

    É {time.toLocaleTimeString()} agora.

    ); @@ -855,10 +855,10 @@ li {     -This keeps your mutation local and your rendering function pure. However, you still need to be careful: for example, if you tried to change any of the array's existing items, you'd have to clone those items too. +Isso mantém sua mutação local e sua função de renderização pura. No entanto, você ainda precisa ter cuidado: por exemplo, se você tentasse mudar algum dos itens existentes do array, precisaria clonar esses itens também. -It is useful to remember which operations on arrays mutate them, and which don't. For example, `push`, `pop`, `reverse`, and `sort` will mutate the original array, but `slice`, `filter`, and `map` will create a new one. +É útil lembrar quais operações em arrays os mutam e quais não. Por exemplo, `push`, `pop`, `reverse` e `sort` irão mutar o array original, mas `slice`, `filter` e `map` criarão um novo.     - + \ No newline at end of file