Why React hook useState don't increment index onClick?

Question

I don't understand why in setProjectIndex inside SwitchProject function not updating my projectIndex state :

const WorkPreview = ({project, projects}) => {
  const [currProject, setCurrProject] = useState(projects[0]);
  const [projectIndex, setProjectIndex] = useState(0);

  useEffect(() => {
    console.log("useEffect idx", projectIndex) // log: 1 when onClick to Right Button
  }, [projectIndex])

  const SwitchProject = (incrDecrAmount) => {

    let nextIndex = projectIndex + incrDecrAmount;

    if (nextIndex >= 0 && nextIndex < (projects.length-1)) {
      setProjectIndex(projectIndex + incrDecrAmount); // sets 0
      console.log("projectIndex", projectIndex)  // log: 0 when onClick to Right Button (increment by 1)
      console.log("nextIdx", nextIndex) // log: 1 when onClick to Right Button
      setCurrProject(projects[projectIndex]);
      console.log("", projects[projectIndex]); // gives projects[0] not projects[1]

    }
  }



  return (
    <div className="works__preview" id="workPreview">

      <button className="works__itemBtn" id="btnfixedLeft" onClick={() => { SwitchProject(-1) }}>
        <Icon.ArrowLeft></Icon.ArrowLeft>
      </button>

      <button className="works__itemBtn" id="btnfixedRight" onClick={() => { SwitchProject(1) }}>
        <Icon.ArrowRight></Icon.ArrowRight>
      </button>
    </div>
  )

I've checked other questions and try different ways but gives the same result

Can someone explain me that and gives me the solution ?

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — CertainPerformance, Feb 06 '21 at 14:54
`setProjectIndex(prevIndex => (prevIndex + incrDecrAmount));` do something like this, as @CertainPerformance suggets.. — Developer, Feb 06 '21 at 14:57
`setProjectIndex(prevIndex => (prevIndex + incrDecrAmount));` gives the same result as my question — Aymane Lassfar, Feb 06 '21 at 15:28

score 1 · Accepted Answer · answered Feb 06 '21 at 16:32

Since you are just increasing/decreasing values, in your position I would just utilize a userReducer hook

import React, { useState, useEffect, useReducer } from "react";

const useCounterHook = (state: { count: number }, action: { type: string }) => {
  switch (action.type) {
    case "increment":
      return { count: ++state.count };
    case "decrement":
      return { count: --state.count };
    default:
      throw new Error();
  }
};

const WorkPreview  = ({ project, projects }) => {
  const [currProject, setCurrProject] = useState(projects[0]);

  const [state, dispatch] = useReducer(useCounterHook, { count: 0 });

  useEffect(() => {
    console.log("state effect", state.count);
    console.log("state next effect", state.count + 1);
    setCurrProject(projects[state.count < 0 ? 0 : state.count]);
  }, [projects, state]);

  useEffect(() => {
    console.log("currProject", currProject);
  }, [currProject]);

  return (
    <div className="works__preview" id="workPreview">
      <button
        className="works__itemBtn"
        id="btnfixedLeft"
        onClick={() => dispatch({ type: "decrement" })}
      >
         <Icon.ArrowLeft></Icon.ArrowLeft>
      </button>

      <button
        className="works__itemBtn"
        id="btnfixedRight"
        onClick={() => dispatch({ type: "increment" })}
      >
         <Icon.ArrowRight></Icon.ArrowRight>
      </button>
    </div>
  );
};

Why React hook useState don't increment index onClick?

1 Answers1