Introdução

Que os Hooks do React vieram pra facilitar nossa experiência como desenvolvedor todos sabemos, mas como aproveitar melhor o poder que essa biblioteca tão amada pela comunidade nos fornece?

Criando “Custom Hooks” para abstrair o estado e as regras dos componentes.

Vamos ver onde encaixar essa mentalidade em um exemplo prático.

É recomendável que você tenha algum conhecimento em React Hooks para entender melhor o exemplo do post.

Índice

• Nossa demanda
• Nosso custom hook
• Utilizando o custom hook

Nossa demanda

Vamos usar a API do Github para o exemplo do artigo.

Imagine os seguintes requisitos:

• O usuário deve filtrar uma lista de repositórios baseado em um username;
• O usuário deve ser capaz de excluir um repositório dessa lista;
• O usuário deve ser capaz de atualizar um repositório dessa lista;

vamos definir que nossa camada de estado, regras de negócio e view devem ser independentes.

Dessa forma criamos componentes desacoplados facilitando testes, reutilização, manutenção e afins.

Nosso Custom Hook

Nosso hook vai ter algumas responsabilidades:

• Deve receber um username e buscar os repositórios desse user;
• Deve indicar se os repositórios ainda estão sendo buscados na api (loading status);
• Deve fornecer um método que recebe um argumento id e exclui o repositório relacionado a esse id;
• Deve fornecer um método que recebe um id, os campos do repositório a serem atualizados e atualiza o repositório relacionado ao id passado.

Nessa parte do desenvolvimento é muito comum o dev criar componentes com estados e regras vinculados, ou seja, o componente faz tudo. Ele busca os dados, valida as regras etc etc. Isso faz com que a view do seu componente seja 100% acoplada ao estado e as regras de negócio.

O que vamos fazer aqui é criar um custom hook chamado useUserRepositories, que tem como responsabilidade preencher os requisitos que citamos acima.

Então, vamos aos itens:

• Deve receber um username e buscar os repositórios desse user;

const toJSON = (data: Response) => data.json();

export interface Repository {
  id: number;
  name: string;
}

interface Props {
  username: string;
}

const useUserRepositories = ({ username }: Props) => {
  const [repositories, setRepositories] = useState<Repository[]>([]);

  useEffect(() => {
    (async () => {
        const response = await fetch(
          `https://api.github.com/users/${username}/repos`
        ).then(toJSON);

        setRepositories(response);
    })();
  }, [username]);

  return {
    repositories,
  };
};

#react #javascript #web-development