[Sugestão] O que são Hooks?

Os Hooks são uma adição ao React, introduzidos na versão 16.8, que permitem usar estados e outras funcionalidades do React sem precisar escrever uma classe. Eles são essencialmente funções que permitem "enganchar" (daí o nome "Hooks") recursos do React em componentes funcionais. Vamos falar sobre os mais comuns e como eles são usados:

useState O useState é talvez o Hook mais fundamental. Ele é usado para adicionar o gerenciamento de estado em componentes funcionais. Antes dos Hooks, os estados só podiam ser usados em componentes de classe.

Exemplo de uso:

import React, { useState } from 'react';

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

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

Neste exemplo, useState é usado para manter o estado do contador. count é o valor atual do estado, e setCount é uma função que atualiza esse estado.

useEffect O useEffect é usado para executar efeitos colaterais em componentes funcionais. Efeitos colaterais são operações que podem ser realizadas após o componente ser renderizado, como solicitações de dados, manipulações do DOM, timers, etc.

Exemplo de uso:

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // O array vazio indica que esse efeito só acontece uma vez, similar ao componentDidMount

  return (
    <div>
      {data ? <span>{data.title}</span> : <span>Carregando...</span>}
    </div>
  );
}

Aqui, useEffect é usado para buscar dados quando o componente é montado.

useContext O useContext permite que você use dados de um contexto React, que é uma maneira de passar dados de forma "global" entre a árvore de componentes, sem precisar passar explicitamente props em todos os níveis.

Exemplo de uso:

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme === 'dark' ? 'black' : 'white' }}>
      Clique aqui
    </button>
  );
}

Esse código permite que o componente ThemedButton acesse o tema diretamente do contexto.

Outros Hooks Importantes

• useReducer: Uma alternativa ao useState, especialmente útil para estados complexos ou logicamente relacionados.
• useCallback: Retorna uma versão memorizada de uma função.
• useMemo: Memoriza o valor calculado para evitar operações de cálculo pesado em cada renderização.
• useRef: Acessa elementos do DOM diretamente e mantém dados mutáveis que não causam re-renderizações quando alterados. Os Hooks tornaram os componentes funcionais extremamente poderosos e versáteis, simplificando a escrita de componentes e melhorando a organização e legibilidade do código. Eles são fundamentais para trabalhar de forma eficiente com React hoje em dia.