23. State

 

Tutorial: State en React Native

📌 ¿Qué es el State (Estado)?

El State es un objeto que contiene datos dinámicos y cambiantes que controlan el comportamiento de un componente. A diferencia de las props (propiedades), el state SÍ es mutable y puede cambiar directamente desde el componente que lo posee.

🔍 Diferencia clave: Props vs State

Props	State
Se pasan entre componentes (padre → hijo)	Se almacena dentro del componente
Inmutables (no pueden cambiar)	Mutables (pueden cambiar)
Definen configuración inicial	Controlan datos dinámicos

---

🎯 Ejemplo Práctico: Componente con Estado

Vamos a crear un componente que cambia de color al ser presionado.

1. Functional Component con Hook useState

tsx

// mlPrimerComponente.tsx

import React, { useState } from 'react';

import { TouchableOpacity, StyleSheet } from 'react-native';

interface Props {

  color: string;

  colorOnSelected: string;

}

export const MlPrimerComponente = ({ color, colorOnSelected }: Props) => {

  // 1. Definimos el state con useState

  const [selected, setSelected] = useState<boolean>(false);

  // 2. Función que cambia el estado

  const onSelection = () => {

    setSelected(currentValue => !currentValue);

  };

  return (

    <TouchableOpacity

      onPress={onSelection}

      style={[

        style.mainComponent,

        { backgroundColor: selected ? colorOnSelected : color }

      ]}

    />

  );

};

const style = StyleSheet.create({

  mainComponent: {

    width: 56,

    height: 56,

    borderRadius: 8,

  },

});

Explicación paso a paso:

1. useState(false): Inicializa la variable selected con valor false

2. selected: Variable que contiene el valor actual del estado

3. setSelected: Función para actualizar el estado

4. onSelection: Invierte el valor booleano (true ↔ false)

5. Render condicional: Cambia el color según el estado

---

2. Class Component con State

tsx

// mlPrimerComponenteClass.tsx

import React, { Component } from 'react';

import { TouchableOpacity, StyleSheet } from 'react-native';

interface Props {

  color: string;

  colorOnSelected: string;

}

interface State {

  selected: boolean;

}

export class MlPrimerComponenteClass extends Component<Props, State> {

  // 1. Definimos la estructura del state en la interfaz

  // 2. Inicializamos el state en el constructor

  constructor(props: Props) {

    super(props);

    this.state = {

      selected: false,

    };

  }

  // 3. Método para cambiar el estado

  onSelection = () => {

    this.setState(prevState => ({

      selected: !prevState.selected,

    }));

  };

  render() {

    const { color, colorOnSelected } = this.props;

    const { selected } = this.state;

    return (

      <TouchableOpacity

        onPress={this.onSelection}

        style={[

          style.mainComponent,

          { backgroundColor: selected ? colorOnSelected : color }

        ]}

      />

    );

  }

}

const style = StyleSheet.create({

  mainComponent: {

    width: 56,

    height: 56,

    borderRadius: 8,

  },

});

Explicación paso a paso (Class Component):

1. Interfaz State: Define la estructura del estado

2. Genérico Component<Props, State>: Especifica tipos para props y state

3. Constructor: Inicializa el estado con this.state = { selected: false }

4. setState(): Método especial para actualizar el estado

5. Desestructuración: Extraemos selected del state para usarlo en el render

---

🚀 Uso de los Componentes

tsx

// App.tsx

import React from 'react';

import { MlPrimerComponente } from './mlPrimerComponente';

import { MlPrimerComponenteClass } from './mlPrimerComponenteClass';

const App = () => {

  return (

    <>

      {/* Functional Component */}

      <MlPrimerComponente 

        color="blue" 

        colorOnSelected="green" 

      />

      

      {/* Class Component */}

      <MlPrimerComponenteClass 

        color="blue" 

        colorOnSelected="green" 

      />

    </>

  );

};

---

⚡ ¿Qué Sucede al Cambiar el Estado?

1. Trigger: El usuario presiona el componente → ejecuta onSelection

2. Actualización: setSelected o setState cambia el valor del estado

3. Re-render: React detecta el cambio y vuelve a renderizar el componente

4. Actualización visual: El componente muestra el nuevo color

---

🆚 Comparación: Functional vs Class Components

Functional Component con Hooks

• ✅ Más simple y conciso (menos código)

• ✅ useState en una línea

• ✅ Más fácil de leer y mantener

• ✅ Recomendado para componentes nuevos

Class Component

• ✅ Más control sobre el ciclo de vida

• ✅ Métodos como componentDidMount, componentDidUpdate

• ✅ Manejo de errores con componentDidCatch

• ✅ Útil para componentes complejos con múltiples estados

---

📝 Resumen

1. El State almacena datos que pueden cambiar durante la vida del componente

2. Las Props son datos inmutables que se pasan entre componentes

3. useState es el hook para manejar estado en functional components

4. this.setState es el método para manejar estado en class components

5. Cada cambio de estado provoca un re-render del componente

---

💡 Consejo Práctico

Usa Functional Components con Hooks para la mayoría de tus componentes. Son más modernos, fáciles de entender y requieren menos código. Los Class Components son útiles cuando necesitas características específicas del ciclo de vida de React.

---

🎓 Siguiente Paso

Ahora que comprendes el State, puedes:

1. Crear formularios con estados complejos

2. Implementar lógica de selección/marcado

3. Controlar la visibilidad de elementos

4. Gestionar datos que cambian con interacción del usuario

¡Practica creando componentes que cambien de color, tamaño o contenido basado en el estado!