Aprendendo hooks com associações em RPG

Por mais que esse seja um conteúdo "básico" para muitos, eu sempre gostei de usar associações para entender melhor os conceitos. Além disso, tenho me deparado com vários hooks do React e do Next que ainda não conheço, então decidi criar um compilado de posts explicando um por um. Assim, eu aprendo e te ajudo a aprender também.

O hook useState está entre os mais utilizados no React, sendo parte essencial da nossa rotina. Então, provavelmente você já o conhece. Mas talvez essa explicação ajude você a lembrar com mais clareza por que o usamos tanto. Agora se imagine num jogo de RPG e vamos começar!

Imagina que você tá jogando um RPG e tem uma barra de vida. A cada dano que você leva, a barra diminui. Se usar uma poção, ela aumenta.

O useState no React funciona assim! Ele guarda um valor e te dá uma função pra atualizar esse valor. No código, seria algo assim:

const [vida, setVida] = useState(100);

Aqui, vida é o valor atual e setVida é a função que altera esse valor. Se o personagem levar dano, setVida(vida - 10). Se usar uma poção, setVida(vida + 20). O React vê essa mudança e atualiza a tela automaticamente.

Mas o useState não guarda só números. Ele pode armazenar qualquer coisa, até objetos!

Agora pensa num jogo onde você coleta itens e precisa armazenar tudo na mochila. Em React, poderíamos representar isso assim:

const [mochila, setMochila] = useState([]);

Se você pegar uma espada, atualiza assim:

setMochila([...mochila, "Espada Lendária"]);

E se quiser remover um item, faz algo como:

setMochila(mochila.filter(item => item !== "Espada Lendária"));

Ou seja, o useState é tipo um inventário dinâmico no seu jogo. Ele guarda o que for necessário e te dá ferramentas pra alterar isso quando precisar.

No fim, usar useState no React é como gerenciar recursos em um jogo: você acompanha mudanças, reage a eventos e garante que tudo fique atualizado na tela.