Fetching data from server randomly stops fetching

Question

I have something very strange happening in my program. I have consol.logged the crap out of it with timestamps to try and figure out what is happening. Basically my program randomly stops fetching data. I have ensured a new stream of data is there but I have to refresh the entire page or resave the program to restart everything when it gets hung up. On top of that, there are no errors or flags telling me why it stops. I tried to isolate the issue but it is something to do with the async function most likely. Here is the code....

function App() {

  const data = async() => {
    try {
        console.log('try block initiated')
        const apiResponse = await fetch(ipAddress)
        console.log(apiResponse);
        console.log("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB")
        const responseText = await apiResponse.text();
        console.log(responseText)
        console.log("CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC")
        if (loading === true){
            setLoading(false);
        }
        console.log("DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD")
        return responseText;
    } catch (error) {
        console.log('catch initiated')
        setError(true);
    }
  };
  console.log("AAAAAAAAAAAAAAAAAAAAAAA")
  try{
      console.log("EEEEEEEEEEEEEEEEEEEEEEEEEEE")
    data().then(response=>setMoisture(response));
    console.log("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF")
  } catch(error){
    console.log('gotcha')
    setError(true);
}
  
  let value = moisture;
  console.log(value);
  count += 1;  
  console.log(count);


  return(
    <div className="App">
      <WeatherCard moisture={value}/>    
    </div>
  );
}

Here is what the console looks like right before it stop fetching new data...

Does anyone know what would cause React js to do this. It is consistent in that it eventually happens but inconsistent in the fact that it seems to happen at different times. Sometimes it happens after 10 data retrievals, other times 100 and other times 276 etc... — Justin Oberle, Nov 12 '20 at 21:45
looks like the setting state with same value [known quirk](https://stackoverflow.com/questions/64080311/). See my answer in that question. — hackape, Nov 13 '20 at 03:27
I’m not quite sure what’s your expected behavior here. If you want to poll that API and get moisture update non-stop, you can increase counter and set it as a state. That would ensure triggering next round of re-render. Other wise if you setMoisture with same value, it would stop. And the strange log is because the quirk mentioned above, kinda trick you to believe setting same state value would trigger re-render. No it wouldn’t. — hackape, Nov 13 '20 at 03:34
This is interesting, however, my solution worked. It used to stop rendering withing 5 minutes and it ran for 12 hours yesterday with no issues. I am kind of baffled as to why if this is an issue because surely I got the same values many times in row and it didn't stop reacting. Either way I am glad it is working. — Justin Oberle, Nov 13 '20 at 20:07

score 0 · Accepted Answer · answered Nov 13 '20 at 01:15

HERE IS A POSSIBLE SOLUTION. After many headaches and researching async functions. I think this is going to work. I am going to let this run all night and see if it ever gets caught up but so far, Here is the solution...

const data = async() => {
try {
    const apiResponse = await fetch(ipAddress)
    const responseText = await apiResponse.text();
    console.log("CCCCCCCCCCCCCCCCCCC");
    console.log(responseText);
    if (loading === true){
        setLoading(false);
    }
    data().then(response=>setMoisture(response));
    return responseText;
} catch (error) {
    console.log("EEEEERRRRRRRRRROOOOOOOOOOORRRRRRRRRRRR")
    setError(true);
    }   
};
console.log("AAAAAAAAAAAAAAAAAAAA");
if (moisture === "initialState"){
    data().then(response=>setMoisture(response));
}else{
    console.log("QQQQQQQQQQQQQQQQQQQQQQQQ")
}

Here is what I changed... I made an initial state called "initialSate and if the variable was this value, it runs the async function. I then NEVER CALL THIS ASYNC AGAIN OUTSIDE OF THE ASYNS ITSELF. Instead I call itself right before returning a value from the function. This works because my program is running while the async function is running. However, the program is sequential to itself and the async is sequential to itself. They are NOT sequential together. So, the async function now only gets called again once the async function finishes its first run. Simultaneaously the rest of my program is running. Before I think it was getting caught because my program was trying to call the async function before it had finished the first time. This is a pure guess because I have no way to proving that but it makes sense. If this overnight run fails. I will pull this from the solution. Otherwise, I think this will work. FINGERS CROSSED!

Fetching data from server randomly stops fetching

1 Answers1