From 3eb0d705d0dae74f96562ff871dff029e1299e45 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 11:07:01 -0300 Subject: [PATCH 1/5] Translate `react-v18.md` to pt-br --- src/content/blog/2022/03/29/react-v18.md | 357 +++++++++++------------ 1 file changed, 176 insertions(+), 181 deletions(-) diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index d21eeb1f5..d8f70fd1d 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -2,156 +2,152 @@ title: "React v18.0" author: The React Team date: 2022/03/08 -description: React 18 is now available on npm! In our last post, we shared step-by-step instructions for upgrading your app to React 18. In this post, we'll give an overview of what's new in React 18, and what it means for the future. +description: O React 18 agora está disponível no npm! Em nossa última postagem, compartilhamos instruções passo a passo para atualizar seu aplicativo para o React 18. Neste post, faremos uma visão geral do que há de novo no React 18 e o que isso significa para o futuro. --- -March 29, 2022 by [The React Team](/community/team) +29 de março de 2022 por [The React Team](/community/team) --- -React 18 is now available on npm! In our last post, we shared step-by-step instructions for [upgrading your app to React 18](/blog/2022/03/08/react-18-upgrade-guide). In this post, we'll give an overview of what's new in React 18, and what it means for the future. +O React 18 agora está disponível no npm! Em nossa última postagem, compartilhamos instruções passo a passo sobre [como atualizar seu aplicativo para o React 18](/blog/2022/03/08/react-18-upgrade-guide). Neste post, faremos uma visão geral do que há de novo no React 18 e o que isso significa para o futuro. --- -Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense. +Nossa última versão importante inclui melhorias prontas para uso, como empacotamento automático, novas APIs como startTransition e renderização do lado do servidor em streaming com suporte para Suspense. -Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in — it's only enabled when you use a concurrent feature — but we think it will have a big impact on the way people build applications. +Muitos dos recursos do React 18 são construídos sobre nosso novo renderizador concorrente, uma mudança de bastidores que desbloqueia novas capacidades poderosas. O React concorrente é opcional — ele só é habilitado quando você usa um recurso concorrente — mas acreditamos que terá um grande impacto na forma como as pessoas constroem aplicativos. -We've spent years researching and developing support for concurrency in React, and we've taken extra care to provide a gradual adoption path for existing users. Last summer, [we formed the React 18 Working Group](/blog/2021/06/08/the-plan-for-react-18) to gather feedback from experts in the community and ensure a smooth upgrade experience for the entire React ecosystem. +Passamos anos pesquisando e desenvolvendo suporte para concorrência no React, e tomamos cuidado extra para fornecer um caminho de adoção gradual para os usuários existentes. No verão passado, [formamos o Grupo de Trabalho do React 18](/blog/2021/06/08/the-plan-for-react-18) para reunir feedback de especialistas da comunidade e garantir uma experiência de atualização suave para todo o ecossistema React. -In case you missed it, we shared a lot of this vision at React Conf 2021: +Caso você tenha perdido, compartilhamos muito dessa visão na React Conf 2021: -* In [the keynote](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa), we explain how React 18 fits into our mission to make it easy for developers to build great user experiences -* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [demonstrated how to use the new features in React 18](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2) -* [Shaundai Person](https://twitter.com/shaundai) gave us an overview of [streaming server rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3) +* Na [palestra principal](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa), explicamos como o React 18 se encaixa em nossa missão de facilitar para os desenvolvedores construir grandes experiências de usuário +* [Shruti Kapoor](https://twitter.com/shrutikapoor08) [demonstrou como usar os novos recursos no React 18](https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2) +* [Shaundai Person](https://twitter.com/shaundai) nos deu uma visão geral da [renderização de servidor em streaming com Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3) -Below is a full overview of what to expect in this release, starting with Concurrent Rendering. +Abaixo está uma visão completa do que esperar nesta liberação, começando com a Renderização Concorrente. -For React Native users, React 18 will ship in React Native with the New React Native Architecture. For more information, see the [React Conf keynote here](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s). +Para usuários do React Native, o React 18 será incluído no React Native com a Nova Arquitetura do React Native. Para mais informações, veja a [palestra principal da React Conf aqui](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s). -## What is Concurrent React? {/*what-is-concurrent-react*/} +## O que é o React Concorrente? {/*what-is-concurrent-react*/} -The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers. +A adição mais importante no React 18 é algo que esperamos que você nunca tenha que pensar: concorrência. Acreditamos que isso é amplamente verdadeiro para desenvolvedores de aplicativos, embora a história possa ser um pouco mais complicada para mantenedores de bibliotecas. -Concurrency is not a feature, per se. It's a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it's valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won't see those concepts anywhere in our public APIs. +Concorrência não é uma funcionalidade, por si só. É um novo mecanismo nos bastidores que permite ao React preparar múltiplas versões de sua interface de usuário ao mesmo tempo. Você pode pensar na concorrência como um detalhe de implementação — é valiosa por causa dos recursos que desbloqueia. O React utiliza técnicas sofisticadas em sua implementação interna, como filas de prioridade e múltiplos buffers. Mas você não verá esses conceitos em nossas APIs públicas. -When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on *what* you want the user experience to look like, and React handles *how* to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood. +Quando projetamos APIs, tentamos ocultar detalhes de implementação dos desenvolvedores. Como desenvolvedor React, você foca em *o que* quer que a experiência do usuário pareça, e o React lida com *como* fornecer essa experiência. Portanto, não esperamos que os desenvolvedores React saibam como a concorrência funciona nos bastidores. -However, Concurrent React is more important than a typical implementation detail — it's a foundational update to React's core rendering model. So while it's not super important to know how concurrency works, it may be worth knowing what it is at a high level. +No entanto, o React Concorrente é mais importante do que um detalhe de implementação típico — é uma atualização fundamental no modelo de renderização central do React. Portanto, enquanto não é super importante saber como a concorrência funciona, pode ser valioso saber o que é em um nível elevado. -A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React — in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen. +Uma propriedade chave do React Concorrente é que a renderização é interrompível. Quando você atualiza para o React 18 pela primeira vez, antes de adicionar quaisquer recursos concorrentes, as atualizações são renderizadas da mesma forma que nas versões anteriores do React — em uma única transação síncrona ininterrupta. Com a renderização síncrona, uma vez que uma atualização começa a renderizar, nada pode interrompê-la até que o usuário consiga ver o resultado na tela. -In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted. To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience. +Em uma renderização concorrente, nem sempre é esse o caso. O React pode começar a renderizar uma atualização, pausar no meio, e então continuar mais tarde. Pode até mesmo abandonar uma renderização em andamento completamente. O React garante que a interface de usuário apareça consistente mesmo se uma renderização for interrompida. Para fazer isso, ele espera para realizar mutações no DOM até o final, uma vez que toda a árvore tenha sido avaliada. Com essa capacidade, o React pode preparar novas telas em segundo plano sem bloquear a thread principal. Isso significa que a interface de usuário pode responder imediatamente à entrada do usuário, mesmo se estiver no meio de uma grande tarefa de renderização, criando uma experiência de usuário fluida. -Another example is reusable state. Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state. For example, when a user tabs away from a screen and back, React should be able to restore the previous screen in the same state it was in before. In an upcoming minor, we're planning to add a new component called `` that implements this pattern. Similarly, you’ll be able to use Offscreen to prepare new UI in the background so that it’s ready before the user reveals it. +Outro exemplo é o estado reutilizável. O React Concorrente pode remover seções da interface de usuário da tela, e então adicioná-las de volta mais tarde enquanto reutiliza o estado anterior. Por exemplo, quando um usuário muda de tela e volta, o React deve ser capaz de restaurar a tela anterior no mesmo estado em que estava antes. Em uma versão menor futura, planejamos adicionar um novo componente chamado `` que implementa esse padrão. De forma semelhante, você poderá usar Offscreen para preparar novos elementos de interface de usuário em segundo plano para que fiquem prontos antes que o usuário os revele. -Concurrent rendering is a powerful new tool in React and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. But React 18 is just the beginning of what we aim to build on this new foundation. +A renderização concorrente é uma nova ferramenta poderosa no React e a maioria dos nossos novos recursos são construídos para tirar proveito dela, incluindo Suspense, transições e renderização do lado do servidor em streaming. Mas o React 18 é apenas o começo do que esperamos construir sobre essa nova fundação. -## Gradually Adopting Concurrent Features {/*gradually-adopting-concurrent-features*/} +## Adoção Gradual de Recursos Concorrentes {/*gradually-adopting-concurrent-features*/} -Technically, concurrent rendering is a breaking change. Because concurrent rendering is interruptible, components behave slightly differently when it is enabled. +Tecnicamente, a renderização concorrente é uma mudança quebra. Como a renderização concorrente é interrompível, os componentes se comportam de maneira ligeiramente diferente quando ela está habilitada. -In our testing, we've upgraded thousands of components to React 18. What we've found is that nearly all existing components "just work" with concurrent rendering, without any changes. However, some of them may require some additional migration effort. Although the changes are usually small, you'll still have the ability to make them at your own pace. The new rendering behavior in React 18 is **only enabled in the parts of your app that use new features.** +Em nossos testes, atualizamos milhares de componentes para o React 18. O que descobrimos é que quase todos os componentes existentes "funcionam" com a renderização concorrente, sem quaisquer alterações. No entanto, alguns deles podem exigir um esforço adicional de migração. Embora as mudanças sejam geralmente pequenas, você ainda terá a capacidade de realizá-las em seu próprio ritmo. O novo comportamento de renderização no React 18 é **habilitado apenas nas partes do seu aplicativo que usam recursos novos.** -The overall upgrade strategy is to get your application running on React 18 without breaking existing code. Then you can gradually start adding concurrent features at your own pace. You can use [``](/reference/react/StrictMode) to help surface concurrency-related bugs during development. Strict Mode doesn't affect production behavior, but during development it will log extra warnings and double-invoke functions that are expected to be idempotent. It won't catch everything, but it's effective at preventing the most common types of mistakes. +A estratégia geral de atualização é fazer o seu aplicativo funcionar no React 18 sem quebrar o código existente. Depois, você pode começar a adicionar recursos concorrentes gradualmente no seu próprio ritmo. Você pode usar [``](/reference/react/StrictMode) para ajudar a evidenciar bugs relacionados à concorrência durante o desenvolvimento. O Modo Estrito não afeta o comportamento em produção, mas durante o desenvolvimento, ele registrará avisos extras e invocará funções duas vezes que são esperadas para serem idempotentes. Ele não capturará tudo, mas é eficaz em prevenir os tipos mais comuns de erros. -After you upgrade to React 18, you’ll be able to start using concurrent features immediately. For example, you can use startTransition to navigate between screens without blocking user input. Or useDeferredValue to throttle expensive re-renders. +Após a atualização para o React 18, você poderá começar a usar recursos concorrentes imediatamente. Por exemplo, você pode usar startTransition para navegar entre telas sem bloquear a entrada do usuário. Ou useDeferredValue para limitar re-renderizações caras. -However, long term, we expect the main way you’ll add concurrency to your app is by using a concurrent-enabled library or framework. In most cases, you won’t interact with concurrent APIs directly. For example, instead of developers calling startTransition whenever they navigate to a new screen, router libraries will automatically wrap navigations in startTransition. +No entanto, a longo prazo, esperamos que a principal maneira de adicionar concorrência ao seu aplicativo seja usando uma biblioteca ou framework compatível com concorrência. Na maioria dos casos, você não interagirá com as APIs concorrentes diretamente. Por exemplo, em vez de os desenvolvedores chamarem startTransition sempre que navegarem para uma nova tela, as bibliotecas de roteamento envolverão automaticamente as navegações em startTransition. -It may take some time for libraries to upgrade to be concurrent compatible. We’ve provided new APIs to make it easier for libraries to take advantage of concurrent features. In the meantime, please be patient with maintainers as we work to gradually migrate the React ecosystem. +Pode levar algum tempo para que as bibliotecas sejam atualizadas para serem compatíveis com a concorrência. Fornecemos novas APIs para facilitar que as bibliotecas tirem proveito dos recursos concorrentes. Nesse ínterim, por favor seja paciente com os mantenedores enquanto trabalhamos para migrar gradualmente o ecossistema React. -For more info, see our previous post: [How to upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide). +Para mais informações, veja nosso post anterior: [Como atualizar para o React 18](/blog/2022/03/08/react-18-upgrade-guide). -## Suspense in Data Frameworks {/*suspense-in-data-frameworks*/} +## Suspense em Frameworks de Dados {/*suspense-in-data-frameworks*/} -In React 18, you can start using [Suspense](/reference/react/Suspense) for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy. +No React 18, você pode começar a usar [Suspense](/reference/react/Suspense) para busca de dados em frameworks opinativos como Relay, Next.js, Hydrogen ou Remix. A busca de dados ad hoc com Suspense é tecnicamente possível, mas ainda não recomendada como uma estratégia geral. -In the future, we may expose additional primitives that could make it easier to access your data with Suspense, perhaps without the use of an opinionated framework. However, Suspense works best when it’s deeply integrated into your application’s architecture: your router, your data layer, and your server rendering environment. So even long term, we expect that libraries and frameworks will play a crucial role in the React ecosystem. +No futuro, podemos expor primitivas adicionais que poderiam facilitar o acesso aos seus dados com Suspense, talvez sem o uso de um framework opinativo. No entanto, o Suspense funciona melhor quando está profundamente integrado à arquitetura da sua aplicação: seu roteador, sua camada de dados e seu ambiente de renderização do servidor. Portanto, mesmo a longo prazo, esperamos que bibliotecas e frameworks desempenhem um papel crucial no ecossistema React. -As in previous versions of React, you can also use Suspense for code splitting on the client with React.lazy. But our vision for Suspense has always been about much more than loading code — the goal is to extend support for Suspense so that eventually, the same declarative Suspense fallback can handle any asynchronous operation (loading code, data, images, etc). +Como nas versões anteriores do React, você também pode usar Suspense para divisão de código no lado do cliente com React.lazy. Mas nossa visão para o Suspense sempre foi sobre muito mais do que carregar código — o objetivo é estender o suporte ao Suspense para que, eventualmente, o mesmo fallback declarativo de Suspense possa lidar com qualquer operação assíncrona (carregando código, dados, imagens, etc.). -## Server Components is Still in Development {/*server-components-is-still-in-development*/} +## Componentes do Servidor Ainda em Desenvolvimento {/*server-components-is-still-in-development*/} -[**Server Components**](/blog/2020/12/21/data-fetching-with-react-server-components) is an upcoming feature that allows developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. Server Components is not inherently coupled to Concurrent React, but it’s designed to work best with concurrent features like Suspense and streaming server rendering. +[**Componentes do Servidor**](/blog/2020/12/21/data-fetching-with-react-server-components) são um recurso futuro que permite que os desenvolvedores construam aplicativos que abrangem o servidor e o cliente, combinando a rica interatividade de aplicativos do lado do cliente com o desempenho aprimorado da renderização tradicional do servidor. Componentes do Servidor não estão intrinsicamente acoplados ao React Concorrente, mas são projetados para funcionar melhor com recursos concorrentes como Suspense e renderização do lado do servidor em streaming. -Server Components is still experimental, but we expect to release an initial version in a minor 18.x release. In the meantime, we’re working with frameworks like Next.js, Hydrogen, and Remix to advance the proposal and get it ready for broad adoption. +Componentes do Servidor ainda estão experimentais, mas esperamos lançar uma versão inicial em uma versão menor 18.x. Enquanto isso, estamos trabalhando com frameworks como Next.js, Hydrogen e Remix para avançar a proposta e prepará-la para uma ampla adoção. -## What's New in React 18 {/*whats-new-in-react-18*/} +## O que há de Novo no React 18 {/*whats-new-in-react-18*/} -### New Feature: Automatic Batching {/*new-feature-automatic-batching*/} - -Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically: +### Novo Recurso: Empacotamento Automático {/*new-feature-automatic-batching*/} +O empacotamento é quando o React agrupa várias atualizações de estado em uma única re-renderização para melhor desempenho. Sem o empacotamento automático, apenas agrupávamos atualizações dentro de manipuladores de eventos do React. Atualizações dentro de promessas, setTimeout, manipuladores de eventos nativos ou qualquer outro evento não eram agrupadas no React por padrão. Com o empacotamento automático, essas atualizações serão agrupadas automaticamente: ```js -// Before: only React events were batched. +// Antes: apenas eventos do React eram agrupados. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); - // React will render twice, once for each state update (no batching) + // O React renderizará duas vezes, uma vez para cada atualização de estado (sem empacotamento) }, 1000); -// After: updates inside of timeouts, promises, -// native event handlers or any other event are batched. +// Depois: atualizações dentro de timeouts, promessas, +// manipuladores de eventos nativos ou qualquer outro evento são agrupados. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); - // React will only re-render once at the end (that's batching!) + // O React só re-renderizará uma vez no final (isso é empacotamento!) }, 1000); ``` -For more info, see this post for [Automatic batching for fewer renders in React 18](https://github.com/reactwg/react-18/discussions/21). - -### New Feature: Transitions {/*new-feature-transitions*/} +Para mais informações, veja este post sobre [Empacotamento automático para menos renderizações no React 18](https://github.com/reactwg/react-18/discussions/21). -A transition is a new concept in React to distinguish between urgent and non-urgent updates. +### Novo Recurso: Transições {/*new-feature-transitions*/} -* **Urgent updates** reflect direct interaction, like typing, clicking, pressing, and so on. -* **Transition updates** transition the UI from one view to another. +Uma transição é um novo conceito no React para distinguir entre atualizações urgentes e não urgentes. -Urgent updates like typing, clicking, or pressing, need immediate response to match our intuitions about how physical objects behave. Otherwise they feel "wrong". However, transitions are different because the user doesn’t expect to see every intermediate value on screen. +* **Atualizações urgentes** refletem interações diretas, como digitar, clicar, pressionar e assim por diante. +* **Atualizações de transição** transitam a interface de usuário de uma visualização para outra. -For example, when you select a filter in a dropdown, you expect the filter button itself to respond immediately when you click. However, the actual results may transition separately. A small delay would be imperceptible and often expected. And if you change the filter again before the results are done rendering, you only care to see the latest results. +Atualizações urgentes como digitar, clicar ou pressionar, precisam de uma resposta imediata para corresponder às nossas intuições sobre como objetos físicos se comportam. Caso contrário, elas parecem "erradas". No entanto, transições são diferentes porque o usuário não espera ver cada valor intermediário na tela. -Typically, for the best user experience, a single user input should result in both an urgent update and a non-urgent one. You can use startTransition API inside an input event to inform React which updates are urgent and which are "transitions": +Por exemplo, quando você seleciona um filtro em um dropdown, espera que o botão do filtro responda imediatamente quando clica. No entanto, os resultados reais podem fazer a transição separadamente. Um pequeno atraso seria imperceptível e frequentemente esperado. E se você alterar o filtro novamente antes que os resultados sejam renderizados, você só se importa em ver os últimos resultados. +Normalmente, para a melhor experiência do usuário, uma única entrada do usuário deve resultar em uma atualização urgente e uma não urgente. Você pode usar a API startTransition dentro de um evento de entrada para informar ao React quais atualizações são urgentes e quais são "transições": ```js import { startTransition } from 'react'; -// Urgent: Show what was typed +// Urgente: Mostrar o que foi digitado setInputValue(input); -// Mark any state updates inside as transitions +// Marcar qualquer atualização de estado dentro como transições startTransition(() => { - // Transition: Show the results + // Transição: Mostrar os resultados setSearchQuery(input); }); ``` +Atualizações envoltas em startTransition são tratadas como não urgentes e serão interrompidas se mais atualizações urgentes, como cliques ou pressões de tecla, chegarem. Se uma transição for interrompida pelo usuário (por exemplo, digitando vários caracteres em sequência), o React descartará o trabalho de renderização obsoleto que não foi concluído e renderizará apenas a atualização mais recente. -Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update. - +* `useTransition`: um Hook para iniciar transições, incluindo um valor para rastrear o estado pendente. +* `startTransition`: um método para iniciar transições quando o Hook não pode ser usado. -* `useTransition`: a Hook to start transitions, including a value to track the pending state. -* `startTransition`: a method to start transitions when the Hook cannot be used. +Transições optarão pela renderização concorrente, permitindo que a atualização seja interrompida. Se o conteúdo for re-suspenso, as transições também dizem ao React para continuar exibindo o conteúdo atual enquanto renderiza o conteúdo de transição em segundo plano (veja o [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) para mais informações). -Transitions will opt in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) for more info). +[Veja a documentação sobre transições aqui](/reference/react/useTransition). -[See docs for transitions here](/reference/react/useTransition). +### Novos Recursos de Suspense {/*new-suspense-features*/} -### New Suspense Features {/*new-suspense-features*/} - -Suspense lets you declaratively specify the loading state for a part of the component tree if it's not yet ready to be displayed: +Suspense permite que você especifique de forma declarativa o estado de carregamento para uma parte da árvore de componentes, se ainda não estiver pronta para ser exibida: ```js }> @@ -159,186 +155,185 @@ Suspense lets you declaratively specify the loading state for a part of the comp ``` -Suspense makes the "UI loading state" a first-class declarative concept in the React programming model. This lets us build higher-level features on top of it. +O Suspense torna o "estado de carregamento da UI" um conceito declarativo de primeira classe no modelo de programação React. Isso nos permite construir recursos de alto nível sobre ele. -We introduced a limited version of Suspense several years ago. However, the only supported use case was code splitting with React.lazy, and it wasn't supported at all when rendering on the server. +Introduzimos uma versão limitada do Suspense há vários anos. No entanto, o único caso de uso suportado era a divisão de código com React.lazy, e não era suportado de forma alguma ao renderizar no servidor. -In React 18, we've added support for Suspense on the server and expanded its capabilities using concurrent rendering features. +No React 18, adicionamos suporte ao Suspense no servidor e expandimos suas capacidades usando recursos de renderização concorrente. -Suspense in React 18 works best when combined with the transition API. If you suspend during a transition, React will prevent already-visible content from being replaced by a fallback. Instead, React will delay the render until enough data has loaded to prevent a bad loading state. +O Suspense no React 18 funciona melhor quando combinado com a API de transição. Se você suspender durante uma transição, o React evitará que o conteúdo já visível seja substituído por um fallback. Em vez disso, o React atrasará a renderização até que dados suficientes tenham sido carregados para evitar um mau estado de carregamento. -For more, see the RFC for [Suspense in React 18](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md). +Para mais informações, veja o RFC sobre [Suspense no React 18](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md). -### New Client and Server Rendering APIs {/*new-client-and-server-rendering-apis*/} +### Novas APIs de Renderização do Cliente e Servidor {/*new-client-and-server-rendering-apis*/} -In this release we took the opportunity to redesign the APIs we expose for rendering on the client and server. These changes allow users to continue using the old APIs in React 17 mode while they upgrade to the new APIs in React 18. +Nesta versão, aproveitamos a oportunidade para redesenhar as APIs que expomos para renderização no cliente e no servidor. Essas mudanças permitem que os usuários continuem usando as antigas APIs no modo React 17 enquanto atualizam para as novas APIs no React 18. -#### React DOM Client {/*react-dom-client*/} +#### React DOM Cliente {/*react-dom-client*/} -These new APIs are now exported from `react-dom/client`: +Essas novas APIs agora são exportadas de `react-dom/client`: -* `createRoot`: New method to create a root to `render` or `unmount`. Use it instead of `ReactDOM.render`. New features in React 18 don't work without it. -* `hydrateRoot`: New method to hydrate a server rendered application. Use it instead of `ReactDOM.hydrate` in conjunction with the new React DOM Server APIs. New features in React 18 don't work without it. +* `createRoot`: Novo método para criar uma raiz para `render` ou `unmount`. Use-o em vez de `ReactDOM.render`. Novos recursos no React 18 não funcionam sem ele. +* `hydrateRoot`: Novo método para hidratar uma aplicação renderizada no servidor. Use-o em vez de `ReactDOM.hydrate` em conjunto com as novas APIs do React DOM Server. Novos recursos no React 18 não funcionam sem ele. -Both `createRoot` and `hydrateRoot` accept a new option called `onRecoverableError` in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError), or `console.error` in the older browsers. +Tanto `createRoot` quanto `hydrateRoot` aceitam uma nova opção chamada `onRecoverableError`, caso você queira ser notificado quando o React se recuperar de erros durante a renderização ou hidratação para registro. Por padrão, o React usará [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError), ou `console.error` nos navegadores mais antigos. -[See docs for React DOM Client here](/reference/react-dom/client). +[Veja a documentação para o React DOM Cliente aqui](/reference/react-dom/client). -#### React DOM Server {/*react-dom-server*/} +#### React DOM Servidor {/*react-dom-server*/} -These new APIs are now exported from `react-dom/server` and have full support for streaming Suspense on the server: +Essas novas APIs agora são exportadas de `react-dom/server` e têm suporte completo para streaming Suspense no servidor: -* `renderToPipeableStream`: for streaming in Node environments. -* `renderToReadableStream`: for modern edge runtime environments, such as Deno and Cloudflare workers. +* `renderToPipeableStream`: para streaming em ambientes Node. +* `renderToReadableStream`: para ambientes modernos de edge runtime, como Deno e Cloudflare workers. -The existing `renderToString` method keeps working but is discouraged. +O método `renderToString` existente continua funcionando, mas é desencorajado. -[See docs for React DOM Server here](/reference/react-dom/server). +[Veja a documentação para o React DOM Servidor aqui](/reference/react-dom/server). -### New Strict Mode Behaviors {/*new-strict-mode-behaviors*/} +### Novos Comportamentos do Modo Estrito {/*new-strict-mode-behaviors*/} -In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before. +No futuro, gostaríamos de adicionar um recurso que permita ao React adicionar e remover seções da interface de usuário enquanto preserva o estado. Por exemplo, quando um usuário muda de tela e volta, o React deve ser capaz de mostrar imediatamente a tela anterior. Para fazer isso, o React desmontaria e remontaria árvores usando o mesmo estado do componente que antes. -This feature will give React apps better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once. +Esse recurso proporcionará melhor desempenho aos aplicativos React por padrão, mas requer que os componentes sejam resilientes a efeitos sendo montados e destruídos várias vezes. A maioria dos efeitos funcionará sem quaisquer alterações, mas alguns efeitos presumem que são montados ou destruídos apenas uma vez. -To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. +Para ajudar a evidenciar esses problemas, o React 18 introduz uma nova verificação apenas para desenvolvimento no Modo Estrito. Essa nova verificação desmontará e remontará automaticamente cada componente, sempre que um componente for montado pela primeira vez, restaurando o estado anterior na segunda montagem. -Before this change, React would mount the component and create the effects: +Antes dessa mudança, o React montaria o componente e criaria os efeitos: ``` -* React mounts the component. - * Layout effects are created. - * Effects are created. +* O React monta o componente. + * Efeitos de layout são criados. + * Efeitos são criados. ``` - -With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode: +Com o Modo Estrito no React 18, o React simulará o desmontar e remontar o componente no modo de desenvolvimento: ``` -* React mounts the component. - * Layout effects are created. - * Effects are created. -* React simulates unmounting the component. - * Layout effects are destroyed. - * Effects are destroyed. -* React simulates mounting the component with the previous state. - * Layout effects are created. - * Effects are created. +* O React monta o componente. + * Efeitos de layout são criados. + * Efeitos são criados. +* O React simula o desmontar o componente. + * Efeitos de layout são destruídos. + * Efeitos são destruídos. +* O React simula o montagem do componente com o estado anterior. + * Efeitos de layout são criados. + * Efeitos são criados. ``` -[See docs for ensuring reusable state here](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development). +[Veja a documentação para garantir estado reutilizável aqui](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development). -### New Hooks {/*new-hooks*/} +### Novos Hooks {/*new-hooks*/} #### useId {/*useid*/} -`useId` is a new Hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/reference/react/useId). +`useId` é um novo Hook para gerar IDs únicos tanto no cliente quanto no servidor, evitando incompatibilidades de hidratação. É principalmente útil para bibliotecas de componentes que se integram com APIs de acessibilidade que exigem IDs únicos. Isso resolve um problema que já existe no React 17 e abaixo, mas é ainda mais importante no React 18 devido à forma como o novo renderizador de servidor em streaming entrega HTML fora de ordem. [Veja a documentação aqui](/reference/react/useId). -> Note +> Nota > -> `useId` is **not** for generating [keys in a list](/learn/rendering-lists#where-to-get-your-key). Keys should be generated from your data. +> `useId` **não** é para gerar [chaves em uma lista](/learn/rendering-lists#where-to-get-your-key). Chaves devem ser geradas a partir de seus dados. #### useTransition {/*usetransition*/} -`useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/reference/react/useTransition). +`useTransition` e `startTransition` permitem que você marque algumas atualizações de estado como não urgentes. Outras atualizações de estado são consideradas urgentes por padrão. O React permitirá que atualizações de estado urgentes (por exemplo, atualizar um campo de texto) interrompam atualizações de estado não urgentes (por exemplo, renderizar uma lista de resultados de pesquisa). [Veja a documentação aqui](/reference/react/useTransition). #### useDeferredValue {/*usedeferredvalue*/} -`useDeferredValue` lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn't block user input. [See docs here](/reference/react/useDeferredValue). +`useDeferredValue` permite que você adie a re-renderização de uma parte não urgente da árvore. É semelhante a debouncing, mas tem algumas vantagens em comparação a isso. Não há um atraso de tempo fixo, então o React tentará a renderização adiada logo após a primeira renderização ser refletida na tela. A renderização adiada é interrompível e não bloqueia a entrada do usuário. [Veja a documentação aqui](/reference/react/useDeferredValue). #### useSyncExternalStore {/*usesyncexternalstore*/} -`useSyncExternalStore` is a new Hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with state external to React. [See docs here](/reference/react/useSyncExternalStore). +`useSyncExternalStore` é um novo Hook que permite que lojas externas suportem leituras concorrentes forçando atualizações na loja a serem síncronas. Elimina a necessidade de useEffect ao implementar assinaturas a fontes de dados externas, e é recomendado para qualquer biblioteca que se integre com estado externo ao React. [Veja a documentação aqui](/reference/react/useSyncExternalStore). -> Note +> Nota > -> `useSyncExternalStore` is intended to be used by libraries, not application code. +> `useSyncExternalStore` é destinado a ser usado por bibliotecas, não código de aplicativo. #### useInsertionEffect {/*useinsertioneffect*/} -`useInsertionEffect` is a new Hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This Hook will run after the DOM is mutated, but before layout effects read the new layout. This solves an issue that already exists in React 17 and below, but is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate layout. [See docs here](/reference/react/useInsertionEffect). +`useInsertionEffect` é um novo Hook que permite que bibliotecas CSS-in-JS abordem problemas de desempenho da injeção de estilos na renderização. A menos que você já tenha construído uma biblioteca CSS-in-JS, não esperamos que você use isso. Este Hook será executado após a mutação do DOM, mas antes que os efeitos de layout leiam o novo layout. Isso resolve um problema que já existe no React 17 e abaixo, mas é ainda mais importante no React 18 porque o React cede ao navegador durante a renderização concorrente, dando-lhe uma chance de recalcular layout. [Veja a documentação aqui](/reference/react/useInsertionEffect). -> Note +> Nota > -> `useInsertionEffect` is intended to be used by libraries, not application code. +> `useInsertionEffect` é destinado a ser usado por bibliotecas, não código de aplicativo. -## How to Upgrade {/*how-to-upgrade*/} +## Como Atualizar {/*how-to-upgrade*/} -See [How to Upgrade to React 18](/blog/2022/03/08/react-18-upgrade-guide) for step-by-step instructions and a full list of breaking and notable changes. +Veja [Como atualizar para o React 18](/blog/2022/03/08/react-18-upgrade-guide) para instruções passo a passo e uma lista completa de mudanças quebradas e notáveis. -## Changelog {/*changelog*/} +## Registro de Mudanças {/*changelog*/} ### React {/*react*/} -* Add `useTransition` and `useDeferredValue` to separate urgent updates from transitions. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `useId` for generating unique IDs. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) by [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `useSyncExternalStore` to help external store libraries integrate with React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@drarmstr](https://github.com/drarmstr)) -* Add `startTransition` as a version of `useTransition` without pending feedback. ([#19696](https://github.com/facebook/react/pull/19696) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Add `useInsertionEffect` for CSS-in-JS libraries. ([#21913](https://github.com/facebook/react/pull/21913) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Make Suspense remount layout effects when content reappears. ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), and [@lunaruan](https://github.com/lunaruan)) -* Make `` re-run effects to check for restorable state. ([#19523](https://github.com/facebook/react/pull/19523) , [#21418](https://github.com/facebook/react/pull/21418) by [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan)) -* Assume Symbols are always available. ([#23348](https://github.com/facebook/react/pull/23348) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Remove `object-assign` polyfill. ([#23351](https://github.com/facebook/react/pull/23351) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Remove unsupported `unstable_changedBits` API. ([#20953](https://github.com/facebook/react/pull/20953) by [@acdlite](https://github.com/acdlite)) -* Allow components to render undefined. ([#21869](https://github.com/facebook/react/pull/21869) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Flush `useEffect` resulting from discrete events like clicks synchronously. ([#21150](https://github.com/facebook/react/pull/21150) by [@acdlite](https://github.com/acdlite)) -* Suspense `fallback={undefined}` now behaves the same as `null` and isn't ignored. ([#21854](https://github.com/facebook/react/pull/21854) by [@rickhanlonii](https://github.com/rickhanlonii)) -* Consider all `lazy()` resolving to the same component equivalent. ([#20357](https://github.com/facebook/react/pull/20357) by [@sebmarkbage](https://github.com/sebmarkbage)) -* Don't patch console during first render. ([#22308](https://github.com/facebook/react/pull/22308) by [@lunaruan](https://github.com/lunaruan)) -* Improve memory usage. ([#21039](https://github.com/facebook/react/pull/21039) by [@bgirard](https://github.com/bgirard)) -* Improve messages if string coercion throws (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064) by [@justingrant](https://github.com/justingrant)) -* Use `setImmediate` when available over `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834) by [@gaearon](https://github.com/gaearon)) -* Fix context failing to propagate inside suspended trees. ([#23095](https://github.com/facebook/react/pull/23095) by [@gaearon](https://github.com/gaearon)) -* Fix `useReducer` observing incorrect props by removing the eager bailout mechanism. ([#22445](https://github.com/facebook/react/pull/22445) by [@josephsavona](https://github.com/josephsavona)) -* Fix `setState` being ignored in Safari when appending iframes. ([#23111](https://github.com/facebook/react/pull/23111) by [@gaearon](https://github.com/gaearon)) -* Fix a crash when rendering `ZonedDateTime` in the tree. ([#20617](https://github.com/facebook/react/pull/20617) by [@dimaqq](https://github.com/dimaqq)) -* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB)) -* Fix `onLoad` not triggering when concurrent features are on. ([#23316](https://github.com/facebook/react/pull/23316) by [@gnoff](https://github.com/gnoff)) -* Fix a warning when a selector returns `NaN`. ([#23333](https://github.com/facebook/react/pull/23333) by [@hachibeeDI](https://github.com/hachibeeDI)) -* Fix a crash when document is set to `null` in tests. ([#22695](https://github.com/facebook/react/pull/22695) by [@SimenB](https://github.com/SimenB)) -* Fix the generated license header. ([#23004](https://github.com/facebook/react/pull/23004) by [@vitaliemiron](https://github.com/vitaliemiron)) -* Add `package.json` as one of the entry points. ([#22954](https://github.com/facebook/react/pull/22954) by [@Jack](https://github.com/Jack-Works)) -* Allow suspending outside a Suspense boundary. ([#23267](https://github.com/facebook/react/pull/23267) by [@acdlite](https://github.com/acdlite)) -* Log a recoverable error whenever hydration fails. ([#23319](https://github.com/facebook/react/pull/23319) by [@acdlite](https://github.com/acdlite)) +* Adicionar `useTransition` e `useDeferredValue` para separar atualizações urgentes de transições. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) por [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii) e [@sebmarkbage](https://github.com/sebmarkbage)) +* Adicionar `useId` para gerar IDs únicos. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) por [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan) e [@sebmarkbage](https://github.com/sebmarkbage)) +* Adicionar `useSyncExternalStore` para ajudar bibliotecas de loja externa a se integrarem com o React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) por [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn) e [@drarmstr](https://github.com/drarmstr)) +* Adicionar `startTransition` como uma versão de `useTransition` sem feedback pendente. ([#19696](https://github.com/facebook/react/pull/19696) por [@rickhanlonii](https://github.com/rickhanlonii)) +* Adicionar `useInsertionEffect` para bibliotecas CSS-in-JS. ([#21913](https://github.com/facebook/react/pull/21913) por [@rickhanlonii](https://github.com/rickhanlonii)) +* Fazer o Suspense remontar efeitos de layout quando o conteúdo reaparece. ([#19322](https://github.com/facebook/react/pull/19322), [#19374](https://github.com/facebook/react/pull/19374), [#19523](https://github.com/facebook/react/pull/19523), [#20625](https://github.com/facebook/react/pull/20625), [#21079](https://github.com/facebook/react/pull/21079) por [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn) e [@lunaruan](https://github.com/lunaruan)) +* Fazer `` reexecutar efeitos para verificar estado restaurável. ([#19523](https://github.com/facebook/react/pull/19523), [#21418](https://github.com/facebook/react/pull/21418) por [@bvaughn](https://github.com/bvaughn) e [@lunaruan](https://github.com/lunaruan)) +* Presumir que os símbolos estão sempre disponíveis. ([#23348](https://github.com/facebook/react/pull/23348) por [@sebmarkbage](https://github.com/sebmarkbage)) +* Remover polyfill `object-assign`. ([#23351](https://github.com/facebook/react/pull/23351) por [@sebmarkbage](https://github.com/sebmarkbage)) +* Remover API `unstable_changedBits` não suportada. ([#20953](https://github.com/facebook/react/pull/20953) por [@acdlite](https://github.com/acdlite)) +* Permitir que componentes renderizem indefinidos. ([#21869](https://github.com/facebook/react/pull/21869) por [@rickhanlonii](https://github.com/rickhanlonii)) +* Executar `useEffect` resultante de eventos discretos como cliques de forma síncrona. ([#21150](https://github.com/facebook/react/pull/21150) por [@acdlite](https://github.com/acdlite)) +* O `fallback={undefined}` do Suspense agora se comporta da mesma forma que `null` e não é ignorado. ([#21854](https://github.com/facebook/react/pull/21854) por [@rickhanlonii](https://github.com/rickhanlonii)) +* Considerar todos os `lazy()` resolvendo para o mesmo componente equivalente. ([#20357](https://github.com/facebook/react/pull/20357) por [@sebmarkbage](https://github.com/sebmarkbage)) +* Não patchar o console durante a primeira renderização. ([#22308](https://github.com/facebook/react/pull/22308) por [@lunaruan](https://github.com/lunaruan)) +* Melhorar o uso de memória. ([#21039](https://github.com/facebook/react/pull/21039) por [@bgirard](https://github.com/bgirard)) +* Melhorar mensagens se a conversão de string falhar (Temporal.*, Symbol, etc.) ([#22064](https://github.com/facebook/react/pull/22064) por [@justingrant](https://github.com/justingrant)) +* Usar `setImmediate` quando disponível em vez de `MessageChannel`. ([#20834](https://github.com/facebook/react/pull/20834) por [@gaearon](https://github.com/gaearon)) +* Corrigir falha de propagação de contexto dentro de árvores suspensas. ([#23095](https://github.com/facebook/react/pull/23095) por [@gaearon](https://github.com/gaearon)) +* Corrigir `useReducer` observando props incorretas ao remover o mecanismo de evasão ágil. ([#22445](https://github.com/facebook/react/pull/22445) por [@josephsavona](https://github.com/josephsavona)) +* Corrigir `setState` sendo ignorado no Safari ao anexar iframes. ([#23111](https://github.com/facebook/react/pull/23111) por [@gaearon](https://github.com/gaearon)) +* Corrigir uma falha ao renderizar `ZonedDateTime` na árvore. ([#20617](https://github.com/facebook/react/pull/20617) por [@dimaqq](https://github.com/dimaqq)) +* Corrigir uma falha ao definir documento como `null` em testes. ([#22695](https://github.com/facebook/react/pull/22695) por [@SimenB](https://github.com/SimenB)) +* Corrigir `onLoad` não ativando quando recursos concorrentes estão ativos. ([#23316](https://github.com/facebook/react/pull/23316) por [@gnoff](https://github.com/gnoff)) +* Corrigir um aviso quando um seletor retorna `NaN`. ([#23333](https://github.com/facebook/react/pull/23333) por [@hachibeeDI](https://github.com/hachibeeDI)) +* Corrigir uma falha ao definir documento como `null` em testes. ([#22695](https://github.com/facebook/react/pull/22695) por [@SimenB](https://github.com/SimenB)) +* Corrigir o cabeçalho de licença gerado. ([#23004](https://github.com/facebook/react/pull/23004) por [@vitaliemiron](https://github.com/vitaliemiron)) +* Adicionar `package.json` como um dos pontos de entrada. ([#22954](https://github.com/facebook/react/pull/22954) por [@Jack](https://github.com/Jack-Works)) +* Permitir suspensão fora de um limite de Suspense. ([#23267](https://github.com/facebook/react/pull/23267) por [@acdlite](https://github.com/acdlite)) +* Registrar um erro recuperável sempre que a hidratação falhar. ([#23319](https://github.com/facebook/react/pull/23319) por [@acdlite](https://github.com/acdlite)) ### React DOM {/*react-dom*/} -* Add `createRoot` and `hydrateRoot`. ([#10239](https://github.com/facebook/react/pull/10239), [#11225](https://github.com/facebook/react/pull/11225), [#12117](https://github.com/facebook/react/pull/12117), [#13732](https://github.com/facebook/react/pull/13732), [#15502](https://github.com/facebook/react/pull/15502), [#15532](https://github.com/facebook/react/pull/15532), [#17035](https://github.com/facebook/react/pull/17035), [#17165](https://github.com/facebook/react/pull/17165), [#20669](https://github.com/facebook/react/pull/20669), [#20748](https://github.com/facebook/react/pull/20748), [#20888](https://github.com/facebook/react/pull/20888), [#21072](https://github.com/facebook/react/pull/21072), [#21417](https://github.com/facebook/react/pull/21417), [#21652](https://github.com/facebook/react/pull/21652), [#21687](https://github.com/facebook/react/pull/21687), [#23207](https://github.com/facebook/react/pull/23207), [#23385](https://github.com/facebook/react/pull/23385) by [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), [@gaearon](https://github.com/gaearon), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), [@trueadm](https://github.com/trueadm), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add selective hydration. ([#14717](https://github.com/facebook/react/pull/14717), [#14884](https://github.com/facebook/react/pull/14884), [#16725](https://github.com/facebook/react/pull/16725), [#16880](https://github.com/facebook/react/pull/16880), [#17004](https://github.com/facebook/react/pull/17004), [#22416](https://github.com/facebook/react/pull/22416), [#22629](https://github.com/facebook/react/pull/22629), [#22448](https://github.com/facebook/react/pull/22448), [#22856](https://github.com/facebook/react/pull/22856), [#23176](https://github.com/facebook/react/pull/23176) by [@acdlite](https://github.com/acdlite), [@gaearon](https://github.com/gaearon), [@salazarm](https://github.com/salazarm), and [@sebmarkbage](https://github.com/sebmarkbage)) -* Add `aria-description` to the list of known ARIA attributes. ([#22142](https://github.com/facebook/react/pull/22142) by [@mahyareb](https://github.com/mahyareb)) -* Add `onResize` event to video elements. ([#21973](https://github.com/facebook/react/pull/21973) by [@rileyjshaw](https://github.com/rileyjshaw)) -* Add `imageSizes` and `imageSrcSet` to known props. ([#22550](https://github.com/facebook/react/pull/22550) by [@eps1lon](https://github.com/eps1lon)) -* Allow non-string `