10.1-23. State

 

Dominando el State en React Native: Datos Dinámicos en Componentes

El state (estado) es uno de los conceptos más importantes en React Native. A diferencia de las props (que son inmutables), el state permite manejar datos que pueden cambiar durante la vida del componente, desencadenando actualizaciones en la interfaz.

🔄 State vs Props: Diferencias Clave

State	Props
Datos internos del componente	Datos pasados desde un componente padre
Mutable (puede cambiar)	Inmutable (solo lectura)
Controla el comportamiento dinámico	Configuración inicial
Cambios causan re-render	Cambios deben venir del padre

🎣 State en Functional Components (con Hooks)

La forma moderna usando useState:

jsx

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

interface CircleProps {
  color: string;
  colorOnSelect: string;
}

function Circle({ color, colorOnSelect }: CircleProps) {
  const [selected, setSelected] = useState<boolean>(false);

  const handleSelection = () => {
    setSelected(prevSelected => !prevSelected); // Invierte el valor
  };

  return (
    <TouchableOpacity onPress={handleSelection}>
      <View style={{
        width: 50,
        height: 50,
        backgroundColor: selected ? colorOnSelect : color
      }} />
    </TouchableOpacity>
  );
}

Características:

• useState devuelve un array con:

  • Valor actual

  • Función para actualizarlo

• Puedes tipar el estado con TypeScript

• Actualizaciones son asíncronas

🏛 State en Class Components

La forma tradicional (aún útil para entender fundamentos):

jsx

import React from 'react';
import { TouchableOpacity, View } from 'react-native';

interface CircleProps {
  color: string;
  colorOnSelect: string;
}

interface CircleState {
  selected: boolean;
}

class CircleClass extends React.Component<CircleProps, CircleState> {
  constructor(props: CircleProps) {
    super(props);
    this.state = {
      selected: false
    };
  }

  handleSelection = () => {
    this.setState(prevState => ({
      selected: !prevState.selected
    }));
  };

  render() {
    const { color, colorOnSelect } = this.props;
    const { selected } = this.state;

    return (
      <TouchableOpacity onPress={this.handleSelection}>
        <View style={{
          width: 50,
          height: 50,
          backgroundColor: selected ? colorOnSelect : color
        }} />
      </TouchableOpacity>
    );
  }
}

Diferencias clave:

• Requiere definir interfaz para el state

• Se inicializa en el constructor

• Se actualiza con this.setState()

• Más verboso pero ofrece ciclos de vida

💡 Buenas Prácticas con State

1. No modifiques el state directamente:

   jsx

   // ❌ MAL
   this.state.selected = true;
   
   // ✅ BIEN (Class)
   this.setState({ selected: true });
   
   // ✅ BIEN (Functional)
   setSelected(true);

2. Actualizaciones basadas en estado anterior:

   jsx

   // Forma segura para dependencias del estado anterior
   setSelected(prevSelected => !prevSelected);

3. State mínimo necesario: Evita duplicar datos que puedan calcularse

4. Tipado fuerte con TypeScript:

   tsx

   interface UserState {
     name: string;
     age: number;
     isLoading: boolean;
   }
   
   const [user, setUser] = useState<UserState>({
     name: '',
     age: 0,
     isLoading: false
   });

🚀 Ejemplo Avanzado: Formulario con State

jsx

function LoginForm() {
  const [form, setForm] = useState({
    email: '',
    password: '',
    rememberMe: false
  });

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

  return (
    <View>
      <TextInput
        value={form.email}
        onChangeText={(text) => handleChange('email', text)}
        placeholder="Correo electrónico"
      />
      
      <TextInput
        value={form.password}
        onChangeText={(text) => handleChange('password', text)}
        secureTextEntry
        placeholder="Contraseña"
      />
      
      <Switch
        value={form.rememberMe}
        onValueChange={(value) => handleChange('rememberMe', value)}
      />
    </View>
  );
}

📌 Conclusión

• Functional Components + Hooks son el estándar actual (más limpio y conciso)

• Class Components son útiles para entender fundamentos y legacy code

• El state controla la dinámica de tu interfaz

• Cada cambio de state puede trigger un re-render

¿Prefieres usar hooks o clases para manejar estado? ¡Compártelo en los comentarios!