Repeat useEffect of names in array

Question

I found this exercise on this website; I'm testing this as I'm also learning hooks in React.

I don't understand why the execution of useEffect stops when you enter a name that is the same as one already in the array.

Shouldn't it skip duplicate names and move on to the next one? Or am I doing something wrong?

let users = ['Oliver', 'Thomas', 'George', 'George', 'William']
export default function App() {
  const [index, setIndex] = useState(0);
  console.log('RENDER');
  useEffect(() => {
    setTimeout(() => setIndex(index => index 1), 1000)
    console.log('Hello ' users[index]);
    console.log('Side Effect RUNS!');
    if (index === users.length - 1) {
      return
    }
  }, [users[index]])
}

Answer 1

Side effects in loops: The way you use setTimeout and setIndex in useEffect may cause unexpected behavior. useEffect is executed after each render, and using the index state directly in the setTimeout callback may cause problems because the closure captures the state value when the callback is created.

Accessing array elements: You are trying to access an element of the users array using an index, but due to the asynchronous nature of useEffect and delay, it is possible to exceed the scope of the array.

const [index, setIndex] = useState(0);

  useEffect(() => {
    console.log('RENDER');
    console.log('副作用运行！');
    
    if (index >= users.length) {
      return;
    }

    const timeoutId = setTimeout(() => {
      console.log('你好 ' + users[index]);
      setIndex(index + 1);
    }, 1000);

    return () => clearTimeout (timeoutId);
  }, [index]);