Cómo Usar setState en React

2 minuto(s)

En esta página:

En el desarrollo con la librería React, setState() se usa para actualizar el estado de un componente.

En este tutorial te enseñaré a Cómo Usar SetState en React, vamos con ello.

Uso de SetState en React

Hay dos contextos según el tipo de componente:

1. En Componentes de Clase

En componentes de clase, el estado se define como un objeto y se actualiza con this.setState():


import React, { Component } from 'react';

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

  aumentar = () => {
    this.setState({ contador: this.state.contador + 1 });
  };

  render() {
    return (
      <div>
        <p>Contador: {this.state.contador}</p>
        <button onClick={this.aumentar}>Aumentar</button>
      </div>
    );
  }
}

export default Contador;

import React, { Component } from 'react';

class Contador extends Component {

constructor(props) {

super(props);

this.state = { contador: 0 };

}

aumentar = () => {

this.setState({ contador: this.state.contador + 1 });

};

render() {

return (

<div>

<p>Contador: {this.state.contador}</p>

<button onClick={this.aumentar}>Aumentar</button>

</div>

);

}

export default Contador;

Recuerda que:

setState() no reemplaza todo el estado, solo lo que indiques.
Es asíncrono, por lo que no debes usar el valor actualizado inmediatamente después sin un callback.

2. En Componentes Funcionales (con Hooks)

Hoy en día se usa más el Hook useState:


import React, { useState } from 'react';

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

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

  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={aumentar}>Aumentar</button>
    </div>
  );
}

export default Contador;

import React, { useState } from 'react';

function Contador() {

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

const aumentar = () => {

setContador(contador + 1);

};

return (

<div>

<p>Contador: {contador}</p>

<button onClick={aumentar}>Aumentar</button>

</div>

);

}

export default Contador;

Recuerda que:

useState devuelve un par [valor, funciónActualizadora].
Al llamar setContador(nuevoValor) React re-renderiza el componente con el nuevo estado.