## glossário

O que é React?

React é uma biblioteca JavaScript criada pelo Facebook em 2013 para construir interfaces de usuário. Sua proposta central é descrever a interface como uma função do estado: você declara como a tela deve parecer para cada situação, e o React se encarrega de atualizar o DOM quando os dados mudam.

Isso substitui o modelo imperativo, em que o desenvolvedor manipulava manualmente cada elemento. A diferença aparece rápido: com dez elementos interdependentes, controlar as atualizações à mão vira uma fonte constante de bugs.

Componentes, props e estado

Um componente é uma função que recebe dados e devolve o que deve aparecer na tela. Os dados que vêm de fora são props (imutáveis, do pai para o filho); os dados que o componente controla internamente são estado.

Props entram, estado é interno

function Contador({ titulo, passo = 1 }) {   // props
  const [valor, setValor] = useState(0);     // estado

  return (
    <section>
      <h2>{titulo}</h2>
      <p>Valor atual: {valor}</p>
      <button onClick={() => setValor(valor + passo)}>
        Somar {passo}
      </button>
    </section>
  );
}

<Contador titulo="Cliques" passo={2} />

Os hooks essenciais

useState — cria um pedaço de estado local e a função que o atualiza.
useEffect — executa efeitos colaterais (buscar dados, assinar eventos) após a renderização.
useContext — lê dados compartilhados sem passar props por vários níveis.
useMemo e useCallback — memorizam valores e funções para evitar recálculos caros.
useRef — guarda um valor mutável que não dispara nova renderização.

A regra que mais confunde iniciantes

Estado no React é imutável. Você não altera o valor existente — cria um novo e o entrega ao setter. Modificar um array ou objeto diretamente não dispara nova renderização, porque o React compara referências, não conteúdo.

Errado e certo ao atualizar estado composto

// errado: muta o array existente, a tela não atualiza
tarefas.push(nova);
setTarefas(tarefas);

// certo: cria um novo array, o React percebe a mudança
setTarefas([...tarefas, nova]);

// certo: quando o novo valor depende do anterior
setValor((anterior) => anterior + 1);

O ecossistema em volta

React resolve a camada de interface e deixa o resto para a comunidade: Next.js para roteamento e renderização no servidor, TanStack Query para dados remotos, Zustand ou Redux para estado global, React Hook Form para formulários. Essa modularidade é força e custo — dá liberdade, mas exige decisões. Para começar do zero, veja Iniciando com React.

## faq

Perguntas frequentes

React é framework ou biblioteca?

Oficialmente é uma biblioteca, porque cobre apenas a camada de interface — não traz roteamento, requisições HTTP nem gerenciamento de estado global. Na prática, o conjunto de ferramentas que se usa junto com ele cumpre o papel de um framework.

Qual a diferença entre React e Next.js?

React é a biblioteca de interface. Next.js é um framework construído sobre o React que adiciona roteamento por arquivos, renderização no servidor, geração estática, otimização de imagens e rotas de API. Quem usa Next.js está usando React por dentro.

Por que meu useEffect roda duas vezes em desenvolvimento?

É o StrictMode do React 18 montando e desmontando o componente de propósito, para expor efeitos sem limpeza adequada. Isso acontece apenas em desenvolvimento — em produção roda uma vez. Se o comportamento duplicado quebra algo, o efeito provavelmente precisa de uma função de cleanup.

## leia também