Guías Técnicas

Comparativa entre React useState y el manejo de estado en JavaScript puro

Cuando trabajamos con JavaScript puro, el manejo del estado generalmente involucra manipular directamente el DOM o usar variables para actualizar los datos de una aplicación. Sin embargo, con la llegada de frameworks como React, el enfoque para gestionar el estado cambió completamente. React introduce el hook useState, una herramienta que facilita la gestión del estado de manera eficiente y reactiva.

  Introducción

En este post, exploraremos las diferencias clave entre el uso de useState en React y el manejo del estado en JavaScript puro. Veremos cómo useState simplifica la actualización del estado en componentes y por qué este enfoque es más eficaz en aplicaciones web dinámicas.

Este ejemplo muestra cómo crear un contador simple utilizando JavaScript puro. El contador se actualiza al hacer clic en los botones de incrementar y decrementar. El valor del contador se visualiza en un párrafo y se actualiza dinámicamente cada vez que el usuario interactúa con los botones. Este es un ejemplo básico para entender cómo manejar el estado y la interacción con elementos del DOM sin depender de frameworks como React.

html 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador</title>
</head>
<body>
  <p id="contador"></p>
  <button id="incrementar">Incrementar</button>
  <button id="decrementar"> Decrementar</button>
<script>
  let contador = 0;

const incrementarContador = () => {
  contador++;
  console.log(contador);
  document.getElementById('contador').innerText = 'Contador: ' + contador;
};

function decrementarContador() {
  if (contador > 0) {
    contador--;
    document.getElementById('contador').innerText = 'Contador: ' + contador;
  }
}

// Iniciar el contador
document.getElementById('contador').innerText = 'Contador: ' + contador;

// Asignar evento de clic al botón
document.getElementById('incrementar').addEventListener('click', incrementarContador);

// Asignar evento de clic al botón de decrementar
document.getElementById('decrementar').addEventListener('click', decrementarContador);
</script>
</body>
</html>

El hook useState de React y su funcionamiento en comparación con JavaScript normal.

  • ¿Qué es useState? es un hook que permite a los componentes funcionales de React manejar el estado. Proporciona una forma de declarar una variable de estado y una función para actualizarla.

Cómo funciona:

  • Cuando llamas a useState, le pasas un valor inicial (por ejemplo, 0).
  • Devuelve un array con dos elementos: el estado actual y una función para actualizar ese estado.
  • Cuando se llama a la función de actualización, React vuelve a renderizar el componente con el nuevo estado.

Diferencias con JavaScript Normal

  • Reactividad: En JavaScript normal, el estado se maneja a través de variables y no hay un sistema automático para volver a renderizar la interfaz de usuario. En cambio, useState permite que React detecte cambios en el estado y actualice la UI automáticamente.
  • Encapsulamiento: useState encapsula la lógica de estado dentro del componente, mientras que en JavaScript normal, debes gestionar el estado y la actualización de la UI manualmente.

Ejemplo Comparativo

jsx 
import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  const incrementarContador = () => {
    setContador(contador + 1);
  };

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={incrementarContador}>Incrementar</button>
    </div>
  );
}
export default Contador;

Ejemplo con JavaScript Normal

javascript 
let contador = 0;
function incrementarContador() {
  contador++;
}
  Resumen

useState proporciona una forma sencilla y eficiente de manejar el estado en componentes de React, permitiendo que la UI se actualice automáticamente al cambiar el estado, lo cual no es tan directo en JavaScript normal.

En JavaScript puro, para manejar estado, tendrías que gestionar la manipulación del DOM y las variables por tu cuenta.

Diferencia clave:

  • En JavaScript normal, actualizas directamente el DOM.
  • En React, useState maneja automáticamente el renderizado del componente cuando el estado cambia.

Manejar el estado de un input en React

Este ejemplo muestra cómo manejar el estado de un campo de entrada (input) en React utilizando el hook useState. A medida que el usuario escribe en el campo, el estado name se actualiza y refleja en el componente, mostrando un saludo con el nombre ingresado. Este patrón es fundamental para gestionar formularios y entradas de usuario en aplicaciones React.

jsx 
import { useState } from 'react';

function Form() {
  const [name, setName] = useState('');

  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
      />
      <p>Hello, {name}</p>
    </div>
  );
}

export default Form;

Manejar el estado de un input en JavaScript puro

javascript 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Example</title>
</head>
<body>
  <div>
    <input type="text" id="nameInput" placeholder="Enter your name">
    <p>Hello, <span id="nameDisplay"></span></p>
  </div>

  <script>
    // Seleccionamos el input y el lugar donde mostraremos el texto
    const nameInput = document.getElementById('nameInput');
    const nameDisplay = document.getElementById('nameDisplay');

    // Agregamos un listener para detectar cambios en el input
    nameInput.addEventListener('input', function(event) {
      nameDisplay.textContent = event.target.value; // Actualizamos el contenido
    });
  </script>
