Estados en React: Gestionando los datos en el tiempo.

¿Qué son los Estados en React?

En React, un «estado» es un objeto especial que almacena datos y controla cómo se comporta y se muestra un componente. Los estados permiten que los componentes mantengan y gestionen información que puede cambiar con el tiempo. Si alguna vez has necesitado que tu interfaz de usuario reaccione a eventos o actualizaciones de datos, entonces los estados son una parte crucial de la ecuación, este es uno de los pilares en los que se apoya react para ser considerada una de las tecnologías referentes en la creación de interfaces de usuario dinámicas.

Creando un Componente Funcional con Estado

Vamos a crear un ejemplo de un contador simple utilizando un componente funcional en React:

import React, { useState } from 'react';

function Contador() {
  // Utilizamos el hook useState para crear un estado inicial 'count' con valor 0
  const [count, setCount] = useState(0);

  const incrementar = () => {
    // Actualizamos el estado 'count' utilizando la función 'setCount'
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Contador: {count}</h1>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
}

export default Contador;

En este ejemplo, hemos creado un componente funcional llamado Contador que utiliza el hook useState para agregar un estado inicial count con un valor de 0. Cuando hacemos clic en el botón «Incrementar,» llamamos a setCount para actualizar el estado count.

Aunque hemos utilizado el concepto de hook ahora, lo explicaremos en otro post.

Hook y estados son conceptos de van de la mano en React, por resumirlo, un hook puede verse como una llamada a una funcionalidad que queremos incluir en un componente, en este caso queremos declarar el uso de estados en un componente funcional, por ello importamos el useState.

Actualización de Estados en React

Una característica importante de los estados en React es que no debemos modificarlos directamente. En su lugar, utilizamos la función proporcionada por el hook (en este caso, setCount) para actualizar el estado. React se encarga de fusionar y aplicar los cambios de manera eficiente.

Conclusión

Los estados son fundamentales en React, ya que nos permiten manejar y actualizar datos de manera dinámica en nuestra aplicación. En esta entrada, hemos visto cómo crear un componente funcional con estado y cómo actualizar ese estado de manera segura utilizando el hook useState.

Este enfoque de componentes funcionales y hooks se ha vuelto muy popular en React debido a su simplicidad y legibilidad, anteriormente se usaban componentes de clase y tenían una declaración diferente:

import React, { Component } from 'react';

class Contador extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementar = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Contador: {this.state.count}</h1>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}

export default Contador;

El uso de los componentes funcionales permite la inclusión de estados para gestionar los datos en el tiempo a través de los hooks, y esto, se traduce en un aumento de la eficiencia de uso, del consumo de recursos, de la legibilidad del código y de multitud de pequeños factores más.

Aquí más información sobre este punto.