Why setSlideCount not working as expected?

Question

import React, {useState} from 'react';

function Slides({slides}) {

    const [slideCount, setSlideCount] = useState(0);
    const [slide, setSlide] = useState(slides[0]);
    const [restartDisable, setRestartDisable] = useState(true);
    const [previousDisable, setPreviousDisable] = useState(true);
    const [nextDisable, setNextDisable] = useState(false);

    const restartClick = () => {
        setRestartDisable(true);
        setPreviousDisable(true);
        setNextDisable(false);
        setSlide(slides[0]);
        setSlideCount(0);
        console.log("restartCLick ",slideCount);
    }

    const previousClick = () => {
        setSlideCount(prevCount => prevCount - 1);
        if (slideCount === 0) {
            setRestartDisable(true);
            setPreviousDisable(true);
            setNextDisable(false);
            setSlide(slides[0]);
        } else {
            setSlide(slides[slideCount]);
        }
        console.log("previousCLick ",slideCount);
    }

    const nextClick = () => {
        let newSlideCount = slideCount
        newSlideCount++
        console.log(newSlideCount)
        setSlideCount(newSlideCount);
        if (slideCount === (slides.length - 1)) {
            setNextDisable(false);
            setSlideCount(prevCount => prevCount + 1);
            setSlide(slides[slideCount]);
        } else {
            setRestartDisable(false);
            setPreviousDisable(false);
            setSlide(slides[slideCount]);
        }
        console.log("nextCLick ",slideCount);
    }

    return (
        <div>
            <div id="navigation" className="text-center">
                <button data-testid="button-restart" className="small outlined" disabled={restartDisable} onClick={()=>restartClick()}>Restart</button>
                <button data-testid="button-prev" className="small" disabled={previousDisable} onClick={()=>previousClick()}>Prev</button>
                <button data-testid="button-next" className="small" disabled={nextDisable} onClick={()=>nextClick()}>Next</button>
            </div>
            <div id="slide" className="card text-center">
                <h1 data-testid="title">{slide.title}</h1>
                <p data-testid="text">{slide.text}</p>
            </div>
        </div>
    );

}

export default Slides;

The setSlideCount() is not setting the slideCount as expected, its incrementing late. Whenever I click nextSlide the increment is shown in the react developer tools but the value remains same of the slideCount. Same thing applies for previousClick button also. But for restart button it works properly in setting to 0 but for the next button clicks and previous button clicks the slideCount value is not updating as expected, please help in setting slideCount value.

Duplicate: [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — , Jan 19 '21 at 17:53

score 1 · Accepted Answer · answered Jan 19 '21 at 18:02

That's because setState is an asynchronous operation and won't update the state immidiately.

Here is the changes you need to make in your funtions:


  const previousClick = () => {
    setSlideCount((prevCount) => {
      const newSlideCount = prevCount - 1;
      if (newSlideCount === 0) {
        setRestartDisable(true);
        setPreviousDisable(true);
        setNextDisable(false);
        setSlide(slides[0]);
      } else {
        setSlide(slides[newSlideCount]);
      }
      console.log("previousCLick ", newSlideCount);
      return newSlideCount;
    });
  };

  const nextClick = () => {
    setSlideCount((prevValue) => {
      const newSlideCount = prevValue + 1;

      if (newSlideCount === slides.length - 1) {
        setNextDisable(false);
        setSlideCount((prevCount) => prevCount + 1);
        setSlide(slides[newSlideCount]);
      } else {
        setRestartDisable(false);
        setPreviousDisable(false);
        setSlide(slides[newSlideCount]);
      }
      console.log("nextCLick ", newSlideCount);

      return newSlideCount;
    });
  };

Why setSlideCount not working as expected?

1 Answers1