𝗚𝘂𝗶𝗮 𝗱𝗲 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗻𝗼 𝗥𝗲𝗮𝗰𝘁
Sua barra de senha muda de fraca para forte conforme você digita. O React lembra o que você digita através do state.
O state armazena dados. Ele rastreia o que você digita ou clica.
Imagine que você digita seu nome.
- Seu estado inicial é uma string vazia.
- Você digita J.
- Você chama uma função para atualizar o state de "" para "J".
- Você digita o.
- Você chama a função para alterar o state para "Jo".
Toda vez que você atualiza o state, o React renderiza a UI novamente. Re-renderizar significa que o React limpa a visualização antiga e desenha uma nova com seus dados atualizados.
Por que não usar variáveis comuns? Uma variável comum muda no seu código, mas não atualiza a tela. Seus usuários verão dados antigos. O state do React resolve isso conectando seus dados à sua UI.
Como usar o useState:
Importe-o do React. import { useState } from 'react';
Declare-o. const [age, setAge] = useState(20);
Neste exemplo:
- age é o seu valor atual.
- setAge é a função para alterar o valor.
- 20 é o seu valor inicial.
Tente isso agora. Abra um projeto React. Crie um contador. Clique em um botão para atualizar a contagem. Observe a tela mudar instantaneamente.
Fonte: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i