# Dominando React Hooks: Guia Completo para Desenvolvedores Iniciantes e Intermediários

---

React Hooks revolucionaram a forma como escrevemos componentes funcionais em React. Se você está começando com React ou já programa com ele há um tempo, entender como e quando usar os hooks pode transformar sua produtividade e qualidade de código.

## O que são React Hooks?

React Hooks são funções que permitem **usar o estado e outros recursos do React em componentes funcionais**. Antes deles, apenas componentes de classe tinham acesso a recursos como estado (`this.state`) e ciclo de vida (`componentDidMount`, etc).

## Por que usar Hooks?

* **Código mais limpo e conciso**
    
* **Maior reutilização de lógica**
    
* **Melhor organização do projeto**
    
* **Adequação à abordagem funcional moderna**
    

## Principais Hooks do React

### 1\. `useState` – Para Gerenciar Estado Local

```jsx
import { useState } from 'react';

function Pagamento() {
  const [valor, setValor] = useState(0);

  return (
    <div>
      <p>Valor do pagamento: R${valor}</p>
      <button onClick={() => setValor(valor + 10)}>Adicionar R$10</button>
    </div>
  );
}
```

### 2\. `useEffect` – Para Efeitos Colaterais

```jsx
import { useEffect, useState } from 'react';

function Transacao() {
  const [transacoes, setTransacoes] = useState([]);

  useEffect(() => {
    fetch('/api/pagamentos')
      .then(res => res.json())
      .then(data => setTransacoes(data));
  }, []); // Executa apenas uma vez

  return (
    <ul>
      {transacoes.map((t) => (
        <li key={t.id}>{t.descricao} - R${t.valor}</li>
      ))}
    </ul>
  );
}
```

### 3\. `useContext` – Para Compartilhar Estado Global

Ideal para autenticação ou dados de sessão de pagamento:

```jsx
const PagamentoContext = React.createContext();

function PagamentoProvider({ children }) {
  const [usuario, setUsuario] = useState(null);

  return (
    <PagamentoContext.Provider value={{ usuario, setUsuario }}>
      {children}
    </PagamentoContext.Provider>
  );
}

function Dashboard() {
  const { usuario } = useContext(PagamentoContext);
  return <h1>Bem-vindo, {usuario?.nome}</h1>;
}
```

### 4\. `useRef` – Para Referências Mutáveis

Útil para capturar input de valor de pagamento, sem renderizar novamente:

```jsx
function InputValor() {
  const inputRef = useRef();

  function handleEnviar() {
    alert("Valor enviado: " + inputRef.current.value);
  }

  return (
    <div>
      <input type="number" ref={inputRef} />
      <button onClick={handleEnviar}>Enviar</button>
    </div>
  );
}
```

## Hooks Customizados

Você pode **criar seus próprios hooks** para reutilizar lógica. Exemplo: hook para formatação de valores:

```jsx
function useFormatoReal(valor) {
  return new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL',
  }).format(valor);
}
```

## Conclusão

Hooks são essenciais no desenvolvimento moderno com React. Dominar `useState`, `useEffect`, `useContext` e `useRef` é o primeiro passo para escrever aplicações robustas, especialmente em cenários reais como **gestão de pagamentos**.

---

**Gostou do conteúdo?** Compartilhe e siga o blog *Dev Prático* para mais dicas práticas de desenvolvimento! 🚀