Escotilhas de Escape

Alguns de seus componentes podem precisar controlar e sincronizar com sistemas fora do React. Por exemplo, você pode precisar focar uma entrada usando a API do navegador, reproduzir e pausar um player de vídeo implementado sem React, ou conectar e ouvir mensagens de um servidor remoto. Neste capítulo, você aprenderá as escotilhas de escape que permitem que você "saia" do React e se conecte a sistemas externos. A maior parte da lógica de sua aplicação e fluxo de dados não deve depender desses recursos.

Referenciando valores com refs

Quando você quer que um componente "lembre" alguma informação, mas não quer que essa informaçãodispare novas renderizações, você pode usar umaref:

Como o estado, as refs são retidas pelo React entre re-renderizações. No entanto, definir o estado faz um componente renderizar novamente. Alterar uma ref não! Você pode acessar o valor atual dessa ref através da propriedaderef.current.

Uma ref é como um bolso secreto do seu componente que o React não rastreia. Por exemplo, você pode usar refs para armazenarIDs de timeout,elementos DOMe outros objetos que não impactam a saída de renderização do componente.

Manipulando o DOM com refs

O React atualiza automaticamente o DOM para corresponder à sua saída de renderização, então seus componentes geralmente não precisarão manipulá-lo. No entanto, às vezes você pode precisar acessar os elementos DOM gerenciados pelo React—por exemplo, para focar um nó, rolar até ele ou medir seu tamanho e posição. Não há uma maneira integrada de fazer essas coisas no React, então você precisará de uma ref para o nó DOM. Por exemplo, clicar no botão focará a entrada usando uma ref:

Sincronizando com Efeitos

Alguns componentes precisam sincronizar com sistemas externos. Por exemplo, você pode querer controlar um componente não-React com base no estado do React, configurar uma conexão de servidor ou enviar um log de análise quando um componente aparece na tela. Diferente dos manipuladores de eventos, que permitem lidar com eventos específicos,Efeitospermitem que você execute algum código após a renderização. Use-os para sincronizar seu componente com um sistema fora do React.

Pressione Play/Pause algumas vezes e veja como o player de vídeo permanece sincronizado com o valor da propisPlaying:

Muitos Efeitos também "limpam" após si mesmos. Por exemplo, um Efeito que configura uma conexão com um servidor de chat deve retornar umafunção de limpezaque diz ao React como desconectar seu componente daquele servidor:

Em desenvolvimento, o React executará e limpará seu Efeito uma vez extra imediatamente. É por isso que você vê"✅ Connecting..."impresso duas vezes. Isso garante que você não esqueça de implementar a função de limpeza.

Você Pode Não Precisar de um Efeito

Efeitos são uma saída de emergência do paradigma do React. Eles permitem que você "saia" do React e sincronize seus componentes com algum sistema externo. Se não houver um sistema externo envolvido (por exemplo, se você quiser atualizar o estado de um componente quando algumas props ou o estado mudarem), você não deve precisar de um Efeito. Remover Efeitos desnecessários tornará seu código mais fácil de seguir, mais rápido para executar e menos propenso a erros.

Há dois casos comuns nos quais você não precisa de Efeitos:

• Você não precisa de Efeitos para transformar dados para renderização.
• Você não precisa de Efeitos para lidar com eventos do usuário.

Por exemplo, você não precisa de um Efeito para ajustar algum estado com base em outro estado:

Em vez disso, calcule o máximo que puder durante a renderização:

No entanto, vocêprecisade Efeitos para sincronizar com sistemas externos.

Ciclo de vida dos efeitos reativos

Efeitos têm um ciclo de vida diferente dos componentes. Componentes podem montar, atualizar ou desmontar. Um Efeito só pode fazer duas coisas: começar a sincronizar algo e, mais tarde, parar de sincronizá-lo. Esse ciclo pode acontecer várias vezes se seu Efeito depender de props e estado que mudam ao longo do tempo.

Este Efeito depende do valor da proproomId. Props sãovalores reativos,o que significa que eles podem mudar em uma re-renderização. Observe que o Efeitoressincroniza(e reconecta ao servidor) seroomIdmudar:

O React fornece uma regra de linter para verificar se você especificou as dependências do seu Efeito corretamente. Se você esquecer de especificarroomIdna lista de dependências no exemplo acima, o linter encontrará esse bug automaticamente.

Separando eventos de Efeitos

Os manipuladores de eventos só são reexecutados quando você realiza a mesma interação novamente. Diferente dos manipuladores de eventos, os Efeitos são ressincronizados se qualquer um dos valores que eles leem, como props ou estado, for diferente da última renderização. Às vezes, você quer uma mistura dos dois comportamentos: um Efeito que é reexecutado em resposta a alguns valores, mas não a outros.

Todo o código dentro de Efeitos éreativo.Ele será executado novamente se algum valor reativo que ele lê tiver mudado devido a uma rerrenderização. Por exemplo, este Efeito irá reconectar-se ao chat seroomIdouthemetiverem mudado:

Isso não é ideal. Você quer reconectar ao chat apenas se oroomIdmudou. Alternar othemenão deveria reconectar ao chat! Mova o código que lêthemepara fora do seu Efeito e coloque-o em umEvento de Efeito:

O código dentro de Eventos de Efeito não é reativo, então mudar othemenão faz mais seu Efeito se reconectar.

Removendo dependências de Efeitos

Quando você escreve um Efeito, o linter verifica se você incluiu cada valor reativo (como props e estado) que o Efeito lê na lista de dependências do seu Efeito. Isso garante que seu Efeito permaneça sincronizado com as props e estado mais recentes do seu componente. Dependências desnecessárias podem fazer seu Efeito rodar com muita frequência, ou até criar um loop infinito. A forma como você as remove depende do caso.

Por exemplo, este Efeito depende do objetooptionsque é recriado toda vez que você edita a entrada:

Você não quer que o chat se reconecte toda vez que você começar a digitar uma mensagem nele. Para corrigir esse problema, mova a criação do objetooptionspara dentro do Effect, para que o Effect dependa apenas da stringroomId:

Observe que você não começou editando a lista de dependências para remover a dependência deoptions. Isso estaria errado. Em vez disso, você alterou o código ao redor para que a dependência se tornassedesnecessária.Pense na lista de dependências como uma lista de todos os valores reativos usados pelo código do seu Effect. Você não escolhe intencionalmente o que colocar nessa lista. A lista descreve seu código. Para alterar a lista de dependências, altere o código.

Reutilizando lógica com Hooks personalizados

O React vem com Hooks integrados comouseState,useContext e useEffect. Às vezes, você pode desejar que exista um Hook para algum propósito mais específico: por exemplo, para buscar dados, para rastrear se o usuário está online ou para se conectar a uma sala de chat. Para isso, você pode criar seus próprios Hooks para as necessidades da sua aplicação.

Neste exemplo, o Hook personalizadousePointerPositionrastreia a posição do cursor, enquanto o Hook personalizadouseDelayedValueretorna um valor que “fica atrás” do valor que você passou por um certo número de milissegundos. Mova o cursor sobre a área de visualização do sandbox para ver uma trilha de pontos em movimento seguindo o cursor:

Você pode criar Hooks personalizados, compô-los, passar dados entre eles e reutilizá-los entre componentes. À medida que seu aplicativo cresce, você escreverá menos Effects manualmente porque poderá reutilizar Hooks personalizados que já escreveu. Também existem muitos Hooks personalizados excelentes mantidos pela comunidade React.

O que vem a seguir?

Vá paraReferenciando Valores com Refspara começar a ler este capítulo página por página!