Foreach loop runs forever ReactJS

Question

I'm trying to load QuestionsComponent components based on the No of questions received in the props;

Functionality works but application hangs after something, In console I could see the console.log(steps); getting logged infinite times.

What I'm doing wrong here ?

Please help

const DynamicForm: React.FC<any> = ({ questions }) => {
  const q: any = [];
  const [steps, setSetps] = useState([]);
  const [step, setStep] = useState(0);
  const refs = useRef<(HTMLDivElement | null)[]>([]);
  useEffect(() => {
    questions.forEach((question: any) => {
      q.push(QuestionsComponent);
    });
    setSetps(q);
    console.log(steps);

    scrollToComponent(refs.current[step], {
      offset: -100,
      align: 'top',
      duration: 1000,
    });
  }, [steps, questions, step, q]);

  return (
    <div>
      {steps
        .filter((_: any, index: any) => index <= step)
        .map((Step: any, index: any) => (
          <Step
            // eslint-disable-next-line
            key={index}
            question={questions[index]}
            domRef={(ref: any) => { refs.current[index] = ref; }}
            toPrev={() => {
              scrollToComponent(refs.current[index - 1]);
            }}
            toNext={() => {
              if (step === index + 1) {
                scrollToComponent(refs.current[index + 1]);
              }
              setStep(index + 1);
            }}
            setStep={setStep}
            step={index}
          />
        ))}
    </div>
  );
};

This is because you are watching q, steps for useEffect and updating it within it. Which will cause useEffect to trigger again. You can remove it from dependency array — Sandip Nirmal
– Sandip Nirmal, Commented Apr 30, 2022 at 0:22

Hyetigran · Accepted Answer · 2022-04-30 02:19:08Z

1

your useEffect hook has steps as a dependency which means it runs every time you call setSteps. You happen to call setSteps inside useEffect which renders the component continously and causes an infinite loop.

You could either remove steps as a dependency or add a conditional check:

 useEffect(() => {
    if(steps.length) return;
    questions.forEach((question: any) => {
      q.push(QuestionsComponent);
    });
    setSetps(q);
    console.log(steps);

    scrollToComponent(refs.current[step], {
      offset: -100,
      align: 'top',
      duration: 1000,
    });
  }, [steps, questions, step]);

edited Apr 30, 2022 at 2:19

answered Apr 30, 2022 at 0:25

Hyetigran

1,2253 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arun Kumar Over a year ago

I created a stackblitz, I'm still getting infinite loop stackblitz.com/edit/react-ts-caasck

Hyetigran Over a year ago

Remove q as a dependency.

Hyetigran Over a year ago

Your implementation appears way over-engineered imo. See my approach: stackblitz.com/edit/react-ts-duapfs?file=app.tsx

ImBIOS Over a year ago

@Hyetigran did a good job of solving your problem. let us know if your problem still occurs.

ImBIOS · Accepted Answer · 2022-04-30 00:34:43Z

0

The resolve answer is like what @Hyetigran. I only add several tips to prevent something like this happen in the future.

use ESLint with strict settings
use Prettier to support the ESLint function
install the plugin of both inside your IDE

With those things installed properly, you should get a warning when an infinite loop is happen in your code, and the suggestion would come out of the warning message.

answered Apr 30, 2022 at 0:34

ImBIOS

1,1232 gold badges15 silver badges29 bronze badges

1 Comment

Arun Kumar Over a year ago

I created a stackblitz, I'm still getting infinite loop stackblitz.com/edit/react-ts-caasck?file=app.tsx

Collectives™ on Stack Overflow

Foreach loop runs forever ReactJS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related