当 useEffect (React js) 中的依赖项发生变化时如何停止重新启动 for 循环

Question

I am trying to match pi value from input. "pracInput" dependency has been used in useEffect so I can get latest value from input and check. But the problem is that when I input some value the for loop restart.

if I input 9; expected value=14159; counting: 5; progress width: 60;

if I input another value 2; expected => value=141592; counting: 6; progress width: 72;

import React, { useEffect, useState } from "react";

const PiGame = () => {
  const [pracInput, setPracInput] = useState("1415");
  const pi = "141592653589793238462643";
  const [widthText, setWidthText] = useState(0);
  const [counting, setCounting] = useState(0);



  useEffect(() => {
    const runLoop2 = async () => {
      for (let i = 0; i < pracInput.length; i++) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        if (pracInput[i] === pi[i]) {
          console.log(i)
          console.log(true);
          setWidthText((prev) => prev + 12);
          setCounting((prev) => prev + 1);

        } else {
          console.log(false);
          alert('not match')

        }
  }
};
    runLoop2();
  }, [pracInput]);

  const handleChange = (e) => {
const val = e.target.value;

if (/^[0-9]+$/.test(val)) {
  setPracInput(val);
}
 };


  return (
<div>
  <div>
    value: <input
      type="text"
      style={{
        width: "80%",
        marginTop: 100,
        height: 25,
        fontSize:25
      }}
      value={pracInput}
      onChange={handleChange}
    />



        <div style={{ fontSize: 25 }}>counting : {counting}</div>
        <div style={{ backgroundColor: "green", width: widthText, height: 20 }}></div>

        <div>progress width : {widthText}</div>


  </div>
</div>


);
};

export default PiGame;

Answer 1

See your for loop is present inside the useEffect which gets triggered whenever your pracInput gets changed,so everything inside that useEffect will be triggered.Your pracInput is being changed when handleChange is being called,so that means whenevr some input will be provided and if (/^[0-9]+$/.test(val)) { setPracInput(val); } if (/^[0-9]+$/.test(val)) { setPracInput(val); } becomes true,your pracInput will change and useEffect will be triggered and hence that for loop will start.And since your for loop requires your changes of pracInput,moving it outside of the useEffect also wont make sense. If you want to just start your for loop once only then remove it from that useEffect and do it like this:

useEffect(()=>{
for loop goes here
},[]);

This will ensure that for loop runs just once,that is when the component will render for the first time.

Edit: According to your output i think this should work:

const [widthText, setWidthText] = useState(0);
  const [counting, setCounting] = useState(0);


useEffect(() => {
const TimeoutId = setTimeout(() => {
      if(pracInput==="1415")
    {
    setCounting(4);
setWidthText(60);
}
    else
    {
    setCounting(pracInput.length+1);
    setWidthText(60+(pracInput.length-4)*12);
    }
    }, 1000);
    return () => clearTimeout(TimeoutId);
    

  }, [pracInput]);




const handleChange = (e) => {
const val = e.target.value;

if (/^[0-9]+$/.test(val)) {
  setPracInput(val);
}
 };

And you can now remove the for loop

Answer 2

According to what I understood from question:

import React, { useEffect, useState } from "react";

const PiGame = () => {
  const [pracInput, setPracInput] = useState("1415");
  const pi = "141592653589793238462643";
  useEffect(() => {
    let subscribed = true;
    const runLoop2 = async () => {
      for (let i = 0; i < pracInput.length; i++) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        if (subscribed) {
         if (pracInput[i] === pi[i]) {
            console.log(i)
            console.log(true);
          } else {
            console.log(false);
          }
        }
  }
};
    runLoop2();

   return () => subscribed = false; // to avoid memory leak on unmount of component


  }, []);. // Passing empty array will make it execute only once, at component mount

  const handleChange = (e) => {
const val = e.target.value;

if (/^[0-9]+$/.test(val)) {
  setPracInput(val);
}
 };


  return (
<div>
  <div>
    <input
      type="text"
      style={{
        width: "80%",
      }}
      value={pracInput}
      onChange={handleChange}
    />

    <div>{pracInput}</div>
  </div>
</div>


);
};

export default PiGame;

As you are doing asynchronous task in useEffect you must use some logic/trick to avoid memory leak.

Answer 3

Are you looking for this?

import React, { useEffect, useState, useRef } from "react";

const PiGame = () => {
  const [pracInput, setPracInput] = useState("1415");
  const pi = "141592653589793238462643";
  const counter = useRef(4); // store the counter
  useEffect(() => {
    const runLoop2 = async () => {
      for (let i = counter.current; i < pracInput.length; i++) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        if (pracInput[i] === pi[i]) {
          console.log(i)
          console.log(true);
        } else {
          console.log(false);
        }
      }
      counter.current = counter.current + pracInput.length;
    };
    runLoop2();
  }, [pracInput]);
  // the rest same as before

Answer 4

Because you added "pracInput" in the array. "UseEffect" excutes everytime you call it and therefore will always call the looping function to start over. To stop this, you could either remove the "pracInput" from the dependency array and get the value in another way or you could use the "UseState" hook to set a certain value when the loop starts and then base a condition on your loop function call. Something like this

const [cond, setCond] = useState(false);

Set its value to be true when the loop starts then add a condition like this

if(cond == false)
     runLoop2();