Problema usando useState y setTimeout

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Cuando actualizamos un estado utilizando la función setTimeout de Javascript:

const [stateValue, setStateValue] = useState(0);

const recursiveFunction = () => {
    setTimeout(() => {
        setStateValue(stateValue + 1);
        console.log(stateValue);
        recursiveFunction();
    }, 1000);
}

Tendremos un problema. Y es que al hacer el log, veremos que el valor de stateValue no cambia.

Si en lugar de haber utilizado un estado, hubiesemos utilizado el siguiente código, en el que no uso estados, no habríamos tenido este problema:

let stateValue = 5;

const recursiveFunction = () => {
    setTimeout(() => {

        stateValue++;
        console.log(stateValue);
        recursiveFunction();
    }, 1000);
}

Para resolver este problema tenemos dos opciones:

1. Una sería pasarle una función el método setStateValue cuyo primer parámetro será el valor actual del estado. Dentro de esa función, stateValue tendrá el valor correcto.

const recursiveFunction = () => {
    setTimeout(() => {
        setStateValue(stateValue => {
            //Aquí vendría el código que utiliza stateValue
            return stateValue + 1;
        });
        recursiveFunction();
    }, 1000);
}

2. La otra forma, sería utilizando useEffect:

const recursiveFunction = () => {
    setTimeout(() => {
        setStateValue(stateValue => stateValue+1);
        recursiveFunction();
    }, 1000);
}

useEffect(() => {
    //Aquí vendría el código que utiliza stateValue
}, [stateValue]);