Reutilizando lógica com Hooks personalizados

Hooks Personalizados: Compartilhando lógica entre componentes

Imagine que você está desenvolvendo um aplicativo que depende fortemente da rede (como a maioria dos aplicativos). Você deseja alertar o usuário caso a conexão de rede seja perdida acidentalmente enquanto eles estiverem usando o seu aplicativo. Como você procederia? Parece que você precisará de duas coisas no seu componente:

1. Um estado que acompanha se a rede está online ou não.
2. Um efeito que se inscreve nos eventos globais online e offline e atualiza o estado correspondente.

Isso manterá seu componente sincronizado com o status da rede. Você pode começar com algo assim:

Tente ligar e desligar sua conexão de rede e observe como esta StatusBar é atualizada em resposta às suas ações.

Agora, imagine que você também deseja usar a mesma lógica em um componente diferente. Você deseja implementar um botão “Salvar” que ficará desativado e exibirá “Reconectando…” em vez de “Salvar” enquanto a rede estiver desligada.

Para começar, você pode copiar e colar o estado isOnline e o efeito em SaveButton:

Verifique que, ao desligar a rede, o botão alterará sua aparência.

Esses dois componentes funcionam bem, mas a duplicação da lógica entre eles é infeliz. Parece que, mesmo que eles tenham uma aparência visual diferente, você deseja reutilizar a lógica entre eles.

Extraindo seu próprio Hook personalizado de um componente

Imagine, por um momento, que, assim como useState e useEffect, houvesse um Hook embutido chamado useOnlineStatus. Em seguida, ambos esses componentes poderiam ser simplificados e seria possível remover a duplicação entre eles:

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Conectado' : '❌ Desconectado'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();

  function handleSaveClick() {
    console.log('✅ Progresso salvo');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Salvar progresso' : 'Reconectando...'}
    </button>
  );
}

Embora não exista um Hook embutido assim, você pode escrevê-lo por conta própria. Declare uma função chamada useOnlineStatus e mova todo o código duplicado para ela, a partir dos componentes que você escreveu anteriormente:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

No final da função, retorne isOnline. Isso permite que seus componentes leiam esse valor:

Verifique se alternar a rede ligada e desligada atualiza ambos os componentes.

Agora, seus componentes não possuem tanta lógica repetitiva. Mais importante ainda, o código dentro deles descreve o que deles desejam fazer (usar o status online!) em vez de como fazer isso (se inscrevendo nos eventos do navegador).

Quando você extrai a lógica em Hooks personalizados, é possível ocultar os detalhes complicados de como lidar com algum sistema externo ou uma API do navegador. O código dos seus componentes expressa sua intenção, não a implementação.

Nome dos hooks sempre começam com use

Aplicações React são construídas a partir de componentes. Os componentes são construídos a partir de Hooks, sejam eles embutidos ou personalizados. Provavelmente, você frequentemente usará Hooks personalizados criados por outras pessoas, mas ocasionalmente poderá escrever um você mesmo!

Você deve seguir estas convenções de nomenclatura:

1. Os nomes dos componentes do React devem começar com uma letra maiúscula, como StatusBar e SaveButton. Os componentes do React também precisam retornar algo que o React saiba como exibir, como um trecho de JSX.
2. Os nomes do hooks devem começar com use seguido por uma letra maiúscula, como useState (built-in) ou useOnlineStatus (personalizado, como mencionado anteriormente na página). Hooks podem retornar valores arbitrários.

Essa convenção garante que você sempre possa olhar para um componente e saber onde seu estado, efeitos e outras funcionalidades do React podem estar “escondidos”. Por exemplo, se você vir uma chamada de função getColor() dentro do seu componente, pode ter certeza de que ela não pode conter estado do React, pois seu nome não começa com use. No entanto, uma chamada de função como useOnlineStatus() provavelmente conterá chamadas a outros Hooks internamente!

// 🔴 Evite: um Hook que não utiliza Hooks
function useSorted(items) {
  return items.slice().sort();
}

// ✅ Bom: uma função regular que não utiliza Hooks
function getSorted(items) {
  return items.slice().sort();
}

