¿Para qué se utiliza la directiva useState?

useState — es un hook de React que permite agregar estado a componentes funcionales. Devuelve un array con dos elementos: el valor actual del estado y una función para actualizarlo. Al llamar a la función de actualización, el componente se vuelve a renderizar con el nuevo valor.

Ejemplo de uso:

import { useState } from 'react';

function Counter() {
  // 'count' es el estado actual, 'setCount' es la función para actualizarlo
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Características principales:

• Agrega estado: Permite usar estado en componentes funcionales, anteriormente solo en clases.
• Función de actualización: Devuelve una función especial para cambiar el estado.
• Re-renderizado: Cambiar el estado mediante la función de actualización provoca un re-renderizado del componente.
• Primitivos y objetos: Puede almacenar cualquier tipo de dato: números, cadenas, booleanos, objetos, arreglos.
• Inicialización perezosa: El valor inicial puede ser una función que solo se ejecuta en el primer render, útil para cálculos costosos.

const [data, setData] = useState(() => {
  // Cálculos costosos que solo se ejecutan una vez
  const initialData = someExpensiveCalculation();
  return initialData;
});