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

Matheus AlmeidaMatheus Almeida
2 min read

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

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

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:

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:

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:

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! 🚀

0
Subscribe to my newsletter

Read articles from Matheus Almeida directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Matheus Almeida
Matheus Almeida

Desenvolvedor focado em PL/SQL, Java, Angular e qualidade de código.