function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    // ✅ É possível chamar getSorted() condicionalmente porque não é um Hook.
    displayedItems = getSorted(items);
  }
  // ...
}

// ✅ Bom: um Hook que usa outros Hooks
function useAuth() {
  return useContext(Auth);
}

// ✅ Bom: um Hook que provavelmente usará outros Hooks posteriormente
function useAuth() {
  // TODO: Substitua por esta linha quando a autenticação for implementada:
  // return useContext(Auth);
  return TEST_USER;
}

Hooks personalizados permitem compartilhar lógica com estado, não o próprio estado

No exemplo anterior, quando você ligou e desligou a rede, ambos os componentes foram atualizados juntos. No entanto, é incorreto pensar que uma única variável de estado isOnline é compartilhada entre eles. Observe este código:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Ele funciona da mesma forma que antes de extrair a duplicação:

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

function SaveButton() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

Essas são duas variáveis de estado e efeitos completamente independentes! Elas acabaram tendo o mesmo valor ao mesmo tempo porque foram sincronizadas com o mesmo valor externo (se a rede está ligada ou desligada).

Para ilustrar melhor isso, precisaremos de um exemplo diferente. Considere este componente Form:

Há alguma lógica repetitiva para cada campo do formulário:

1. Há uma variável de estado (firstName e lastName).
2. Há um manipulador de alteração (handleFirstNameChange e handleLastNameChange).
3. Há uma parte de JSX que especifica os atributos value e onChange para a entrada.

Você pode extrair a lógica repetitiva para este Hook personalizado useFormInput:

Observe que ele declara apenas uma variável de estado chamada value.

No entanto, o componente Form chama useFormInput duas vezes:

function Form() {
  const firstNameProps = useFormInput('Mary');
  const lastNameProps = useFormInput('Poppins');
  // ...

É por isso que funciona como se estivéssemos declarando duas variáveis de estado separadas!

Os Hooks personalizados permitem compartilhar lógica com estado e não o próprio estado. Cada chamada a um Hook é completamente independente de qualquer outra chamada ao mesmo Hook. É por isso que as duas sandboxes acima são completamente equivalentes. Se desejar, role para cima e compare-as. O comportamento antes e depois de extrair um Hook personalizado é idêntico.

Quando você precisa compartilhar o próprio estado entre vários componentes, eleve-o e passe-o como propriedade em vez disso.

Passando valores reativos entre Hooks

O código dentro dos seus Hooks personalizados será executado novamente durante cada nova renderização do seu componente. É por isso que, assim como os componentes, os Hooks personalizados precisam ser puros. Pense no código dos Hooks personalizados como parte do corpo do seu componente!

Como os Hooks personalizados são renderizados juntamente com o seu componente, eles sempre recebem as props e o estado mais recentes. Para entender o que isso significa, considere este exemplo de sala de bate-papo. Altere a URL do servidor ou a sala de bate-papo:

Quando você altera serverUrl ou roomId, o efeito “reage” às suas mudanças e ressincroniza. Você pode observar pelas mensagens no console que o chat se reconecta toda vez que você altera as dependências do seu efeito.

Agora mova o código do efeito para um Hook personalizado:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('Nova mensagem: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Isso permite que seu componente ChatRoom chame o seu Hook personalizado sem se preocupar com o funcionamento interno:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });

  return (
    <>
      <label>
        URL do servidor:
        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
      </label>
      <h1>Bem vindo(a) à sala {roomId}</h1>
    </>
  );
}

Isso parece muito mais simples! (Mas faz a mesma coisa.)

Observe que a lógica ainda responde às mudanças nas props e no estado. Experimente editar a URL do servidor ou a sala selecionada:

Observe como você está recebendo o valor de retorno de um Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

e passando como entrada para outro Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

Sempre que o componente ChatRoom é renderizado novamente, ele passa as últimas roomId e serverUrl para o seu Hook. É por isso que o seu efeito se reconecta ao chat sempre que os valores forem diferentes após uma nova renderização. (Se você já trabalhou com software de processamento de áudio ou vídeo, encadear Hooks dessa forma pode lembrar o encadeamento de efeitos visuais ou de áudio. É como se a saída do useState “alimentasse” a entrada do useChatRoom.)

Passando manipuladores de eventos para Hooks personalizados

Conforme você começa a usar o useChatRoom em mais componentes, pode ser desejável permitir que os componentes personalizem seu comportamento. Por exemplo, atualmente, a lógica do que fazer quando uma mensagem chega está codificada diretamente no Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('Nova mensagem: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

Digamos que você queira mover essa lógica de volta para o seu componente:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('Nova mensagem: ' + msg);
    }
  });
  // ...

