React Activity: esconder uma tela sem jogar o estado fora

Quem já criou interface com abas, sidebar, painel lateral ou modal persistente conhece bem esse dilema: você quer esconder uma parte da UI, mas não necessariamente quer destruir tudo que estava acontecendo ali dentro. Às vezes existe um formulário preenchido, uma lista carregada, uma posição de scroll ou um estado local que o usuário ainda espera encontrar quando voltar.

Até agora, a solução mais comum era controlar isso manualmente: renderizar condicionalmente, usar CSS para esconder, criar estados auxiliares ou aceitar que o componente seria desmontado e remontado. O React 19.2 trouxe uma API interessante para esse tipo de caso: o componente <Activity />.

O que é o Activity?

O Activity permite esconder uma parte da interface sem necessariamente tratar aquilo como uma remoção completa da experiência. Segundo a documentação oficial do React, quando uma Activity fica em modo hidden, seus filhos são visualmente escondidos com display: none, seus Effects são destruídos, mas o estado da árvore pode ser preservado.

Isso é útil porque existe uma diferença importante entre “essa UI não está visível agora” e “essa UI deixou de existir”. Em aplicações reais, essa diferença aparece o tempo todo.

Um exemplo simples

import { Activity, useState } from "react";

function Dashboard() {
  const [showSidebar, setShowSidebar] = useState(true);

  return (
    <main>
      <button onClick={() => setShowSidebar((value) => !value)}>
        Alternar sidebar
      </button>

      <Activity mode={showSidebar ? "visible" : "hidden"}>
        <Sidebar />
      </Activity>

      <section>
        <h1>Dashboard</h1>
        <p>Conteúdo principal da página.</p>
      </section>
    </main>
  );
}

Nesse exemplo, a sidebar pode ser escondida sem que você precise transformar a renderização condicional em uma coleção de pequenas decisões manuais. A intenção fica mais clara: a sidebar ainda faz parte da tela, mas em determinado momento está oculta.

Por que isso é diferente de um if?

Com renderização condicional tradicional, você costuma fazer algo assim:

{showSidebar && <Sidebar />}

Isso funciona muito bem em vários casos. O ponto é que, quando showSidebar vira false, o componente sai da árvore. Se ele tinha estado interno, esse estado pode ser perdido. Se ele tinha Effects, eles são limpos porque o componente foi desmontado. Com Activity, a conversa fica mais específica: você diz ao React que aquela parte da interface está oculta, não simplesmente ausente.

A diferença é sutil, mas importante: nem toda UI escondida deveria ser tratada como UI destruída.

Onde isso pode fazer sentido?

O Activity pode ser útil em dashboards, navegações laterais, áreas com abas, painéis de configuração, experiências multi-step e interfaces em que alternar visibilidade não deveria significar recomeçar tudo. Em vez de resolver isso com uma mistura de estado global, CSS e renderização condicional, a API oferece uma forma mais explícita de modelar essa intenção.

Isso não significa que todo display: none deve virar Activity. Para elementos simples, renderização condicional ou CSS continuam resolvendo. Mas quando existe estado relevante, custo de remontagem ou uma experiência que precisa continuar de onde parou, vale prestar atenção.

Conclusão

O React Activity parece pequeno, mas toca em uma dor real de UI: controlar presença, visibilidade e estado sem transformar o componente em uma pequena central de gambiarras. É o tipo de recurso que talvez não apareça no primeiro tutorial de React, mas começa a fazer sentido quando a interface cresce.

Às vezes, melhorar a arquitetura da tela começa com uma pergunta simples: quero esconder isso ou quero destruir isso?