React useState — scope of state variable

I have a confusion I'm trying to clear about the scope of where I can use a state that I created with useState

In the code example below, I have a 4-step animation cycle between states denoted with 0,1,2,3.

The animation sits at each step for 1500 seconds. A useEffect looks at changes to animationStep, and sets a timeout (which gets stored to a ref) of 1500 seconds before calling goToNextStep, which increments the step up to 3 and then back to 0. That part all works. (You see that functional towards the bottom of the code snippet below).

My next requirement is to have the animation stop & start if the user presses the return key. THis should simply toggle on/off, and if an animation is in the middle of animating while the user turns it off, the step should go back to 0 and the thing should stop animating. I am trying to accomplish this by clearing out the timeout and setting another state called userControlled

However, my userControlled state doesn't seem to stick when I set it to true. I'm not sure if this has to do with the fact that keydown gets called in the scope of the event and not the component?

I'm not quite savvy enough with React to know what I'm missing here, or if using a useRef is the right way to store the timeout object between re-renders of this component.(?)

Either way, when I hit the return key several times, I am expecting to toggle between saying "userControled is false" and "userControlled is true" but it just always says "userControlled is false"

import React, { useState, useEffect, useRef } from 'react'


const ThingToAnimate = (props) => {

  const [userControlled, setUserControlled] = useState(false)
  const [animationStep, setAnimationStep] = useState(4)
  var animationTimeout = useRef(null);


  useEffect(() => {
    goNextStep()
  }, [])

  useEffect(() => {
    document.addEventListener("keydown", (event) => {
      keydownHandler(event);
    });
  }, [])

  const keydownHandler = (event) => {
    console.log(event.keyCode);
    console.log("userControlled is", userControlled);

  
    if(event.keyCode === 13) {
      if(userControlled) {
        console.log("auto control")
        setUserControlled(false);
      } else {
        console.log("setting user controlled")
        setUserControlled(true);
      }
    }
  }

  useEffect(() => {
    setAnimationStep(0)
  }, [userControlled])

  const goNextStep = () => {
    const newStep = (animationStep > 3) ? 0 : animationStep + 1;
    setAnimationStep(newStep)
  }

  useEffect(() => {
    if (!userControlled) {
      animationTimeout = setTimeout(() => {
        goNextStep()
      }, 1500)
    }
  }, [animationStep])
  
  return (
     // render code omitted; render is based on the current value of animationStep 
  )
}

results in my browser if I hit return key several times:

Since you're using a useRef hook to store the timeout ID, you should access it via the current property, the useRef hook returns an object with a current property that can be used to store mutable values across renders.

import React, { useState, useEffect, useRef } from 'react';
const ThingToAnimate = (props) => {
const [userControlled, setUserControlled] = useState(false);
const [animationStep, setAnimationStep] = useState(4);
const animationTimeout = useRef(null);
useEffect(() => {
goNextStep();
}, []);
useEffect(() => {
document.addEventListener('keydown', keydownHandler);
return () => {
document.removeEventListener('keydown', keydownHandler);
};
}, []);
const keydownHandler = (event) => {
if (event.keyCode === 13) {
setUserControlled((prevControlled) => !prevControlled);
if (!userControlled) {
clearTimeout(animationTimeout.current);
}
setAnimationStep(0);
}
};
useEffect(() => {
if (!userControlled) {
animationTimeout.current = setTimeout(() => {
goNextStep();
}, 1500);
}
return () => {
clearTimeout(animationTimeout.current);
};
}, [animationStep, userControlled]);
const goNextStep = () => {
if (userControlled) {
setAnimationStep(0);
return;
}
const newStep = animationStep > 3 ? 0 : animationStep + 1;
setAnimationStep(newStep);
};
return (
<div>
<h1>Animation Step: {animationStep}</h1>
<h1>User Controlled: {userControlled ? 'true' : 'false'}</h1>
</div>
);
};
export default ThingToAnimate;