O Que É Estado?

Tudo até agora era estático: os dados entravam, uma página saía, nada mudava. Aplicativos reais lembram de coisas que mudam: uma contagem de curtidas, um menu aberto, o texto em uma caixa de busca. Essa memória é chamada de estado (state).

O React dá estado aos componentes por meio do hook useState:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    ...
}

Uma linha, três partes:

• count: o valor atual
• setCount: a função que o altera
• useState(0): o valor inicial

A regra de ouro: nunca atribua valores ao estado diretamente. count = 5 altera uma variável que o React não está observando. setCount(5) altera o estado e renderiza novamente o componente. Essa nova renderização é o que atualiza a tela.