O Que É Estado?

Até agora, tudo era estático: os dados entravam, uma página saía, nada nunca mudava. Aplicativos de verdade lembram coisas que mudam: a contagem de curtidas, um menu aberto, o texto em uma caixa de pesquisa. Essa memória é chamada de estado.

O React fornece 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 um valor diretamente ao estado. count = 5 gera um erro, porque count é uma const. Mesmo que pudesse mudar, o React não saberia disso. setCount(5) altera o estado e renderiza novamente o componente. É essa nova renderização que atualiza a tela.