Gerenciando Estado

À medida que sua aplicação cresce, é útil ser mais intencional sobre como seu estado é organizado e como os dados fluem entre seus componentes. Estado redundante ou duplicado é uma fonte comum de bugs. Neste capítulo, você aprenderá como estruturar bem seu estado, como manter a lógica de atualização do estado sustentável e como compartilhar estado entre componentes distantes.

Reagindo à entrada com estado

Com React, você não modifica a UI diretamente do código. Por exemplo, você não escreve comandos como “desabilitar o botão”, “habilitar o botão”, “mostrar a mensagem de sucesso”, etc. Em vez disso, você descreve a UI que deseja ver para os diferentes estados visuais do seu componente (“estado inicial”, “estado de digitação”, “estado de sucesso”) e, em seguida, aciona as mudanças de estado em resposta à entrada do usuário. Isso é semelhante a como os designers pensam sobre a UI.

Aqui está um formulário de quiz construído usando React. Observe como ele usa a variável de estadostatuspara determinar se deve habilitar ou desabilitar o botão de envio e se deve mostrar a mensagem de sucesso.

Escolhendo a estrutura do estado

Estruturar bem o estado pode fazer a diferença entre um componente que é agradável de modificar e depurar e um que é uma fonte constante de bugs. O princípio mais importante é que o estado não deve conter informações redundantes ou duplicadas. Se houver estado desnecessário, é fácil esquecer de atualizá-lo e introduzir bugs!

Por exemplo, este formulário tem uma variável de estadoredundantefullName:

Você pode removê-la e simplificar o código calculandofullNameenquanto o componente está renderizando:

Isso pode parecer uma pequena mudança, mas muitos bugs em aplicativos React são corrigidos dessa maneira.

Compartilhando estado entre componentes

Às vezes, você quer que o estado de dois componentes sempre mude juntos. Para fazer isso, remova o estado de ambos, mova-o para o pai comum mais próximo e, em seguida, passe-o para eles via props. Isso é conhecido como “elevar o estado” (lifting state up), e é uma das coisas mais comuns que você fará ao escrever código React.

Neste exemplo, apenas um painel deve estar ativo por vez. Para conseguir isso, em vez de manter o estado ativo dentro de cada painel individual, o componente pai mantém o estado e especifica as props para seus filhos.

Preservando e redefinindo estado

Quando você renderiza novamente um componente, o React precisa decidir quais partes da árvore manter (e atualizar) e quais partes descartar ou recriar do zero. Na maioria dos casos, o comportamento automático do React funciona bem o suficiente. Por padrão, o React preserva as partes da árvore que “correspondem” à árvore de componentes renderizada anteriormente.

No entanto, às vezes isso não é o que você deseja. Neste aplicativo de chat, digitar uma mensagem e depois mudar o destinatário não redefine a entrada. Isso pode fazer o usuário enviar uma mensagem para a pessoa errada por acidente:

O React permite que você substitua o comportamento padrão eforceum componente a redefinir seu estado passando umakeydiferente, como<Chat key={email} />. Isso diz ao React que, se o destinatário for diferente, ele deve ser considerado umcomponenteChat que precisa ser recriado do zero com os novos dados (e UI como entradas). Agora, alternar entre os destinatários redefine o campo de entrada—mesmo que você renderize o mesmo componente.

Extraindo a lógica de estado para um reducer

Componentes com muitas atualizações de estado espalhadas por muitos manipuladores de eventos podem ficar confusos. Para esses casos, você pode consolidar toda a lógica de atualização de estado fora do seu componente em uma única função, chamada “reducer”. Seus manipuladores de eventos se tornam concisos porque eles apenas especificam as “ações” do usuário. No final do arquivo, a função reducer especifica como o estado deve ser atualizado em resposta a cada ação!

Passando dados profundamente com contexto

Normalmente, você passa informações de um componente pai para um componente filho via props. Mas passar props pode se tornar inconveniente se você precisar passar alguma prop por muitos componentes, ou se muitos componentes precisam da mesma informação. O contexto permite que o componente pai torne algumas informações disponíveis para qualquer componente na árvore abaixo dele—não importa o quão profundo seja—sem passá-las explicitamente através de props.

Aqui, o componenteHeadingdetermina seu nível de título “perguntando” àSectionmais próxima pelo seu nível. CadaSectionrastreia seu próprio nível perguntando àSectionpai e adicionando um a ele. CadaSectionfornece informações a todos os componentes abaixo dela sem passar props—ela faz isso através do contexto.

Escalando com redutor e contexto

Redutores permitem consolidar a lógica de atualização de estado de um componente. O contexto permite passar informações profundamente para outros componentes. Você pode combinar redutores e contexto para gerenciar o estado de uma tela complexa.

Com esta abordagem, um componente pai com estado complexo o gerencia com um redutor. Outros componentes em qualquer lugar profundo na árvore podem ler seu estado via contexto. Eles também podem despachar ações para atualizar esse estado.

O que vem a seguir?

Vá paraReagindo a Entradas com Estadopara começar a ler este capítulo página por página!

Ou, se você já está familiarizado com esses tópicos, por que não ler sobreSaídas de Emergência?