Guías Técnicas

Componentes con Estado en React Native: Uso de useState

  ¿Qué es useState y para qué se usa en React Native?

El hook useState en React se utiliza para manejar el estado dentro de un componente funcional. Permite crear una variable de estado, inicializarla con un valor, y actualizarla cuando sea necesario.

Estructura Básica de useState

El hook useState crea una variable de estado y una función para actualizarla. Se pasa un valor inicial a useState que será el valor de la variable cuando el componente se renderice por primera vez.

jsx 
import React, { useState } from 'react';

function Interruptor() {
// Estado inicial: apagado (false)
const [encendido, setEncendido] = useState(false);

// Función para cambiar el estado
const manejarClick = () => {
  setEncendido(!encendido);
};

return (
  <div style={{ textAlign: 'center', padding: '20px' }}>
    <p>El interruptor está {encendido ? 'Encendido' : 'Apagado'}</p>
    <button 
      onClick={manejarClick} 
      style={{
        backgroundColor: encendido ? 'green' : 'red',
        color: 'white',
        padding: '10px 20px',
        fontSize: '16px',
        cursor: 'pointer',
        border: 'none',
        borderRadius: '5px',
      }}
    >
      {encendido ? 'Apagar' : 'Encender'}
    </button>
  </div>
);
}

export default Interruptor;

🚀 Ejemplo Básico: Interruptor

El hook useState en este ejemplo se utiliza para manejar el estado del interruptor, inicializándolo en false (apagado). Cada vez que se hace clic en el botón, la función manejarClick invierte el valor del estado de encendido, alternando entre true (encendido) y false (apagado).


  Importante

Si aún tienes dudas sobre cómo trabajar con el hook useState, te recomiendo revisar el recurso adicional Ejemplos de Hooks, donde encontrarás ejemplos prácticos que te ayudarán a dominarlo correctamente.

  Resumen

El hook useState en React Native es fundamental para gestionar el estado de los componentes funcionales. Permite inicializar una variable de estado y actualizarla dinámicamente.

Con useState, puedes gestionar todo tipo de interacciones en tus componentes, como contadores, entradas de usuario, o cualquier dato que deba cambiar durante la vida útil del componente.