React, slow rendering for last element in array-CodePudding

So I have a problem where I store image paths in an array (size 5), when clicking on a button, it renders immediately the right image but when clicking at the last button it takes time to render its image or does not even render, the state is stored at the parent component so I wonder why it takes time to render, and when I tried on a bigger array(size 6), the image renders fast for the index 4 and renders really slow or not even for the last index

here is my code

      const Option2DropDown = () => {
        useEffect(() => {
          if (choices.length === 0) {
            for (let i = 0; i < 5; i  ) {
              choices.push(null);
            }
          }
        }, [choices]);
    
        return (
          <Row>
            {choices.map((abox, idx) => {
              return (
                <OptionDropDown
                  key={idx.toString()}
                  id={idx.toString()}
                  img={cards[idx]}
                />
              );
            })}
          </Row>
        );
      };

      const OptionDropDown = (props) => {
            return (
            <Col >
              <DropdownButton
                onm ouseOver={(e) => handleChoiceButton(e, props.id)}
                title={
                  <img
                    width={80}
                    height={80}
                    src={props.img}
                    className="selectHandBtn"
                  />
                }
                disabled={choiceConfirmed}
                drop={"end"}
              >
                    <Dropdown.Item id={Hands.rock} className="selectHandBtn" as="button" onClick={selectHand}>
                        <img id={Hands.rock} width={80} height={80} src={rock} />
                    </Dropdown.Item>
                    <Dropdown.Item id={Hands.paper} className="selectHandBtn" as="button" onClick={selectHand}>
                        <img id={Hands.paper} width={80} height={80} src={paper} />
                    </Dropdown.Item>
                    <Dropdown.Item id={Hands.paper} className="selectHandBtn" as="button" onClick={selectHand}>
                        <img  id={Hands.scissor} width={80} height={80} src={scissor}/>
                    </Dropdown.Item>
              </DropdownButton>
            </Col>
          );
  };

that function generates something like that, only last one takes times to render the right image

CodePudding user response：

I think this may be an off-by-one error. The loop in your useEffect will iterate 4 times, and on the fifth it will shortcircuit as i is not less than 5.

If the useEffect is not necessary, I think you can achieve the same functionality by removing it and simply mapping cards instead:

{cards.map((card, idx) => {
              return (
                <OptionDropDown
                  key={idx.toString()}
                  id={idx.toString()}
                  img={card}
                />
              );
            })}