Hooks: Como fazer seu App “lembrar” das informações – useState React Native Tutorial

Se você seguiu nossa trilha até aqui, já sabe desenhar telas e detectar toques. Mas repare em algo: até agora, nosso App não tem “memória”. Se você clica em um botão para somar um número, o App esquece o valor assim que a função termina. Para criar aplicativos dinâmicos (como um contador, um carrinho de compras ou um formulário), precisamos dos Hooks, especificamente o usestate react native tutorial.

🧠 O que é o useState?

Imagine que o useState é uma pequena caixa dentro do seu componente. Você pode guardar um valor lá dentro e, toda vez que esse valor mudar, o React Native “redesenha” a tela automaticamente para mostrar a nova informação.

Ele sempre nos entrega duas coisas:

1. O Estado: O valor atual (a memória).
2. A Função de Atualização: A ferramenta para mudar esse valor.

🛠️ Prática de Laboratório: O Contador de Cliques

Vamos criar um exemplo clássico. Cada vez que o aluno toca no botão, o número na tela aumenta.

JavaScript

import React, { useState } from 'react'; // Importando o Hook
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

export default function Contador() {
  // Criando a 'memória' do contador, começando em 0
  const [cliques, setCliques] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.titulo}>Total de Cliques: {cliques}</Text>
      
      <TouchableOpacity 
        style={styles.botao} 
        onPress={() => setCliques(cliques + 1)}
      >
        <Text style={styles.textoBotao}>Aumentar Contador</Text>
      </TouchableOpacity>

      <TouchableOpacity 
        style={[styles.botao, { backgroundColor: 'red', marginTop: 10 }]} 
        onPress={() => setCliques(0)}
      >
        <Text style={styles.textoBotao}>Zerar</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  titulo: {
    fontSize: 24,
    marginBottom: 20,
  },
  botao: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 10,
    width: 200,
    alignItems: 'center'
  },
  textoBotao: {
    color: '#fff',
    fontWeight: 'bold',
  },
});

📐 Transposição Didática: Por que não usar variáveis comuns?

Muitos alunos perguntam: “Professor, por que não posso usar um let x = 0?”. A resposta é simples: o React Native não fica vigiando variáveis comuns. Quando você usa o useState, você avisa ao React: “Ei, se esse valor mudar, atualize a interface para o usuário!”. Isso é o que chamamos de Reatividade.

🧠 Pensamento Analítico: Desafio do Semáforo

Tente modificar o código acima para que, em vez de números, o estado guarde uma cor (ex: ‘Verde’). Ao clicar no botão, a cor deve mudar para ‘Amarelo’ e depois para ‘Vermelho’.

⬅️ Artigo Anterior: Dando Vida ao App: Eventos e Interatividade

➡️ Próximo Passo: Capturando Dados: Trabalhando com TextInput