React iterating over list and applying animation with delay between each iteration

Question

I am having troubles fixing a bug basically I need to iterate over a list of buttons and apply an animation and on the next iteration I remove the animation from the previous element, however, when running the code the animation is started twice at the beginning and one element remains stuck with the animation applied.

The following is the code of the component:

import type { NextPage } from 'next'
import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect, useRef, useState } from 'react'
import { IoCheckmark, IoClose, IoHome, IoRefresh } from 'react-icons/io5'
import Page from '../components/page/Page'
import styles from '../styles/Play.module.css'
import { distance } from '../utils/distance'
import { randomInt, randomFloat } from '../utils/random'

function ShowSequence(props: any) {
    const [index, setIndex] = useState(0);
    const [sequence, setSequence] = useState(props.sequence);
    const [timer, setTimer] = useState();

    useEffect(() => {
        console.log(index)
        if (index > 0) document.getElementById(sequence[index - 1])?.classList.toggle(styles.animate);
        if (index < sequence.length) document.getElementById(sequence[index])?.classList.toggle(styles.animate);
        else return clearInterval(timer);

        setTimer(setTimeout(() => setIndex(index + 1), 3000));
    }, [index]);

    return 
        {
            props.map ? props.map.map((button: any) => {
                return 
            }) : null
        }
    ;
}

function DoTask(props: any) {
    return 

    ;
}

function ChooseSequence(props: any) {
    const [sequence, setSequence] = useState(props.sequence);
    const [index, setIndex] = useState(0);
    const [timer, setTimer] = useState();
    const [buttonMap, setButtonMap] = useState({});

    console.log(sequence);

    return 
        {
            props.map ? props.map.map((button: any) => {
                return 
            }) : null
        }
    ;
}

function Error(props: any) {
    return 
        You lost!
        You reached level: {props.level}
        
            
            
            
            
            
            
            
            
            
            
        
        
            
            
        
    ;
}

enum State {
    SHOWSEQUENCE,
    DOTASK,
    CHOOSESEQUENCE,
    ERROR
}

const Play: NextPage = () => {
    let [state, setState] = useState(State.SHOWSEQUENCE);
    let [sequence, setSequence] = useState([randomInt(1, 20), randomInt(1, 20), randomInt(1, 20), randomInt(1, 20)]);
    let [map, setMap] = useState();
    let [level, setLevel] = useState(1);

    let component;

    useEffect(() => {
        if (state === State.SHOWSEQUENCE) {
            let newSequenceId = randomInt(1, 20);
            setSequence((prevSequence: number[]) => [...prevSequence, newSequenceId])
        }
    }, [state]);

    useEffect(() => {
        let buttonIds = Array.from({ length: 20 }, (v, k) => k + 1);
        const { innerWidth, innerHeight } = window;

        let colors: string[] = ["#c0392b", "#e67e22", "#27ae60", "#8e44ad", "#2c3e50"];

        let buttonMap: any[] = [];

        let rows = buttonIds.length / 10;
        let columns = rows > 0 ? buttonIds.length / rows : buttonIds.length;

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < columns; col++) {
                let color = colors[Math.floor(randomFloat() * colors.length)];
                let x = innerWidth / columns * col + 100;
                let y = innerHeight / rows * row + 100;
                let offsetX = (randomFloat() < .5) ? -1 : 1 * randomFloat() * ((innerWidth / columns) - 100);
                let offsetY = (randomFloat() < .5) ? -1 : 1 * randomFloat() * ((innerHeight / rows) - 100);
                if (x + offsetX + 100 > innerWidth) offsetX -= ((x + offsetX) - innerWidth) + 100;
                if (y + offsetY + 100 > innerHeight) offsetY -= ((y + offsetY) - innerHeight) + 100;
                buttonMap.push({ buttonId: buttonIds[row * columns + col], x: x + offsetX, y: y + offsetY, color })
            }
        }

        setMap(buttonMap);
    }, [])

    switch (state) {
        case State.SHOWSEQUENCE:
            component =  setState(State.DOTASK)}>;
            break;
        case State.DOTASK:
            component =  setState(State.CHOOSESEQUENCE)} onError={() => setState(State.ERROR)}>
            break;
        case State.CHOOSESEQUENCE:
            component =  setState(State.SHOWSEQUENCE)} onError={() => setState(State.ERROR)}>
            break;
    }

    return (
        
            { state === State.ERROR ?  : null }
            {component}
        
    )
}

export default Play

Here is a codesandbox.

Drew Reese · Accepted Answer

Instead of querying the DOM, an anti-pattern in React, you should add the appropriate classname when mapping the data. This avoids the DOM mutations and handles the conditional logic for adding and removing the "animate" class.
Use a functional state update to increment the index.
I suggest using a React ref to hold a reference to the interval timer so it's not triggering additional rerenders
Return a cleanup function to clear any running timers when necessary, i.e. when the component unmounts.

Code:

function ShowSequence(props) {
  const [index, setIndex] = useState(0);
  const timerRef = useRef();

  useEffect(() => {
    console.log(index);
    timerRef.current = setTimeout(() => setIndex((index) => index + 1), 3000);

    return () => {
      clearTimeout(timerRef.current);
    };
  }, [index]);

  return (
    
      {props.map?.map((button, i) => {
        return (
          
        );
      })}
    
  );
}

React iterating over list and applying animation with delay between each iteration

Answers (2)

Related Questions