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

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

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

Comments

More from this blog

Docker: O que é, como funciona e por que usar no desenvolvimento de software

Como Funcionam os Sistemas de Mensageria: Entendendo o RabbitMQ na Prática

Como o Agile transforma a vida de um desenvolvedor (e por que você deveria se importar)

Monorepos com Nx: Organização e Produtividade em Projetos de Desenvolvimento

O que são React Hooks?

Por que usar Hooks?

Principais Hooks do React

1. `useState` – Para Gerenciar Estado Local

2. `useEffect` – Para Efeitos Colaterais

3. `useContext` – Para Compartilhar Estado Global

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

Hooks Customizados

Conclusão

Command Palette

Comments

More from this blog

O que são React Hooks?

Por que usar Hooks?

Principais Hooks do React

1. useState – Para Gerenciar Estado Local

2. useEffect – Para Efeitos Colaterais

3. useContext – Para Compartilhar Estado Global

4. useRef – Para Referências Mutáveis

Hooks Customizados

Conclusão

1. `useState` – Para Gerenciar Estado Local

2. `useEffect` – Para Efeitos Colaterais

3. `useContext` – Para Compartilhar Estado Global

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