Dominando React Hooks na Prática

Os Hooks revolucionaram a forma como escrevemos componentes no React, permitindo o uso de estado e outros recursos do React sem escrever classes. Neste artigo, vamos explorar os principais Hooks e como aplicá-los em projetos reais.

O que são React Hooks?

Hooks são funções que permitem "conectar" os recursos de estado e ciclo de vida do React a partir de componentes funcionais. Eles foram introduzidos no React 16.8 e desde então se tornaram fundamentais no desenvolvimento com React.

useState: Gerenciamento de Estado Simples

O Hook useState é o mais básico e permite adicionar estado a componentes funcionais:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

useEffect: Efeitos Colaterais

O Hook useEffect permite executar efeitos colaterais em componentes funcionais:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar ao componentDidMount e componentDidUpdate:
  useEffect(() => {
    // Atualiza o título do documento usando a API do browser
    document.title = `Você clicou ${count} vezes`;
  });

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

useContext: Acesso ao Contexto

O Hook useContext permite acessar o valor de um contexto sem precisar do Consumer:

import React, { useContext } from 'react';
import { ThemeContext } from './theme-context';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useReducer: Gerenciamento Complexo de Estado

Para lógica de estado mais complexa, useReducer é uma alternativa poderosa ao useState:

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

Conclusão

Os Hooks do React representam uma mudança significativa na forma como construímos componentes. Eles promovem uma melhor organização do código, reutilização de lógica e simplificação de componentes complexos. Dominar os principais Hooks é essencial para qualquer desenvolvedor React moderno.