\n\nAtenção:
\nEsta página descreve recursos experimentais que ainda não estão disponíveis numa versão estável. Não confie nas versões experimentais do React em aplicativos de produção. Esses recursos podem mudar significativamente e sem aviso antes de se tornarem parte do React.
\nEsta documentação é destinada a adotantes precoces e pessoas curiosas. Se você é iniciante no React, não se preocupe com esses recursos — não precisa aprendê-los agora.
\n
O Modo Concorrente está disponível apenas em versões experimentais do React. Para instalá-las, execute:
\nnpm install react@experimental react-dom@experimentalNão existem garantias de versionamento semântico para versões experimentais.
\nAPIs podem ser adicionadas, alteradas ou removidas em qualquer versão @experimental.
Versões experimentais constantemente terão alterações com problemas.
\nVocê pode testar essas versões nos seus projetos pessoais ou em uma branch, mas nós não recomendamos utilizar elas em produção. No Facebook, nós utilizamos elas em produção, mas isso é porque nós estamos prontos para corrigir os problemas assim que ocorrem. Você deve estar atento a isso.
\nEsta versão é destinada a adotantes precoces, autores de livros e pessoas curiosas.
\nNós estamos usando esse código em produção (e funciona para nós), mas ainda possui alguns problemas, recursos faltando e falta de documentação. Nós gostaríamos de saber mais caso algo quebre no Modo Concorrente assim nós podemos ajustar na versão estável que será oficialmente disponibilizada futuramente.
\nNormalmente, quando nós adicionamos recursos ao React, você pode começar a usá-lo imediatamente. Fragments, Context e até mesmo Hooks são exemplos desses recursos. Você pode usá-los no novo código sem fazer alterações no código existente.
\nO Modo Concorrente é diferente. Ele introduz alterações semânticas na forma do React funcionar. Do contrário, os novos recursos habilitados por ele não teriam se tornado possíveis. Este é o motivo de eles estarem agrupadas em um novo “modo” ao invés de serem liberados um a um isoladamente.
\nVocê não pode utilizar o Modo Concorrente apenas em uma sub árvore do seu aplicativo. Para utilizá-lo, você deve incluir no ponto onde atualmente você chama ReactDOM.render().
Isso irá habilitar o modo concorrente para toda a árvore <App />:
import ReactDOM from 'react-dom';\n\n// Se anteriormente você tinha:\n//\n// ReactDOM.render(<App />, document.getElementById('root'));\n//\n// Você pode incluir o Modo Concorrente escrevendo:\n\nReactDOM.unstable_createRoot(\n document.getElementById('root')\n).render(<App />);\n\nNota:
\nAs APIs do Modo Concorrente como
\ncreateRootapenas existem em versões experimentais do React.
No Modo Concorrente, os métodos do ciclo de vida anteriormente marcados como “inseguros” são realmente inseguros, e podem gerar ainda mais problemas do que na versão atual do React. Nós não recomendamos testar o Modo Concorrente até que sua aplicação seja compatível com o Strict Mode.
\nSe você tem uma aplicação existente muito grande, ou se a sua aplicação depende de muitas bibliotecas de terceiros, por favor não comece a utilizar o Modo Concorrente imediatamente. Por exemplo, no Facebook nós estamos usando o Modo Concorrente para o nosso novo website, mas não planejamos habilitá-lo na versão antiga. Isto porque o nosso website antigo ainda utiliza métodos de ciclo de vida inseguros em código de produção, e alguns padrões que não funcionam bem com o Modo Concorrente.
\nDe acordo com nossa experiência, utilizar os padrões idiomáticos do React no código e não utilizar soluções externas para gerenciamento de estado são a maneira mais fácil de iniciar a utilização do Modo Concorrente. Nós vamos descrever problemas comuns que nós experimentamos e as soluções para cada um deles nas próximas semanas.
\nPara códigos antigos, o Modo Concorrente pode ser um passo muito grande. Este é o motivo de nós também termos disponibilizado o novo “Modo Bloqueante” nas versões experimentais do React. Você pode testá-lo substituindo createRoot por createBlockingRoot. Isso apenas confere uma pequena parte dos recursos presentes no Modo Concorrente, mas é mais próximo da forma como o React funciona hoje e pode servir como um passo na migração.
Para recaptular:
\nReactDOM.render(<App />, rootNode). Está é a forma que os aplicativos React usam hoje. Não existem planos para remover o Modo Legado num futuro próximo — mas não será possível dar suporte para esses novos recursos.ReactDOM.createBlockingRoot(rootNode).render(<App />). Atualmente é experimental. A intenção é que seja um primeiro passo na migração para aplicativos que desejam utilizar uma parte dos recursos do Modo Concorrente.ReactDOM.createRoot(rootNode).render(<App />). Atualmente é experimental. No futuro, após se tornar estável, nos planejamos torná-lo o modo padrão do React. Esse modo habilita todos os novos recursos.Nós acreditamos que é melhor oferecer uma estratégia de migração gradativa do que fazer grandes mudanças — ou então deixar o React estagnado na irrelevância.
\nNa prática, nós esperamos que a maioria dos aplicativos que hoje estão usando o Modo Legado possam migrar pelo menos para o Modo Bloqueante (se não para o Modo Concorrente). Esta fragmentação pode ser incômoda para bibliotecas que almejam dar suporte para todos os modos em curto prazo. No entanto, gradativamente migrando o ecossistema irá resolver problemas que afetam a maioria das bibliotecas no ecossistema do React, bem como comportamentos confusos do Suspense quando lê o layout e a falta de garantias consistentes de gerenciamento em lote. Existe um número grande de problemas que não podem ser resolvidos no Modo Legado sem mudanças na semântica, e que não ocorrem nos modos Bloqueante e Concorrente.
\nVocê pode pensar no Modo Bloqueante como uma versão suavemente degradada do Modo Concorrente. Como resultado, a longo prazo nós poderemos convergir e parar de pensar em modos diferentes. Mas não de imediato, Modos são uma importante estratégia de migração. Eles permitem que todos decidam quando a migração vale a pena, e atualizar em seu próprio ritmo.
\n| \n | Modo Legado | \nModo Bloqueante | \nModo Concorrente | \n
|---|---|---|---|
| String Refs | \n✅ | \n🚫** | \n🚫** | \n
| Legacy Context | \n✅ | \n🚫** | \n🚫** | \n
| findDOMNode | \n✅ | \n🚫** | \n🚫** | \n
| Suspense | \n✅ | \n✅ | \n✅ | \n
| SuspenseList | \n🚫 | \n✅ | \n✅ | \n
| Suspense SSR + Hydration | \n🚫 | \n✅ | \n✅ | \n
| Progressive Hydration | \n🚫 | \n✅ | \n✅ | \n
| Selective Hydration | \n🚫 | \n🚫 | \n✅ | \n
| Cooperative Multitasking | \n🚫 | \n🚫 | \n✅ | \n
| Automatic batching of multiple setStates | \n🚫* | \n✅ | \n✅ | \n
| Priority-based Rendering | \n🚫 | \n🚫 | \n✅ | \n
| Interruptible Prerendering | \n🚫 | \n🚫 | \n✅ | \n
| useTransition | \n🚫 | \n🚫 | \n✅ | \n
| useDeferredValue | \n🚫 | \n🚫 | \n✅ | \n
| Suspense Reveal “Train” | \n🚫 | \n🚫 | \n✅ | \n
*: O modo Legado possui eventos gerenciados pelo React em lote mas é limitado a uma tarefa do navegador. Eventos que não são do React podem utilizá-lo através do unstable_batchedUpdates. No Modo Bloqueante e Concorrente, todos os setStates são feitos em lote por padrão.
**: Avisa em desenvolvimento.
","frontmatter":{"title":"Adotando o Modo Concorrente (Experimental)","next":"concurrent-mode-reference.html","prev":"concurrent-mode-patterns.html"},"fields":{"path":"content/docs/concurrent-mode-adoption.md","slug":"docs/concurrent-mode-adoption.html"}}},"pageContext":{"slug":"docs/concurrent-mode-adoption.html"}},"staticQueryHashes":[]}