El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El hook useState es uno de los hooks más fundamentales y utilizados en React. Permite a los componentes funcionales tener un estado interno, algo que anteriormente solo era posible con componentes de clase. En esta lección, aprenderemos cómo usar useState para gestionar el estado en componentes funcionales.

¿Qué es el Hook useState?

El hook useState es una función que permite añadir estado a los componentes funcionales. Cuando se llama, devuelve un par de valores: el estado actual y una función que permite actualizar ese estado.

Sintaxis Básica

const [state, setState] = useState(initialState);

state: El valor actual del estado.
setState: Una función que actualiza el estado.
initialState: El valor inicial del estado.

Ejemplo Práctico

Vamos a crear un contador simple para ilustrar cómo funciona useState.

Paso 1: Importar useState

Primero, necesitamos importar useState desde React.

import React, { useState } from 'react';

Paso 2: Crear el Componente Funcional

Creamos un componente funcional llamado Counter.

function Counter() {
  // Declarar una variable de estado llamada "count" y una función para actualizarla "setCount"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Haz clic
      </button>
    </div>
  );
}

Explicación del Código

Importación de useState: Importamos useState desde React.
Declaración del Estado: Usamos useState para declarar una variable de estado count y una función setCount para actualizarla. Inicializamos count con 0.
Renderizado del Componente: Renderizamos un párrafo que muestra el valor actual de count y un botón que, al hacer clic, incrementa count en 1.

Ejecución del Ejemplo

Cuando el usuario hace clic en el botón, se llama a setCount con el nuevo valor de count (count + 1). React vuelve a renderizar el componente con el nuevo valor de count.

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Entrada Controlada

Crea un componente funcional llamado TextInput que tenga un campo de entrada de texto. Usa useState para gestionar el valor del campo de entrada y muestra el valor actual debajo del campo.

Solución

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <p>Texto actual: {text}</p>
    </div>
  );
}

export default TextInput;

Explicación del Código

Declaración del Estado: Usamos useState para declarar una variable de estado text y una función setText para actualizarla. Inicializamos text con una cadena vacía.
Campo de Entrada: Creamos un campo de entrada cuyo valor está controlado por text. Usamos el evento onChange para actualizar text cada vez que el usuario escribe algo.
Mostrar el Texto: Renderizamos un párrafo que muestra el valor actual de text.

Errores Comunes y Consejos

Error Común 1: No Desestructurar el Par de useState

const stateArray = useState(0);
const count = stateArray[0];
const setCount = stateArray[1];

Consejo: Usa la desestructuración directamente para hacer el código más limpio y legible.

Error Común 2: No Usar la Función de Actualización Correctamente

setCount(count + 1); // Correcto
setCount(prevCount => prevCount + 1); // Mejor para actualizaciones basadas en el estado anterior

Consejo: Cuando la actualización del estado depende del estado anterior, usa la función de actualización que recibe el estado anterior como argumento.

Conclusión

El hook useState es una herramienta poderosa que permite a los componentes funcionales gestionar el estado de manera sencilla y efectiva. En esta lección, hemos aprendido cómo usar useState para crear un contador y un campo de entrada controlada. Con esta base, estarás listo para explorar otros hooks y conceptos avanzados en React.

En la próxima lección, exploraremos el hook useEffect, que permite realizar efectos secundarios en componentes funcionales.

Hook useState

¿Qué es el Hook useState?

Sintaxis Básica

Ejemplo Práctico

Paso 1: Importar useState

Paso 2: Crear el Componente Funcional

Explicación del Código

Ejecución del Ejemplo

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Entrada Controlada

Solución

Explicación del Código

Errores Comunes y Consejos

Error Común 1: No Desestructurar el Par de useState

Error Común 2: No Usar la Función de Actualización Correctamente

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa