SetIinterval/Polling every 5 seconds resets the values of my state variables/args instead of keeping the most recently set ones?

So in my primary React component where I'm making a GET request, I have

const [responseData, setResponseData] = useState('')

const [numericalArg, setNumericalArg] = useState('')
/* or I have */:
const numericalArg = useRef('')

const handleTopRequest = (arg1) => {
  url = "base_url" + `?${numericalArg}`
  axios.get(url)
    .then(response => {
      setResponse(response)
    }
}

  useEffect(() => {
    handleTopRequest(sortByParam);
    const intervalId = setInterval(handleTopRequest, 5000);
    return () => clearInterval(intervalId);
  }, []);

  const handleNumArgChange = (event) => {
    setNumericalArg(event.target.value);
    // numProcesses.current = event.target.value;
  };

return
  <div>
          <label>
            Number of Processes:
            <input
              type="number"
              value={numericalArg}
              onChange={handleNumArgChange}/>
          </label>
...
   <div>{JSON.stringify(responseData)}</div>
  </div>

I have an input field where I can set numericalArg to whatever integer I'd like (like 59). However, when the interval fires, numericalArg gets reset to essentially nothing, instead of the ideal value of 59.

How do I fix this? I tried using useRef(), and it kinda works (?), but it's not consistent at all and even breaks the input field many times (for example, I can't even type in any numbers in the input field for numericalArg for some reason).

Any help?

Issue

The issue here is a stale closure over the numericalArg state value in the handleTopRequest handler. The useEffect hook runs once after the component mounts, closes over the initial numericalArg value, i.e "", and instantiates the interval. The interval calls this same instance of the handleTopRequest callback each time.

Solution

I think you are on the right track trying to use a React ref. Use a React ref and a useEffect hook to cache the current state value, and access the ref's current value in the handleTopRequest callback function.

Example:

const [responseData, setResponseData] = useState('');
const [numericalArg, setNumericalArg] = useState('');

// Ref to hold current state value
const numericalArgRef = useRef(numericalArg);

// Effect to cache current state value when it updates
useEffect(() => {
  numericalArgRef.current = numericalArg;
}, [numericalArg]);

useEffect(() => {
  const handleTopRequest = () => {
    // Access current numericalArgRef value
    url = "base_url" + `?${numericalArgRef.current}`;

    axios.get(url).then(setResponse);
  };

  handleTopRequest();

  const intervalId = setInterval(handleTopRequest, 5000);
  return () => clearInterval(intervalId);
}, []);

const handleNumArgChange = (event) => {
  setNumericalArg(event.target.value);
};

return (
  <div>
    <label>
      Number of Processes:
      <input
        type="number"
        value={numericalArg}
        onChange={handleNumArgChange}
      />
    </label>
    ...
    <div>{JSON.stringify(responseData)}</div>
  </div>
);