Volver a la página principal
martes 16 julio 2024
7

¿Qué es un Estado en React?

Definición de Estado

El estado es un objeto que contiene información que puede cambiar con el tiempo y que afecta a la representación del componente. Cada componente en React puede tener su propio estado, y cuando el estado cambia, React vuelve a renderizar el componente para reflejar esos cambios.

Uso del Estado en Componentes Funcionales con useState

En los componentes funcionales, el estado se maneja mediante el hook useState. El hook useState devuelve un par: el valor actual del estado y una función que permite actualizar ese estado.

Ejemplo Básico de useState 

import React, { useState } from 'react';

function Counter() {
  // Declarar una variable de estado llamada "count" con valor inicial de 0
  const [count, setCount] = useState(0);

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

export default Counter;

En este ejemplo:

  • useState(0) inicializa el estado count con un valor de 0.
  • count contiene el valor actual del estado.
  • setCount es la función que actualiza el estado.
  • Cuando se hace clic en el botón, setCount(count + 1) incrementa el valor de count.

Uso del Estado en Componentes de Clase

En componentes de clase, el estado se inicializa en el constructor y se actualiza usando this.setState.

Ejemplo Básico en Componentes de Clase 

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <p>Has hecho clic {this.state.count} veces</p>
        <button onClick={this.incrementCount}>
          Haz clic aquí
        </button>
      </div>
    );
  }
}

export default Counter;

En este ejemplo:

  • this.state = { count: 0 } inicializa el estado count en el constructor.
  • this.setState se usa para actualizar el estado.
  • Cuando se hace clic en el botón, this.setState({ count: this.state.count + 1 }) incrementa el valor de count.

Estado vs. Props

Es importante distinguir entre estado y props:

  • Estado: Pertenece al componente y puede cambiar a lo largo del tiempo. El estado es privado y controlado por el componente.
  • Props: Son inmutables y se pasan desde un componente padre a un componente hijo. Los props permiten que los componentes se comuniquen entre sí.

Ejemplo de Estado y Props 

import React, { useState } from 'react';

function ChildComponent({ message }) {
  return <p>{message}</p>;
}

function ParentComponent() {
  const [state, setState] = useState("Hola desde el estado");

  return (
    <div>
      <ChildComponent message={state} />
      <button onClick={() => setState("Estado actualizado")}>
        Actualizar Estado
      </button>
    </div>
  );
}

export default ParentComponent;

En este ejemplo:

  • ParentComponent tiene un estado state.
  • ChildComponent recibe message como prop.
  • Cuando se hace clic en el botón, el estado en ParentComponent se actualiza y ChildComponent recibe la nueva prop.

Manejo de Estados Complejos

Para manejar estados más complejos, se puede utilizar un objeto para representar múltiples valores de estado.

Ejemplo de Estado Complejo 

import React, { useState } from 'react';

function Form() {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormState({
      ...formState,
      [name]: value
    });
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formState.name}
        onChange={handleChange}
        placeholder="Nombre"
      />
      <input
        type="email"
        name="email"
        value={formState.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <textarea
        name="message"
        value={formState.message}
        onChange={handleChange}
        placeholder="Mensaje"
      />
      <button type="submit">Enviar</button>
    </form>
  );
}

export default Form;

En este ejemplo:

  • formState es un objeto que contiene varios valores de estado (name, email, message).
  • handleChange actualiza el estado correspondiente cuando el usuario escribe en los campos del formulario.

Mejoras con useReducer

Para estados muy complejos o cuando hay múltiples transiciones de estado, se recomienda usar useReducer.

Ejemplo con useReducer 

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Has hecho clic {state.count} veces</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Incrementar
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrementar
      </button>
    </div>
  );
}

export default Counter;

En este ejemplo:

  • useReducer maneja un estado complejo mediante una función reductora (reducer).
  • dispatch se utiliza para enviar acciones que actualizan el estado.

Conclusión

El estado en React es fundamental para crear componentes interactivos y dinámicos. Permite manejar y responder a cambios en los datos, actualizando la interfaz de usuario de manera eficiente. Desde el uso básico de useState en componentes funcionales hasta el manejo de estados complejos con useReducer, React proporciona herramientas poderosas para gestionar el estado de la aplicación. Entender y utilizar correctamente el estado es clave para desarrollar aplicaciones React robustas y mantenibles.

Etiquetas:
javascript react desarrollo web
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer