{"componentChunkName":"component---src-templates-docs-js","path":"/docs/concurrent-mode-reference.html","result":{"data":{"markdownRemark":{"html":"\n
\n
\n

Cuidado:

\n

Esta página descreve os recursos experimentais que ainda não estão disponíveis em um release 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.

\n

Esta documentação é destinada a adotante precoces e pessoas curiosas. Se você é novo no React, não se preocupe com esses recursos — não precisa aprendê-los agora.

\n
\n
\n

Esta página é uma referência de API para o Modo Concurrent do React. Se você está procurando uma introdução guiada, confira Padrões de UI Concorrente.

\n

Nota: Esta é uma Prévia da Comunidade e não a versão estável final. Provavelmente haverá mudanças futuras nessas APIs. Use por sua conta e risco!

\n\n

Ativando o Modo Concorrente

\n

createRoot

\n
ReactDOM.createRoot(rootNode).render(<App />);
\n

Substitui o ReactDOM.render(<App />, rootNode) e ativa o Modo Concorrente.

\n

Para mais informações sobre o Modo Concorrente, consulte a documentação do Modo Concorrente.

\n

createBlockingRoot

\n
ReactDOM.createBlockingRoot(rootNode).render(<App />)
\n

Substitui o ReactDOM.render(<App />, rootNode) e ativa o Modo Bloqueante.

\n

A opção pelo Modo Concorrente introduz alterações semânticas em como o React funciona. Isso significa que você não pode usar o Modo Concorrente em apenas alguns componentes. Por causa disso, alguns apps podem não conseguir migrar diretamente para o Modo Concorrente.

\n

Modo Bloqueante contém apenas um pequeno subconjunto de recursos do Modo Concorrente e serve como uma etapa intermediária de migração para apps que não conseguem migrar diretamente.

\n

Suspense API

\n

Suspense

\n
<Suspense fallback={<h1>Carregando...</h1>}>\n  <ProfilePhoto />\n  <ProfileDetails />\n</Suspense>
\n

Suspense permite que seus componentes “esperem” por algo antes que eles possam renderizar, mostrando um fallback enquanto aguardam.

\n

Neste exemplo, ProfileDetails está aguardando uma chamada de API assíncrona para buscar alguns dados. Enquanto aguardamos o ProfileDetails e o ProfilePhoto, mostraremos o Carregando... como fallback. É importante observar que até que todos os filhos dentro de <Suspense> sejam carregados, continuaremos a mostrar o fallback.

\n

Suspense recebe duas props:

\n\n

<SuspenseList>

\n
<SuspenseList revealOrder=\"forwards\">\n  <Suspense fallback={'Carregando...'}>\n    <ProfilePicture id={1} />\n  </Suspense>\n  <Suspense fallback={'Carregando...'}>\n    <ProfilePicture id={2} />\n  </Suspense>\n  <Suspense fallback={'Carregando...'}>\n    <ProfilePicture id={3} />\n  </Suspense>\n  ...\n</SuspenseList>
\n

SuspenseList ajuda a coordenar muitos componentes que podem ser suspensos, orquestrando a ordem em que esses componentes são revelados ao usuário.

\n

Quando vários componentes precisam buscar dados, esses dados podem chegar em uma ordem imprevisível. No entanto, se você agrupar esses itens em um SuspenseList, React não mostrará um item na lista até que os itens anteriores sejam exibidos (esse comportamento é ajustável).

\n

SuspenseList recebe duas props:

\n\n

Observe que SuspenseList funciona apenas nos componentes Suspense e SuspenseList mais próximos abaixo dele. Ele não procura por componentes mais profundos que um nível. No entanto, é possível aninhar múltiplos componentes SuspenseList um no outro para construir grades.

\n

useTransition

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };\n\nconst [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
\n

useTransition permite que os componentes evitem estados de carregamento indesejáveis, aguardando o carregamento do conteúdo antes da transição para a próxima tela. Ele também permite que os componentes adiem atualizações de busca de dados mais lentas até as renderizações subsequentes, para que atualizações mais cruciais possam ser renderizadas imediatamente.

\n

O hook useTransition retorna dois valores em um array.

\n\n

Se alguma atualização de estado fizer com que um componente seja suspenso, essa atualização de estado deverá ser agrupada em uma transição.

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };\n\nfunction App() {\n  const [resource, setResource] = useState(initialResource);\n  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);\n  return (\n    <>\n      <button\n        disabled={isPending}\n        onClick={() => {\n          startTransition(() => {\n            const nextUserId = getNextId(resource.userId);\n            setResource(fetchProfileData(nextUserId));\n          });\n        }}\n      >\n        Próximo\n      </button>\n      {isPending ? \" Carregando...\" : null}\n      <Suspense fallback={<Spinner />}>\n        <ProfilePage resource={resource} />\n      </Suspense>\n    </>\n  );\n}
\n

Nesse código, agrupamos nossa busca de dados com startTransition. Isso nos permite começar a buscar os dados do perfil imediatamente, enquanto adia a renderização da próxima página de perfil e seu Spinner por 2 segundos (o tempo apresentado em timeoutMs).

\n

O boolean isPending informa ao React que nosso componente está em transição, para que possamos informar ao usuário mostrando algum texto de carregando na página de perfil anterior.

\n

Para uma análise detalhada das transições, você pode ler Padrões de UI Concorrente.

\n

Configuração do useTransition

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
\n

useTransition aceita uma configuração opcional do Suspense com um timeoutMs. Esse timeout (em milissegundos) informa ao React quanto tempo esperar antes de mostrar o próximo estado (a nova página de perfil no exemplo acima).

\n

Nota: Recomendamos que você compartilhe a Configuração do Suspense entre diferentes módulos.

\n

useDeferredValue

\n
const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
\n

Retorna uma versão adiada (defer) do valor que pode “atrasar” por no máximo timeoutMs.

\n

Isso é comumente usado para manter a interface responsiva quando você tem algo que é renderizado imediatamente com base na entrada do usuário e algo que precisa aguardar uma busca de dados.

\n

Um bom exemplo disso é um input de texto.

\n
function App() {\n  const [text, setText] = useState(\"Olá\");\n  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); \n\n  return (\n    <div className=\"App\">\n      {/* Continua passando o atual texto para o input */}\n      <input value={text} onChange={handleChange} />\n      ...\n      {/* Mas a lista pode \"atrasar\" quando necessário */}\n      <MySlowList text={deferredText} />\n    </div>\n  );\n }
\n

Isso nos permite começar a mostrar o novo texto para o “input” imediatamente, o que permite que a página se sinta responsiva. Enquanto isso, MySlowList fica “atrasado” por até 2 segundos, de acordo com o timeoutMs antes da atualizar, permitindo que seja renderizado com o texto atual em segundo plano.

\n

Para uma análise detalhada do adiamento de valores, você pode ler Padrões de UI Concorrente.

\n

Configuração do useDeferredValue

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
\n

useDeferredValue aceita uma configuração opcional do Suspense com um timeoutMs. Esse tempo limite (em milissegundos) informa ao React quanto tempo o valor adiado pode atrasar.

\n

O React sempre tentará usar um atraso menor quando a rede e o dispositivo permitirem.

","frontmatter":{"title":"Referência da API do Modo Concorrente (Experimental)","next":null,"prev":"concurrent-mode-adoption.html"},"fields":{"path":"content/docs/concurrent-mode-reference.md","slug":"docs/concurrent-mode-reference.html"}}},"pageContext":{"slug":"docs/concurrent-mode-reference.html"}},"staticQueryHashes":[]}