componenet does not re-render after change in state in react.js - reactjs

Question

i have an eCommerce application i want the quantity of an item in shopping cart** to be increased as user clicks on plus icon , but when the user clicks on the item state changes but the component doesn't re-renders there for not updating the quantity number in shopping cart , but as i refresh the page the number is updated
main code:
const [item, setItems] = useState([]);
useEffect(() => {
setItems(items);
}, []);
const handlePlus = (number, index) => {
let Nnumber = (number += 1);
let changeitems = item;
changeitems[index].qty = Nnumber;
setItems(changeitems);
localStorage.setItem("items", JSON.stringify(changeitems));
};
JSX:
<span onClick={(e) => {
handlePlus(eachItem.qty, index);
}}
>
<i className="bi bi-plus-circle-fill text-success"></i>{" "}
</span>
Complete code
import { Fragment, useState, useEffect } from "react";
const Cartitemscreater = ({ items ,cartUpdater}) => {
const [total, setTotal] = useState(0);
const [item, setItems] = useState([]);
const [available,setAvailable] = useState(true)
useEffect(() => {
setItems(items);
let totalPr = 0;
for (let index = 0; index < items.length; index++) {
let price = parseInt(items[index].productprice);
totalPr += price * items[index].qty;
}
setTotal(totalPr);
}, []);
let changeItems = []
const handlePlus = (number, index) => {
let Nnumber = (number += 1);
changeItems = item;
changeItems[index].qty = Nnumber;
setItems(changeItems);
localStorage.setItem("items", JSON.stringify(changeItems));
};
const handleMinus = (number, index) => {
let Nnumber = (number -= 1);
let changeitems = item;
changeitems[index].qty = Nnumber;
setItems(changeitems);
localStorage.setItem("items", JSON.stringify(changeitems));
};
const handleDelete = (_id,index)=>{
let deleteState = []
for (let index = 0; index < item.length; index++) {
if(item[index]._id!==_id){
deleteState.push(item[index])
}
}
setItems(deleteState)
cartUpdater(deleteState.length)
if(deleteState.length===0){
setAvailable(false)
return localStorage.removeItem("items")
}
localStorage.setItem("items",JSON.stringify(deleteState))
}
return (
<Fragment>
{ available ?<div className="container my-5">
<div className="table-responsive-xl">
<table class="table mt-5 ">
<thead>
<tr>
<th scope="col">Product image</th>
<th scope="col">Product title</th>
<th scope="col">Product price</th>
<th scope="col">Product quantity </th>
</tr>
</thead>
{ item.map((eachItem, index) => {
return (
<tbody key={eachItem._id} className="shadow">
<tr>
<td>
<img
src={`/products/${eachItem._id}/${eachItem.prImage}`}
className="img-fluid imgs "
alt="somethings"
style={{
width: "130px",
height: "80px",
objectFit:"cover"
}}
/>
<p><small className="text-muted">{eachItem.productdescription}</small></p>
<span onClick={()=>{
handleDelete(eachItem._id,index)
}}><i class="bi bi-trash fs-4 text-danger"></i></span>
</td>
<td>{eachItem.producttitle}</td>
<td className="fw-bold">$ {eachItem.productprice}</td>
<td>
<span
onClick={(e) => {
handleMinus(eachItem.qty, index);
}}
>
{" "}
<i className="bi bi-dash-circle-fill text-danger"></i>
</span>
<span className="mx-2"> {eachItem.qty}</span>
<span
onClick={(e) => {
handlePlus(eachItem.qty, index);
}}
>
<i className="bi bi-plus-circle-fill text-success"></i>{" "}
</span>
</td>
</tr>
</tbody>
);
})}
</table>
</div>
</div>: <p className="mt-lg-5 fw-bold text-danger fs-4"> {"Cart is empty "}<i class="bi bi-cart-fill"></i> </p> }
</Fragment>
);
};
export default Cartitemscreater;

Answer 1

The number isn't updating because useState is async. React is not updating instant instead it is just putting the state update into a queue to avoid unnecessary re-renders. If you really need the update you can use this update function.
Example:
const useForceUpdate = () => {
const [value, setValue] = useState(0);
return () => setValue((value) => value + 1);
};
Just call it in the same click event.