Como Usar useState
O que é useState?
useState é provavelmente o hook mais fundamental do React. Ele resolve a seguinte situação:
Quero que esse componente mantenha um valor e seja renderizado novamente quando esse valor mudar.
O conceito de estado
Podemos simplificar a ideia de estado no React como os dados estão guardados em um determinado momento. Dados podem mudar constantemente de uma renderização para outra.
Parâmetros
A assinatura conceitual do useState é
useState(initialState) -> [state, setState]
Ele recebe um único parâmetro, o estado inicial, que pode ser praticamente qualquer valor.
Retorno
É um array de exatamente dois elementos [value, setValue]. Por convenção, as variáveis vão seguir esse padrão algumaCoisa, setAlgumaCoisa. Os elementos retornados representam:
- O estado atual
- A função para atualizar o estado atual
A função set também pode ser usada para manipular o valor atual.
setAge(a => a + 1); sendo a o valor atual do estado.
Prática
Observações
- Só pode ser chamado no nível superior do componente. Não pode ser invocado dentro de condicionais, loops ou funções aninhadas.
- Em Strict Mode, o React vai executar o useState duas vezes.