Hook de estado

Que hace una llamada a useState?

Declara una “variable de estado” en el primer indice de la desetructuracion, con un nombre cualquiera, useState, permite usar las mimas funciones que podiamos con this.state cuando se trabaja con componentes de clase. Las variables al salir de una funcion “desaparecen”, pero con react las variables de estado se “conservan”. Comparacion componente de clase y de funcion con hook de estado:

class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };

  }

import React, { useState } from 'react';

function Example() {
  // Declaración de una variable de estado que llamaremos "count"

  const [count, setCount] = useState(0);

// en los dos casos se declaro una variable de estado y se inicializo con un valor de 0

Que argumento se le pasa a un hook de estado?

El unico argumento que se le pasa a un hook de estado es su valor inicial, a diferencia de la variable de estado en un componente de clase, aca no es necesario que el valor inicial sea un objeto. Si queremos almacenar mas de un valor en el estado solo tenemos que llamar nuevamente al hook.

Que devuelve useState?

Devuelve una pareja de valores, el estado actual, y una funcion para actualizarlo.

const [count , setCount] = useState(0) es un equivalente a this.state.count y this.setState().

Leyendo el estado

Para mostrar el valor actual de un estado en un componente de clase:

<p>You clicked 

{this.state.count}

 times</p>

en un componente de funcion por medio de hooks:

<p>You clicked 

{count}

 times</p> //ni state ni nada, mira voce

Actualizando el estado

En un componente de clase llamariamos a this.setState(), pero en un componente de funcion llamamos a la funcion obtenida de useState con el nombre que le colocamos en la desestructuracion.

Componente de clase:

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
    Click me
  </button>

Componente de funcion:

<button onClick={() => setCount(count + 1)}>
    Click me
  </button>
//fijate que aca no uso this ni en la funcion ni en el valor de estado
//ademas el nombre de la funcion (que realiza el cambio en el valor del estado)
//esta definido por mi (cuidado con eso).

Bibliografia