Tutorial de useState() en React.js

Una de las funcionalidades que a muchos les causa confusión es la de usar hooks en React. Los hooks son una característica que nos ayuda a seguir implementando componentes en React.js usando la misma estructura de función. Uno de los hooks más conocidos es el hook de estado useState().
En este tutorial vamos a ver dónde y cuándo debemos utilizar el hook de estado en nuestras aplicaciones con React.

1. Para qué sirve useState()

useState() es la forma de utilizar el estado en componentes basados en funciones. Si nosotros estamos desarrollando nuestros componentes con clases tenemos algo como lo siguiente:

class MiComponente extends React.Component{

    constructor(props){
        super(props);
        this.state = {nombre: ''};
    }

    handleChange = e =>{
        this.setState({nombre: e.target.value});
    }

    render(){
        return(
            <input onChange={this.handleChange()} value={this.state.nombre} />
        );
    }
}

Cuando usamos clases tenemos que usar this.state y this.setState() para poder manipular los datos en nuestro componente. Si lo queremos ver así es un getter y un setter. Sin embargo, para hacer lo mismo en un componente basado en función necesitamos hacer uso de el hook de estado.

2. ¿Cómo funciona el hook de estado?

El mismo ejemplo anterior hecho con clase podemos hacerlo con funciones de la siguiente forma:

import {React, useState} from 'react';

function MiComponente(props){
    const [nombre, setNombre] = useState('');

    function handleChange(e){
        setNombre(e.target.value);
    }

    return(
        <input onChange={handleChange()} value={nombre} />
    );
}

useState() lo que nos permite hacer es hacer una desestructuración de una variable y una función. en nuestro caso la variable o estado que definimos es nombre y por lo tanto el siguiente parámetro es una función setNombre() para poder cambiar el valor de nombre. De la misma forma que cuando usamos clases tenemos que usar la función setState() para poder modificar el valor de nuestro estado, cuando usamos funciones usamos la función que definimos en la desestructuración para hacer dicho cambio.

3. ¿Se pueden declarar más variables usando useState()?

La respuesta es que sí. A diferencia de cuando usamos state y setState() para almacenar todos los estados de nuestos datos, usando useState() nos permite definir variables de forma independiente, lo cual puede ocasionar una forma más ágil de manipular los estados de los datos al tener una referencia mucho más visual de qué dato estás modificando con el nombre de la función.

Conclusiones

Así funciona el hook de estado. Si ven la diferencia en realidad no hay ninguna, más que el mismo hecho de tener una variable y función para sustituir el state y setState que ocupamos cuando lo hacemos con componentes basados en clases.