setTimeout Function Not Removing Characters Like A Queue

Question

This is a simple for loop that runs 80 times but only every 100 ms. Each time it runs, it pushes a Y coordinate for a character into the stillChars state array. The stillChars state array is mapped through to create a sequence of text elements directly underneath eachother.

See this video to see the animation

const StillChars = () => {
  const [stillChars, setStillChars] = useState([]);

  function addChar() {
    for (let i = 0; i < 80; i++) {
      setTimeout(() => {
        setStillChars((pS) => [
          ...pS,
          {
            y: 4 - 0.1 * 1 * i,
            death: setTimeout(() => {
              setStillChars((pS) => pS.filter((c, idx) => idx !== i));
            }, 2000),
          },
        ]);
      }, i * 100);
    }
  }

  useEffect(() => {
    addChar();
  }, []);

  return (
    <>
      {stillChars.map((c, i) => {
        return <StillChar key={i} position={[0, c.y, 0]} i={i} />;
      })}
    </>
  );
};

Code Sandbox

Desired behavior: The death: setTimeout function should remove the characters like a queue instead of whatever is going on in the video/codesandbox.

There is no code added to codesandbox, you should add code, save it and share :) — KcH, Oct 09 '22 at 06:45
_"the for loop runs again causing more characters to be added"_ - I can't seem to see this happening inn your code sandbox. I added a log in your for loop and it only logs 80 times as expected. The `for` loop in your example doesn't appear to run again — Nick Parsons, Oct 09 '22 at 06:54
@NickParsons Changed title: setTimeout Function Not Removing Characters Like A Queue — twominds, Oct 09 '22 at 06:56
also, I would clear the timeout in useEffect's clean up function for any odd results ... — KcH, Oct 09 '22 at 06:58
@twominds you're removing values from your state with array with `.filter()`, so the indexes keep on changing. Give your objects within your state an `id` (set to `i` for example), and then use `.filter()` to remove elements where `c.id !== i`. You also need to update the `key` in `StillChar` to be `c.id` in that case also. — Nick Parsons, Oct 09 '22 at 07:11
@NickParsons Genius, if you create an answer explaining the mistake I made, I would appreciate it! — twominds, Oct 09 '22 at 07:15

score 1 · Accepted Answer · answered Oct 09 '22 at 10:30

Your main mistake is with:

setStillChars((pS) => pS.filter((c, idx) => idx !== i))

The problem is that this sits within a setTimeout() so the above line runs at different times for each iteration that your for loop does. When it runs the first time, you update your state to remove an item, which ends up causing the elements in your array that were positioned after the removed item to shift back an index. Eventually, you'll be trying to remove values for i that no longer exist in your state array because they've all shifted back to lower indexes. One fix is to instead associate the index with the object itself by creating an id. This way, you're no longer relying on the position to work out which object to remove, but instead, are using the object's id, which won't change when you filter out items from your state:

{
  id: i, // add an `id`
  y: 4 - 0.1 * 1 * i,
  death: setTimeout(() => {
    setStillChars((pS) => pS.filter(c => c.id !== i)); // remove the item based on the `id`
  }, 2000),
},

Along with this change, you should now change the key within your .map() to use the object's id and not its index, otherwise, the character won't update in your UI if you're using the same index to represent different objects:

return <StillChar key={c.id} position={[0, c.y, 0]} i={i} />;

As also highlighted by @KcH in the question comments, you should also remove your timeouts when your component unmounts. You can do this by returning a cleanup function from your useEffect() that calls clearTimeout() for each timeout that you create. In order to reference each timeout, you would need to store this in an array somewhere, which you can do by creating a ref with useRef(). You may also consider looking into using setInterval() instead of a for loop.

setTimeout Function Not Removing Characters Like A Queue

1 Answers1