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.
Vamos usar a API do Github para o exemplo do artigo.
Imagine os seguintes requisitos:
username
;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 hook vai ter algumas responsabilidades:
username
e buscar os repositórios desse user;id
e exclui o repositório relacionado a esse id
;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:
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