10.2-42. Hook de estado - useState

 

Dominando el Hook useState en React Native

El hook useState es la piedra angular para manejar estado en componentes funcionales de React Native. Te permite añadir estado local a tus componentes y hacer que reaccionen a cambios dinámicos.

🧠 Conceptos Clave de useState

• Estado Reactivo: Cuando el estado cambia, React re-renderiza el componente y sus hijos

• Valores posibles: Puede almacenar cualquier tipo de dato (booleanos, strings, objetos, arrays)

• Actualización: Modificar el estado dispara una re-renderización automática

🛠 Sintaxis Básica

javascript

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const CarComponent = () => {
  // Declaración del estado
  const [isCarOn, setIsCarOn] = useState(false);

  return (
    <View>
      <Text>El coche está: {isCarOn ? 'Encendido' : 'Apagado'}</Text>
      <Button 
        title={isCarOn ? 'Apagar' : 'Encender'} 
        onPress={() => setIsCarOn(!isCarOn)}
      />
    </View>
  );
};

🔄 Dos Formas de Actualizar Estado

1. Valor directo

javascript

setIsCarOn(true); // Fija el valor directamente

2. Función con valor anterior (Recomendado cuando el nuevo estado depende del anterior)

javascript

setIsCarOn(prevState => !prevState); // Usa el valor previo

💡 Caso Práctico: Contador

javascript

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
  const reset = () => setCount(0);

  return (
    <View style={styles.container}>
      <Text style={styles.countText}>{count}</Text>
      <View style={styles.buttonsContainer}>
        <Button title="+" onPress={increment} />
        <Button title="-" onPress={decrement} />
        <Button title="Reset" onPress={reset} />
      </View>
    </View>
  );
};

🚨 Errores Comunes y Buenas Prácticas

❌ No modificar el estado directamente

javascript

// MAL
isCarOn = true;

// BIEN
setIsCarOn(true);

✅ Usar múltiples estados para datos no relacionados

javascript

// Mejor que un objeto grande con todo
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [isAdmin, setIsAdmin] = useState(false);

⚠️ Estado con objetos/arrays

javascript

const [user, setUser] = useState({ name: '', age: 0 });

// Para actualizar:
setUser(prev => ({ ...prev, name: 'Juan' })); // Correcto
// No: setUser({ name: 'Juan' }) // Pierdes la propiedad age

🎯 Ejemplo Avanzado: Formulario

javascript

const SignupForm = () => {
  const [form, setForm] = useState({
    username: '',
    email: '',
    password: '',
    agreeTerms: false
  });

  const handleChange = (field, value) => {
    setForm(prev => ({ ...prev, [field]: value }));
  };

  return (
    <View>
      <TextInput
        value={form.username}
        onChangeText={(text) => handleChange('username', text)}
        placeholder="Nombre de usuario"
      />
      <Switch
        value={form.agreeTerms}
        onValueChange={(value) => handleChange('agreeTerms', value)}
      />
    </View>
  );
};

📌 Conclusión

• useState es esencial para crear componentes dinámicos

• Actualiza el estado correctamente para evitar bugs

• Divide estado complejo en múltiples estados simples

• Usa la forma funcional cuando el nuevo estado depende del anterior

¿Qué tipo de estados manejas frecuentemente en tus apps? ¡Compártelo en los comentarios!