Adicionando Interatividade

Algumas coisas na tela são atualizadas em resposta à entrada do usuário. Por exemplo, clicar em uma galeria de imagens alterna a imagem ativa. No React, dados que mudam ao longo do tempo são chamados deestado.Você pode adicionar estado a qualquer componente e atualizá-lo conforme necessário. Neste capítulo, você aprenderá como escrever componentes que lidam com interações, atualizam seu estado e exibem saídas diferentes ao longo do tempo.

Respondendo a eventos

O React permite que você adicionemanipuladores de eventosao seu JSX. Manipuladores de eventos são suas próprias funções que serão acionadas em resposta a interações do usuário, como clicar, passar o mouse, focar em entradas de formulário e assim por diante.

Componentes integrados como<button>suportam apenas eventos de navegador integrados, comoonClick. No entanto, você também pode criar seus próprios componentes e dar a suas propriedades de manipulador de eventos quaisquer nomes específicos da aplicação que desejar.

Estado: a memória de um componente

Componentes frequentemente precisam mudar o que está na tela como resultado de uma interação. Digitar em um formulário deve atualizar o campo de entrada, clicar em "próximo" em um carrossel de imagens deve mudar qual imagem é exibida, clicar em "comprar" coloca um produto no carrinho de compras. Componentes precisam "lembrar" coisas: o valor de entrada atual, a imagem atual, o carrinho de compras. No React, esse tipo de memória específica do componente é chamada deestado.

Você pode adicionar estado a um componente com um HookuseState. Hookssão funções especiais que permitem que seus componentes usem recursos do React (o estado é um desses recursos). O HookuseStatepermite que você declare uma variável de estado. Ele recebe o estado inicial e retorna um par de valores: o estado atual e uma função de configuração de estado que permite atualizá-lo.

Veja como uma galeria de imagens usa e atualiza o estado ao clicar:

Renderização e commit

Antes que seus componentes sejam exibidos na tela, eles devem ser renderizados pelo React. Entender as etapas desse processo ajudará você a pensar sobre como seu código é executado e explicar seu comportamento.

Imagine que seus componentes são cozinheiros na cozinha, montando pratos saborosos a partir de ingredientes. Nesse cenário, o React é o garçom que recebe os pedidos dos clientes e os entrega. Esse processo de solicitar e servir a interface do usuário tem três etapas:

1. Dispararuma renderização (entregar o pedido do cliente à cozinha)
2. Renderizaro componente (preparar o pedido na cozinha)
3. Fazer commitno DOM (colocar o pedido na mesa)

1. Disparar
2. Renderizar
3. Commit

Ilustrado porRachel Lee Nabors

Estado como um instantâneo

Ao contrário das variáveis JavaScript comuns, o estado do React se comporta mais como um instantâneo. Definir o estado não altera a variável de estado que você já tem, mas sim dispara uma nova renderização. Isso pode ser surpreendente no início!

Esse comportamento ajuda a evitar bugs sutis. Aqui está um pequeno aplicativo de chat. Tente adivinhar o que acontece se você pressionar “Enviar” primeiro edepoismudar o destinatário para Bob. De quem será o nome que aparecerá noalertcinco segundos depois?

Enfileirando uma série de atualizações de estado

Este componente tem um bug: clicar em “+3” incrementa a pontuação apenas uma vez.

Estado como um Instantâneoexplica por que isso está acontecendo. Definir o estado solicita uma nova renderização, mas não o altera no código já em execução. Portanto,scorecontinua sendo0logo após você chamarsetScore(score + 1).

Você pode corrigir isso passando umafunção de atualizaçãoao definir o estado. Observe como substituirsetScore(score + 1)porsetScore(s => s + 1)corrige o botão “+3”. Isso permite que você enfileire várias atualizações de estado.

Atualizando objetos no estado

O estado pode conter qualquer tipo de valor JavaScript, incluindo objetos. Mas você não deve alterar objetos e arrays que você mantém no estado do React diretamente. Em vez disso, quando você quiser atualizar um objeto ou array, precisa criar um novo (ou fazer uma cópia de um existente) e, em seguida, atualizar o estado para usar essa cópia.

Normalmente, você usará a sintaxe de espalhamento...para copiar objetos e arrays que você deseja alterar. Por exemplo, atualizar um objeto aninhado pode ser assim:

Se copiar objetos no código se tornar tedioso, você pode usar uma biblioteca comoImmerpara reduzir o código repetitivo:

Atualizando arrays no estado

Arrays são outro tipo de objeto JavaScript mutável que você pode armazenar no estado e deve tratar como somente leitura. Assim como com objetos, quando você deseja atualizar um array armazenado no estado, precisa criar um novo (ou fazer uma cópia de um existente) e, em seguida, definir o estado para usar o novo array:

Se copiar arrays no código se tornar tedioso, você pode usar uma biblioteca comoImmerpara reduzir o código repetitivo:

O que vem a seguir?

Vá paraRespondendo a Eventospara 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 sobreGerenciamento de Estado?