História e versões

O React existe há tempo suficiente para ter passado por alguns períodos distintos, e conhecer a trajetória geral dessa história ajuda você a entender o código que vai encontrar por aí. Um tutorial de 2017 e um de hoje podem ser ambos "React" mas parecer bem diferentes. Este capítulo percorre a linha do tempo e explica os dois estilos que você vai encontrar.

Uma linha do tempo breve

O React nasceu no Facebook, onde surgiu da necessidade de manter interfaces grandes e cheias de dados sincronizadas sem uma confusão de atualizações manuais do DOM. Foi lançado como open source em 2013, e a ideia no seu centro, descreva a interface para seus dados atuais e deixe o React cuidar das atualizações, permanece constante até hoje. Quase tudo mais sobre como você escreve React evoluiu em torno desse núcleo.

Durante seus primeiros anos, um componente que precisava guardar algo era escrito como uma classe JavaScript. Classes são um recurso JavaScript ordinário, e o React as usou para dar a um componente um lugar para manter dados que mudam ao longo do tempo, junto com um conjunto de métodos com nomes especiais que o React chamaria em certos momentos: quando o componente aparecia na tela, quando era atualizado e quando era removido. Esse estilo foi o padrão por muito tempo, e é por isso que tanto código React já em produção é escrito desse jeito.

O grande ponto de virada veio com hooks, que chegaram no React 16.8 no início de 2019. Um hook é uma função que o React oferece e que permite que um componente função simples faça coisas que antes só uma classe conseguia fazer, como lembrar um valor entre renderizações. Escrever um componente ficou muito mais curto, e componentes função rapidamente se tornaram o padrão para código novo. Hooks cobre isso direito mais adiante. O que você precisa levar daqui é que hooks foram o que tornaram o estilo moderno possível.

O React continuou evoluindo: React 18 chegou em 2022 e React 19 em 2024, cada um adicionando capacidades e suavizando arestas. Essas versões importam mais uma vez que você está construindo aplicações reais, e aparecem depois no manual onde são relevantes.

Esse é o arco em linhas gerais. Você não precisa memorizar datas. O que realmente importa é que o React tem uma história longa, os fundamentos se mantiveram, e o estilo de escrita se movimentou de forma decisiva para componentes função e hooks.

Dois estilos de React que você vai encontrar

Por causa dessa história, você vai se deparar com React escrito em dois estilos notavelmente diferentes.

O estilo antigo escreve um componente como uma classe. Seus dados que mudam vivem dentro da classe, e o React chama métodos com nomes especiais em pontos definidos na vida do componente. Uma quantidade grande de código em produção ainda funciona assim, e muitos tutoriais antigos, posts de blog e respostas no Stack Overflow são escritos desse jeito. Isso ainda funciona e ainda é suportado. É simplesmente a forma anterior de escrever React.

Como o estilo antigo se parece

Este manual não ensina esse estilo e você não precisa escrever assim. Vale a pena conseguir reconhecê-lo, porque você vai encontrá-lo. Uma base de código mais antiga tem componentes que parecem mais ou menos assim:

class Counter extends React.Component {
  state = { count: 0 }

  componentDidMount() {
    // React chama isso uma vez, logo depois que o componente aparece na tela
  }

  render() {
    return <button>Clicado {this.state.count} vezes</button>
  }
}

Três coisas o marcam: class e extends React.Component no início, this.state como o lugar onde seus dados que mudam vivem, e nomes de método começando com component que o React chama automaticamente em momentos definidos.

O estilo moderno escreve um componente como uma função e usa hooks para dar memória a ele e para executar código quando as coisas mudam. É assim que novo código React é escrito, e é o que a documentação oficial agora ensina primeiro.

Este curso ensina React moderno: componentes função e hooks em todo lugar. Quando você provavelmente vai se deparar com o equivalente antigo baseado em classes, seja em uma base de código no trabalho ou um tutorial antigo, a gente sinaliza para que os dois façam sentido na sua cabeça e nenhum um jogue você para fora.

Duas versões depois de hooks valem a pena saber pelo nome. React 18, em 2022, trouxe renderização concorrente: o React ganhou a capacidade de preparar atualizações em background e interromper o trabalho para manter a interface responsiva. Também mudou como uma app inicia, movendo o ponto de entrada para createRoot, que é o que coloca uma app nesses recursos mais novos.

React 19, em 2024, continuou nessa direção. Adicionou Actions para lidar com envios de formulário e estados pendentes, um hook use para ler recursos como promises e context durante render, e deixou você passar ref como uma prop comum em vez de recorrer a forwardRef. Junto com as versões, o React Compiler automatiza memoização: trabalho que desenvolvedores costumavam fazer na mão com useMemo e useCallback pode ser tratado no tempo de compilação.

Hooks deslocaram classes em vez de apenas se sentarem ao lado delas porque o modelo de classes tornou a lógica com estado difícil de compartilhar. Reusar comportamento entre componentes significava envolvê-los em componentes de ordem superior ou passar através de render props, ambos aninhavam sua árvore e obscureciam onde a lógica realmente vivia. Hooks deixam você extrair essa lógica em uma função simples, um hook customizado, e chamar de qualquer componente. A história de reuso ficou dramaticamente mais simples. Hooks também contornam this: componentes classe te forçam a fazer bind de métodos e raciocinar sobre o que this se refere no momento da chamada, uma fonte recorrente de bugs que componentes função não têm.

O trabalho concorrente no React 18 é uma mudança mais profunda do que a troca de createRoot sugere. Alterou como a renderização em si se comporta, bem abaixo do nível da API que você chama. O React agora pode começar a renderizar uma atualização, pausá-la e retomá-la ou abandoná-la, o que significa que uma renderização não é mais garantida de rodar do início ao fim de uma vez. Features como startTransition e carregamento de dados orientado por Suspense se baseiam nisso. É por isso que createRoot importa além de ser apenas um novo nome de função: optar por usar é o que concede ao React permissão para agendar e interromper a renderização desse jeito.

Daqui o manual constrói no estilo moderno, e Components é onde isso começa de verdade: um componente como uma função que retorna um pedaço da sua interface. Antes disso rodar, porém, você precisa ter o React instalado e rodando na sua máquina.

JunoDois estilos, um React Se você encontrar um tutorial onde componentes são escritos como class com this.state e componentDidMount, não se assuste e não pense que está fazendo errado. Esse é o estilo antigo de React, e ainda funciona.

Este curso usa o estilo mais novo, componentes função com hooks, e vou apontar os equivalentes antigos quando a gente passar por eles para nada pegar você desprevenido.

JunoDois estilos, um React Um mapa rápido para ler código real: classes com this.state e lifecycle methods são o estilo pré-hooks, funções com useState e useEffect são React moderno. Você vai ver os dois no trabalho.

A gente constrói no estilo moderno aqui, e vou sinalizar o equivalente baseado em classe quando for a coisa que você realmente vai encontrar.

JunoDois estilos, um React As versões para manter em linha: hooks em 16.8 mudaram o estilo padrão de autoria e corrigiram reuso de lógica sem HOCs ou render props; 18 introduziu renderização concorrente e moveu o ponto de entrada para createRoot; 19 adicionou Actions, o hook use, e ref como uma prop.

Hooks e concorrência são os dois deslocamentos que chegam na semântica de renderização, e são os que vale a pena entender no nível de mecanismo.

Próximo: Setting up a React project, onde você vai colocar o React rodando na sua máquina.