</body>
</html>
  Explicación

  • Se selecciona el input (#nameInput) y el elemento donde se mostrará el valor (#nameDisplay).
  • Se usa el evento input para capturar los cambios y se actualiza el DOM directamente cada vez que el usuario escribe algo.

Cambiar el color de un div basado en el valor de un input con React

Este ejemplo en React permite cambiar el color de un div en función del valor ingresado en un input. Al escribir el nombre de un color en el campo de texto, el estado color se actualiza y el estilo del div se ajusta dinámicamente, cambiando su fondo al color introducido. Este tipo de interacción es útil para crear interfaces personalizadas y reactivas.

jsx 
import { useState } from 'react';

function ColorChanger() {
  const [color, setColor] = useState('');

  return (
    <div>
      <input 
        type="text" 
        placeholder="Enter a color" 
        value={color} 
        onChange={(e) => setColor(e.target.value)} 
      />
      <div style={{ width: '100px', height: '100px', backgroundColor: color }}>
        Box
      </div>
    </div>
  );
}

export default ColorChanger;

JavaScript puro

Este ejemplo en JavaScript puro permite cambiar el color de fondo de un div a medida que el usuario escribe un color en un campo de texto. Al escuchar el evento input en el input de texto, el color de fondo del div se actualiza dinámicamente con el valor ingresado, mostrando cómo se puede interactuar con los estilos en tiempo real usando JavaScript.

html 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Changer</title>
</head>
<body>
  <input type="text" id="colorInput" placeholder="Enter a color">
  <div id="colorBox" style="width: 100px; height: 100px; background-color: lightgray;">Box</div>

  <script>
    const colorInput = document.getElementById('colorInput');
    const colorBox = document.getElementById('colorBox');

    colorInput.addEventListener('input', function(event) {
      colorBox.style.backgroundColor = event.target.value; // Cambiar color de fondo
    });
  </script>
</body>
</html>

Mostrar u ocultar un párrafo al hacer clic en un botón con React

jsx 
import { useState } from 'react';

function ToggleText() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Hide' : 'Show'} Text
      </button>
      {isVisible && <p>This is a toggled text!</p>}
    </div>
  );
}

export default ToggleText;

Mostrar u ocultar un párrafo al hacer clic en un botón con JavaScript puro

html 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Text</title>
</head>
<body>
  <button id="toggleButton">Hide Text</button>
  <p id="toggleText">This is a toggled text!</p>

  <script>
    const toggleButton = document.getElementById('toggleButton');
    const toggleText = document.getElementById('toggleText');

    toggleButton.addEventListener('click', function() {
      if (toggleText.style.display === 'none') {
        toggleText.style.display = 'block'; // Mostrar
        toggleButton.textContent = 'Hide Text';
      } else {
        toggleText.style.display = 'none'; // Ocultar
        toggleButton.textContent = 'Show Text';
      }
    });
  </script>
</body>
</html>
  Resumen

  • React gestiona el estado y el re-renderizado del componente automáticamente.
  • JavaScript puro requiere manejar manualmente el DOM (como cambiar estilos o agregar/quitar elementos).

Capturar valor de select en React:

jsx 
import { useState } from 'react';

function SelectExample() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <div>
      <select value={selectedValue} onChange={handleChange}>
        <option value="">Choose an option</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
      <p>Selected value: {selectedValue}</p>
    </div>
  );
}

export default SelectExample;

Capturar valor de select en JavaScript puro

html 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Example</title>
</head>
<body>
  <select id="fruitSelect">
    <option value="">Choose an option</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </select>
  <p>Selected value: <span id="selectedValue"></span></p>

  <script>
    const fruitSelect = document.getElementById('fruitSelect');
    const selectedValueDisplay = document.getElementById('selectedValue');

    fruitSelect.addEventListener('change', function() {
      selectedValueDisplay.textContent = fruitSelect.value;
    });
  </script>
</body>
</html>
  Resumen

  • En React, useState maneja el valor seleccionado y se actualiza automáticamente cuando cambia.
  • En JavaScript puro, se usa addEventListener para escuchar el cambio en el select y actualizar el DOM manualmente.

Ejemplo en React (Switch activo/inactivo):

jsx 
import { useState } from 'react';

function ToggleSwitch() {
  const [isActive, setIsActive] = useState(false);

  const toggleSwitch = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <button onClick={toggleSwitch}>
        {isActive ? 'Deactivate' : 'Activate'}
      </button>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}

export default ToggleSwitch;

Ejemplo en JavaScript puro (Switch activo/inactivo)

html 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Switch Example</title>
</head>
<body>
  <button id="toggleButton">Activate</button>
  <p>Status: <span id="statusText">Inactive</span></p>

  <script>
    const toggleButton = document.getElementById('toggleButton');
    const statusText = document.getElementById('statusText');
    let isActive = false;

    toggleButton.addEventListener('click', function() {
      isActive = !isActive; // Alterna entre true y false

      if (isActive) {
        statusText.textContent = 'Active';
        toggleButton.textContent = 'Deactivate';
      } else {
        statusText.textContent = 'Inactive';
        toggleButton.textContent = 'Activate';
      }

    // Usando un Operador Ternario
    // statusText.textContent = isActive ? 'Active' : 'Inactive';
    // toggleButton.textContent = isActive ? 'Deactivate' : 'Activate';
    });
  </script>
</body>
</html>
  Explicación

  • React: Usamos el hook useState para gestionar el estado isActive. Al hacer clic en el botón, se alterna el estado y el componente se re-renderiza automáticamente con el nuevo estado.
  • JavaScript puro: Usamos una variable isActive para almacenar el estado. Cada vez que el botón se clickea, alternamos el valor de la variable y actualizamos el texto manualmente usando el DOM*.