Hooks Customizados

Documentação dos hooks customizados disponíveis na aplicação.

useLogin

Hook para autenticação de usuários.

Localização

apps/web/src/hooks/useAuth.ts

Retorno

Propriedade	Tipo	Descrição
login	(data: LoginInput) => Promise<void>	Função de login
isLoading	boolean	Estado de carregamento

Exemplo de Uso

'use client';

import { useLogin } from '@/hooks/useAuth';

function LoginForm() {
  const { login, isLoading } = useLogin();

  const handleSubmit = async (data: { email: string; password: string }) => {
    await login(data);
    // Após sucesso, redireciona automaticamente para /dashboard
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input name="email" type="email" />
      <Input name="password" type="password" />
      <Button type="submit" disabled={isLoading}>
        {isLoading ? 'Entrando...' : 'Entrar'}
      </Button>
    </form>
  );
}

Comportamento

1. Chama authService.login(data)
2. Define cookie SESSION para autenticação
3. Atualiza estado global (Zustand) com usuário e token
4. Configura contexto do Sentry
5. Exibe toast de sucesso
6. Redireciona para /dashboard

Tratamento de Erros

Erros são exibidos automaticamente via toast.error().

---

useDebounce

Hook para debounce de valores. Útil para evitar chamadas excessivas em inputs de busca.

Localização

apps/web/src/hooks/use-debounce.ts

Parâmetros

Parâmetro	Tipo	Descrição	Default
value	T	Valor a ser debounced	-
delay	number	Delay em milissegundos	500

Retorno

Tipo	Descrição
T	Valor debounced

Exemplo de Uso

'use client';

import { useState } from 'react';
import { useDebounce } from '@/hooks/use-debounce';

function SearchInput() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 300);

  // Efeito dispara apenas quando o valor debounced muda
  useEffect(() => {
    if (debouncedSearch) {
      searchContacts(debouncedSearch);
    }
  }, [debouncedSearch]);

  return (
    <Input
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Buscar contatos..."
    />
  );
}

Como Funciona

---

Boas Práticas

Dicas

1. Prefixo use: Sempre nomeie hooks customizados com o prefixo use
2. Client Components: Hooks só funcionam em Client Components ('use client')
3. Composição: Combine hooks para criar comportamentos complexos
4. Tipagem: Sempre defina tipos para parâmetros e retornos

Próximos Passos

• Services →
• Design System →