Quando criar um custom hook no React?
No desenvolvimento de aplicativos React, existem momentos em que é vantajoso criar um custom hook para melhorar a organização, reutilização e encapsulamento da lógica do componente. Um custom hook é uma função que permite que você extraia lógica compartilhada entre componentes em um único lugar, facilitando seu uso em diferentes partes do aplicativo. Neste artigo, exploraremos quando é apropriado criar um custom hook no React e como ele pode beneficiar seu processo de desenvolvimento.
Isolar a lógica da UI
Ao criar uma interface de usuário (UI) complexa, é comum que a lógica envolvida se torne extensa e difícil de gerenciar dentro dos componentes. Nesses casos, um custom hook pode ser criado para isolar a lógica da UI, mantendo os componentes mais limpos e focados na renderização visual. Isso permite uma separação clara entre a lógica e a apresentação, tornando o código mais legível e facilitando a manutenção no longo prazo.
function usePagination() {
// Lógica de paginação aqui
}
function MyComponent() {
const { currentPage, nextPage, previousPage } = usePagination();
// Renderização visual e manipulação de eventos aqui
}
Reutilização de lógica
Quando você encontra uma peça de lógica que pode ser útil em várias partes do seu aplicativo, um custom hook é uma ótima solução. Ele permite que você encapsule essa lógica em um único lugar e a reutilize em diferentes componentes. Dessa forma, você evita duplicação de código e mantém uma base de código mais limpa e modular.
function useLocalStorage(key, defaultValue) {
// Lógica para ler/escrever dados no localStorage
}
function ComponentA() {
const value = useLocalStorage('myKey', 'default');
// Utiliza o valor do localStorage
}
function ComponentB() {
const value = useLocalStorage('myKey', 'default');
// Utiliza o valor do localStorage
}
Encapsulamento e ocultação de lógica
Em alguns casos, você pode precisar lidar com lógica complexa que não precisa ser exposta aos componentes externos. O uso de um custom hook permite encapsular e ocultar essa lógica, fornecendo aos componentes apenas as funcionalidades necessárias. Isso ajuda a simplificar o uso do componente, pois os detalhes internos não precisam ser conhecidos externamente.
function useFormValidation() {
// Lógica de validação de formulário
}
function MyForm() {
const { handleSubmit, handleChange, values, errors } = useFormValidation();
// Manipulação de eventos e renderização visual do formulário
}
Facilitar os testes
Ao escrever testes unitários para seus componentes, pode ser útil fornecer um custom hook como uma dependência simulada. Isso permite que você isole a lógica do componente e se concentre em testar apenas o comportamento desejado. Com um custom hook separado, é mais fácil substituir a implementação real por uma simulação controlada durante os testes.
function useApi() {
// Lógica de chamadas à API aqui
}
function MyComponent() {
const { fetchData } = useApi();
useEffect(() => {
fetchData();
}, []);
// Renderização visual e manipulação de eventos aqui
}
Nos testes unitários para o componente `MyComponent`, podemos fornecer uma versão simulada do `useApi`:
```javascript
jest.mock('./useApi', () => ({
useApi: jest.fn(() => ({
fetchData: jest.fn(),
})),
}));
// Teste unitário do componente MyComponent
test('deve chamar a função fetchData ao montar o componente', () => {
render(<MyComponent />);
expect(useApi().fetchData).toHaveBeenCalled();
});
Trabalhar com polimorfismo
Quando você precisa trabalhar com diferentes implementações de uma funcionalidade, um custom hook pode ser usado para lidar com o polimorfismo. Você pode criar um custom hook que encapsule a lógica comum e, em seguida, criar várias implementações específicas, permitindo que os componentes escolham a implementação desejada com base em suas necessidades.
function useNotification() {
// Lógica para exibir notificações
}
function MyComponent() {
const { showNotification } = useNotification();
const handleButtonClick = () => {
showNotification('Mensagem de sucesso');
};
// Renderização visual e manipulação de eventos aqui
}
Ao criar diferentes implementações de useNotification
, você pode ter uma versão que mostra notificações no topo da página e outra que usa um componente de notificação flutuante. Os componentes podem escolher qual implementação usar com base nas preferências do aplicativo.
Quer saber mais sobre react e outras dicas de desenvolvimento? Me siga no linkedin!