Why React hook useState don't increment index onClick? - reactjs

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 ?

Answer 1

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>
);
};