Módulo 4 INTERATIVIDADE

Atividade 16: Entendendo o Estado (useState)

Bem-vindo ao coração do React! Aprenda a criar telas vivas que reagem e mudam dados em tempo real.

🎯 Objetivos desta aula

✓ Compreender a diferença entre Variáveis Normais VS Variáveis de Estado
✓ Aprender a importar e utilizar o Hook useState()
✓ Desvendar a mágica do Re-Render (Re-desenho) automático da tela

🪫 O Limite das Variáveis Normais

Muitos iniciantes tentam mudar um texto na tela criando uma variável let nome = "João" e atrelando-a a um botão que faz nome = "Maria". O código roda silenciosamente, a variável muda sua essência na memória do celular... Mas a tela nunca atualiza! Pra quem está olhando o App, ainda está escrito "João".

Isso acontece porque as telas do React são míopes. Elas leem a Variável apenas 1 vez (quando a tela abre e diz Render). Se mudarmos a variável comum depois, o React não fica vigiando-a pra gastar bateria a toa. Conclusão: não há Re-Render (Re-desenho). O App se congela visualmente no momento do nascimento!

⚠️ O Modo Errado (Não Funciona visualmente)

let nomeHeroi = 'Batman';

function mudarNome() {
  nomeHeroi = 'Superman'; 
  console.log(nomeHeroi); // No terminal imprime 'Superman'. Mas a Tela CONTINUA MOSTRANDO BATMAN PRA SEMPRE!
}

🔋 A Mágica do Estado (State)

O State é uma variável vigiada. Ao criar uma variável com o useState, o React coloca um "sininho" nela. Se você a alterar, o sino toca. O sistema leva um choque e fala: "OPA! A Variável mudou!! Destrua toda a Interface Velha e Redesenhe O BURACO DO MEU APLICATIVO DO ZERO COM A PALAVRA NOVA!". A tela ganha vida! E isso leva milésimos se segundo graças ao C++.

Nós criamos e controlamos as variáveis Mágias usando a ferramenta-Hook chamada useState. Nós declaramos ela trazendo Duas Coisas e Uma Caixa Gêmeas Encadeadas :


                          const [ nome, setNome ] = useState( 'Batman' );

nome: A Variável Mágica em si, que pode ser lida em `{nome}` normalmente.
setNome: A FERRAMENTA DE TROCA DE ROUPA (Função). O React PROIBE você de usar o sinal de igual `=` para alterar a variável. O único poder que pode alterá-la e tocar o Sino de re-renderização do App é usar o Set() nela inteira!
useState('Batman'): Dentro dos parênteses redondos declaramos o conteúdo 'padrão/inicial' do berço da variável para o momento em que a página carregar a primeira vez!

💻 Exemplo Quebrando Feitiços

Olhe a anatomia da variável de Estado real em React Native:

EstadoVivo.js

import React, { useState } from 'react'; // IMPORTANTE O IMPORT DO HOOK DO REACT E NÃO REACT NATIVE! 
import { View, Text, Button } from 'react-native';

export default function App() {
  
  // 1. Criamos o Estado dentro do Corpo Funcional Base
  const [heroi, setHeroi] = useState('Batman');

  // 2. A Função Alteradora Exclusiva
  function mudarHeroi() {
    // É PROIBIDO FAZER: heroi = 'Superman'
    // Jeito CORRETO (Invocar o Set passando a palavra inteira para alertar ao O.S iOS/Android)
    setHeroi('Superman'); 
  }

  // 3. O Render Base da Função que será Atualizado Dinamicamente Injeta o Valor em Bigodes!
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 30, marginBottom: 20 }}>
         Herói Atual: {heroi}
      </Text>
      
      <Button title="Eu sou o Menino de Aço!" onPress={mudarHeroi} />
    </View>
  );
}

🎮 Desafios Práticos

Aperte as Chaves de Fenda das Variáveis e brinque no Expo Snack!

DESAFIO 1

Modificar 🛠️

Copie o código base e jogue no Snack do Expo.
Modifique primeiro o valor dentro de `useState('Batman')` para o seu próprio nome! Veja que ao recarregar a primeira inicialização será a SUA.
Tente adicionar um segundo botão chamdo "Sou do Asilo Arkham" e crie uma função "voltarBatman" que invoca `setHeroi('Coringa')`. E alterne a tela entre os 2!

DESAFIO 2

Tipos de Variaveis Diferentes (Quebrando o Molde) ✨

Crie um Booleano do zero!.

Crie de cabeça uma estrutura de useState chamada [ligado, setLigado] e faça seu valor incial (Dentro de useState) ser o Booleano `false` cru (SEM ASPAS POIS NÃO É STRING)!
Tente fazer um Render Dinâmico condicional como Text da última aula: { ligado ? 'LUZ VIVA!' : 'ESCURO...' }.
Se conseguir, tente fazer um botão que puxe `setLigado(true)`.

📝 Quiz - O hook mágico

Anterior ← Atividade 15 Próxima Atividade 17: O Contador →