Para fazer isso funcionar, altere o seu Hook personalizado para receber onReceiveMessage como uma das opções nomeadas:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ Todas as dependências declaradas
}

Isso funcionará, mas há mais uma melhoria que você pode fazer quando seu Hook personalizado aceita manipuladores de eventos.

Adicionar uma dependência em onReceiveMessage não é ideal, pois fará com que o chat se reconecte sempre que o componente for renderizado novamente. Encapsule esse manipulador de eventos em um Event Effect para removê-lo das dependências:

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ Todas as dependências declaradas
}

Agora, o chat não será reconectado toda vez que o componente ChatRoom for renderizado novamente. Aqui está um exemplo completo de como passar um manipulador de eventos para um Hook personalizado com o qual você pode brincar:

Observe como agora você não precisa mais saber como useChatRoom funciona para poder usá-lo. Você poderia adicioná-lo a qualquer outro componente, passar outras opções e ele funcionaria da mesma maneira. Esse é o poder dos Hooks personalizados.

Quando usar Hooks personalizados

Você não precisa extrair um Hook personalizado para cada pequeno trecho de código duplicado. Alguma duplicação é aceitável. Por exemplo, extrair um Hook useFormInput para envolver uma única chamada useState como feito anteriormente provavelmente é desnecessário.

No entanto, sempre que você escrever um Efeito, considere se seria mais claro encapsulá-lo também em um Hook personalizado. Você não deve precisar de efeitos com muita frequência, então, se você estiver escrevendo um, significa que precisa “sair do mundo React” para sincronizar com algum sistema externo ou fazer algo para o qual o React não tenha uma API embutida. encapsular o Efeito em um Hook personalizado permite que você comunique claramente sua intenção e como os dados fluem por ele.

Por exemplo, considere um componente ShippingForm que exibe dois dropdowns: um mostra a lista de cidades e outro mostra a lista de áreas na cidade selecionada. Você pode começar com um código que se parece com isso:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // Este efeito busca cidades para um país
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // Esse efeito busca as áreas para a cidade selecionada.
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

  // ...

Embora este código seja bastante repetitivo, é correto manter esses efeitos separados um do outro. Eles sincronizam duas coisas diferentes, portanto, não deve-se mesclá-los em um único efeito. Em vez disso, você pode simplificar o componente ShippingForm acima extraindo a lógica comum entre eles para o seu próprio Hook useData:

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

Agora você pode substituir os dois efeitos nos componentes ShippingForm por chamadas ao useData:

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

Extrair um Hook personalizado torna o fluxo de dados explícito. Você fornece a url como entrada e obtém a data como saída. Ao “esconder” seu efeito dentro do useData, você também impede que alguém que trabalhe no componente ShippingForm adicione dependências desnecessárias a ele. Com o tempo, a maioria dos efeitos do seu aplicativo estará nos Hooks personalizados.

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 🔴 Evite: usar Hooks personalizados de "ciclo de vida"
  useMount(() => {
    const connection = createConnection({ roomId, serverUrl });
    connection.connect();

    post('/analytics/event', { eventName: 'visit_chat' });
  });
  // ...
}

// 🔴 Evite: criar Hooks personalizados de "ciclo de vida"
function useMount(fn) {
  useEffect(() => {
    fn();
  }, []); // 🔴 React Hook `useEffect` está com uma dependência faltando: 'fn'
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Bom: dois efeitos separados por finalidade

  useEffect(() => {
    const connection = createConnection({ serverUrl, roomId });
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_chat', roomId });
  }, [roomId]);

  // ...
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Ótimo: Hooks personalizados nomeados de acordo com sua finalidade
  useChatRoom({ serverUrl, roomId });
  useImpressionLog('visit_chat', { roomId });
  // ...
}

