반응 후크: useState

useState nos permite agregarle un estado a un componente funcional.

Retorna un par de valores:

• el estado.
• una función para poder actualizarlo.

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

En nuestro ejemplo anterior, count es nuestro estado y está inicializado con el valor 0 y setCount es nuestra función para poder actualizarlo.

Tenemos que tener en cuenta a la hora de actualizar nuestro estado que a diferencia del this.setState de los componentes de clase donde el estado es siempre un objeto y podemos actualizar una propiedad del mismo directamente sin afectar al resto, que nuestra función devuelta por el hook useState va a reemplazar por completo nuestro estado por el valor que nosotros le pasemos, por ende, si nuestro estado por ej, es un objeto y nosotros quisiéramos actualizar una sola propiedad, deberíamos pasarle la propiedad actualizada y además, el resto de sus propiedades.

Si el valor por defecto que queremos asignarle a nuestro estado es el resultado de un calculo costoso, podemos utilizar el lazy initial state, es decir, es vez de pasarle nuestro estado inicial, lo que hacemos es pasarle una función que lo calcule, esto se ejecutará una sola vez en el render inicial.

function getExpensiveState() {
  // Calculo costoso
}

// Nuestro componente va a realizar el calculo costoso
// en cada render aunque no utilice su valor más allá del
// primer render.
function ComponentWithoutLazy() {
  const [state, setState] = React.useState(getExpensiveState());

  // ...
}

// Ahora nuestro componente solo va a realizar el calculo
// costoso en el primer render.
function ComponentWithLazy() {
  const [state, setState] = React.useState(() => getExpensiveState());

  // ...
}

Cuando nuestro componente es simple y no contiene muchas actualizaciones de estado ejecutadas por diversos eventos, cambios de props, etc, no vamos a tener problemas actualizando nuestro estado seteando el nuevo directamente.

function Counter() {
  const [count, setCounter] = React.useState(0);

  function onClick() {
    setCounter(count + 1);
  }

  // Code
}

Pero cuando nuestro componente comienza a manejar más lógica y este estado es actualizado en distintas oportunidades por distintos eventos, acciones, etc. Lo mejor y más recomendable, es utilizar una función para actualizar nuestro estado con setState , de esta manera:

function Counter() {
  const [count, setState] = React.useState(0);

  function onClick() {
    setState(prevState => ({
      ...prevState,
      count: prevState + 1
    }));
  }

  // Code
}

Por qué? Porque utilizando una función nos aseguramos de tener el último valor de nuestro estado para poder actualizarlo en consecuencia y evitar inconsistencias o valores erróneos.