React/NextJS using UseEffect Error: Rendered more hooks than during the previous render

Question

I am a beginner in using ReactJS/NextJS. I am creating a carousel component to use an Image optimization feature in NextJS Framework. The carousel component works fine and I want to add carousel next slide automatically when a props for duration will be passed. I was trying to create a function inside UseEffect hook with setTimeout to perform my next slide.

I tried this code:

import React, { useState, useEffect } from 'react';
import styles from 'components/shared/carousel/carouselStyles.css';
import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
import Image from 'next/image';

const Carousel = (props) => {
  const { slides, slideshow } = props;

  const [current, setCurrent] = useState(0);

  const length = slides && slides.length;

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };

  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  if (!Array.isArray(slides) || slides.length <= 0) {
    return null;
  }

  useEffect(() => {
    if (slideshow > 0) {
      let interval = setInterval(() => {
        nextSlide();
      }, slideshow);
      return () => clearInterval(interval);
    }
  }, [current, slideshow]);

  return (
    <section className="slider">
      <NavigateBeforeIcon className="left-arrow" onClick={prevSlide} />
      <NavigateNextIcon className="right-arrow" onClick={nextSlide} />
      {slides.map((slide, index) => {
        return (
          <>
            <div
              className={index === current ? 'slide active' : 'slide'}
              key={index}
            >
              {index === current && (
                <Image
                  src={slide.feature_image}
                  alt="carousel_img"
                  className="image"
                  width={1600}
                  height={600}
                />
              )}
            </div>
          </>
        );
      })}
      <div className="dots-con">
        {slides.map((slide, index) => {
          return (
            <span
              className={index === current ? 'dot active' : 'dot'}
              key={index}
            ></span>
          );
        })}
      </div>
    </section>
  );
};

export default Carousel;

but this gives me error of Error: Rendered more hooks than during the previous render

If I will comment the useEffect, then it works fine but doesn't came up with what I want which is to auto-play the carousel

Anh Tuan · Accepted Answer · 2021-07-22 03:47:14Z

3

move your condition after hook like this:

  useEffect(() => {
    if (slideshow > 0) {
      let interval = setInterval(() => {
        nextSlide();
      }, slideshow);
      return () => clearInterval(interval);
    }
  }, [current, slideshow]);


 if (!Array.isArray(slides) || slides.length <= 0) {
        return null;
 }

read more here about react hook rules link

answered Jul 22, 2021 at 3:47

Anh Tuan

1,1436 silver badges13 bronze badges

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

Comments

TheRakeshPurohit · Accepted Answer · 2021-07-22 03:32:26Z

0

It is a syntax issue in your useEffect Hook.

You should not wrap the written statement inside if condition. It never executes the return of useEffect to clean up.

useEffect(() => {
    let interval;
    if (slideshow > 0) {
      interval = setInterval(() => {
        nextSlide();
      }, slideshow);
    }
    return () => {
      clearInterval(interval);
    };
  }, [current, slideshow]);

answered Jul 22, 2021 at 3:32

TheRakeshPurohit

5491 gold badge6 silver badges22 bronze badges

1 Comment

TheRakeshPurohit Over a year ago

share a code sandbox link for more detail

Collectives™ on Stack Overflow

React/NextJS using UseEffect Error: Rendered more hooks than during the previous render

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related