Hooks personalizados ajudam na migração para padrões melhores

Os efeitos são uma “porta de escape”: você os utiliza quando precisa “sair do React” e não há uma solução interna melhor para o seu caso de uso. Com o tempo, o objetivo da equipe do React é reduzir ao mínimo o número de efeitos em seu aplicativo, fornecendo soluções mais específicas para problemas mais específicos. Encapsular seus efeitos em Hooks personalizados facilita a atualização do seu código quando essas soluções estiverem disponíveis.

Vamos voltar a este exemplo:

No exemplo acima, useOnlineStatus é implementado com um par de useState e useEffect. No entanto, essa não é a melhor solução possível. Existem alguns casos específicos que não são considerados. Por exemplo, assume-se que quando o componente é montado, isOnline já é true, mas isso pode estar errado se a rede já estiver offline. Você pode usar a API do navegador navigator.onLine para verificar isso, mas usá-la diretamente não funcionaria no servidor para gerar o HTML inicial. Em resumo, este código pode ser aprimorado.

Felizmente, o React 18 inclui uma API dedicada chamada useSyncExternalStore que cuida de todos esses problemas para você. Aqui está como o seu Hook useOnlineStatus pode ser reescrito para aproveitar essa nova API:

Observe como você não precisou alterar nenhum dos componentes para fazer essa migração:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

Este é outro motivo pelo qual envolver efeitos em Hooks personalizados frequentemente é benéfico:

1. Você torna o fluxo de dados de ida e volta dos seus efeitos muito explícito.
2. Você permite que seus componentes se concentrem na intenção em vez de na implementação exata dos seus efeitos.
3. Quando o React adiciona novos recursos, você pode remover esses efeitos sem precisar alterar nenhum dos seus componentes.

Similar a um sistema de design, você pode achar útil começar a extrair idiomatismos comuns dos componentes do seu aplicativo em Hooks personalizados. Isso manterá o código dos seus componentes focado na intenção e permitirá evitar escrever efeitos brutos com frequência. Muitos Hooks personalizados excelentes são mantidos pela comunidade do React.

import { use } from 'react'; // Não disponível ainda!

function ShippingForm({ country }) {
  const cities = use(fetch(`/api/cities?country=${country}`));
  const [city, setCity] = useState(null);
  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
  // ...

Há mais de uma maneira de fazer isso

Vamos supor que você queira implementar uma animação de fade-in do zero usando a API do navegador requestAnimationFrame. Você pode começar com um efeito que configura um loop de animação. Durante cada quadro da animação, você poderia alterar a opacidade do nó do DOM que você mantém em uma referência (ref) até que ela atinja o valor 1. Seu código pode começar assim:

Para tornar o componente mais legível, você pode extrair a lógica para um Hook personalizado useFadeIn:

Você pode manter o código do useFadeIn como está, mas também pode refatorá-lo ainda mais. Por exemplo, você pode extrair a lógica para configurar o loop de animação do useFadeIn para um Hook personalizado useAnimationLoop:

No entanto, você não precisou fazer isso. Assim como com funções regulares, você decide em última instância onde definir os limites entre diferentes partes do seu código. Você também pode adotar uma abordagem muito diferente. Em vez de manter a lógica no efeito, você poderia mover a maior parte da lógica imperativa para uma classe JavaScript:

Os efeitos permitem conectar o React a sistemas externos. Quanto mais coordenação entre efeitos for necessária (por exemplo, para encadear várias animações), mais faz sentido extrair essa lógica completamente dos efeitos e hooks, como no sandbox anterior. Em seguida, o código que você extraiu se torna o sistema externo. Isso permite que seus efeitos permaneçam simples, pois eles só precisam enviar mensagens para o sistema que você moveu para fora do React.

Os exemplos acima pressupõem que a lógica do fade-in precisa ser escrita em JavaScript. No entanto, essa animação específica de fade-in é mais simples e muito mais eficiente de ser implementada com uma simples Animação CSS.

Às vezes, você nem precisa de um Hook!