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!