Utilizando el hook useState de React

useState es probablemente el hook de React que más veces usaremos. Como sabéis, los Hooks son funciones especiales que nos permiten acceder a las funcionalidades de React de forma fácil.

Fueron introducidos en la versión 16.8.0 (Bye, bye clases!) y han supuesto toda una revolución en esta librería.

useState, añadiendo un estado a nuestro componente funcional

El primer paso, claro está, es importarlo de la librería de React para poder utilizarlo.

import React, { useState } from 'react';

Ahora ya podemos inicializar el estado interno de nuestro componente. Para eso, llamamos al método useState y le pasamos como parámetro el valor inicial del estado, en nuestro caso queremos inicializar el contador a 0.

import React, { useState } from 'react';

const CounterApp = () => {

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

}

Esta sintaxis del llamado JavaScript «moderno» se llama desestructuración. Usando esta forma podemos extraer los elementos del objeto que nos devuelva la función que sea.

En nuestro caso, useState nos devuelve un array con dos posiciones: el valor de la variable (que almacenamos en la variable count) y una función de callback, que hemos llamado setCounter.

Leer el estado de nuestro componente

Gracias a la desestructuración, leer el valor del estado es una tarea facilísima, pues se almacena en una variable. Como antes la guardamos en count, ahora podemos usarla en todas las partes que queramos de nuestro componente.

De esta forma:

import React, { useState } from 'react';

export const CounterApp = () => {

    const [ counter, setCounter ] = useState( 0 );

    return (
        <div>
            <h1>Estado actual del contador: { counter }</h1>  
        </div>
    )
}

Los que vengáis de versiones anteriores de React (que usaba clases) ya estaréis notando las mejoras. Para empezar, al contexto no hace falta acceder con this.

Actualizando el estado de nuestro componente

Para eso tenemos la función de callback setCounter que definimos anteriormente en el useState. Al ser una función, lo suyo es utilizarla en algún evento, como por ejemplo, un click.

Vamos a crear un botón, le asignaremos una función que dentro llame a nuestro setCounter.

import React, { useState } from 'react';

export const CounterApp = () => {

    const [ counter, setCounter ] = useState( 0 );

    const handleClick = () =>{
        setCounter( counter + 1 );
    }    

    return (
        <div>
            <h1>Estado actual del contador: { counter }</h1>  
            <hr />
            <button onClick={ handleClick }> + 1 </button>
        </div>
    )
}

Notad cómo podemos llamar libremente tanto a setCounter como a counter. Esta es precisamente la mayor gracia de useState.