Unable to update array with Min and Max values - reactjs

Question

I'm writing a code where I need to get Min and Max values. In my real-time scenario, I've got an SDK to which I make two promise calls and it returns min and max values. I'm trying to mock up the same in my example below. I've got a context in place that is used to store the values. Here is my sample code.
Here is my context:
import React, { useState } from "react";
import { useContext } from "react";
const ProductsContext = React.createContext();
export const ProductsProvider = ({ children }) => {
const [priceValues, setPriceValues] = useState([0, 0]);
return (
<ProductsContext.Provider
value={{
priceValues,
setPriceValues
}}
>
{children}
</ProductsContext.Provider>
);
};
export const useProductsContext = () => {
return useContext(ProductsContext);
};
And my code is as below:
import { useEffect } from "react";
import { PriceRange } from "./PriceRange";
import { useProductsContext } from "./ProductsContext";
const ShowRange = () => {
const { priceValues, setPriceValues } = useProductsContext();
const getMinVal = () => {
setPriceValues([Math.random() * 100, priceValues[1]]);
};
const getMaxVal = () => {
setPriceValues([priceValues[0], Math.random() * 100]);
};
useEffect(() => {
getMinVal();
getMaxVal();
}, []);
console.log(JSON.stringify(priceValues));
return <>{priceValues[0] && priceValues[1] && <PriceRange />}</>;
};
export default ShowRange;
Currently, when I run this, priceValues is of format [0, randomNumber]. And once I get the values.
I'm confused on why only the second value in Array gets updated but not the first. Where am I going wrong?
Here is working code of the same.

Answer 1

Even though getMinVal and getMaxVal are separate functions that update state, they are called at the same time. This is causing the first update to be lost by the second update since priceValues[1] will not be updated until the next render.
You could solve this by using the function update form of setting state:
const getMinVal = () => {
setPriceValues((prev) => ([Math.random() * 100, prev[1]]));
};
const getMaxVal = () => {
setPriceValues((prev) => ([prev[0], Math.random() * 100]));
};

Answer 2

After you call setPriceValues React sets value (internally) and schedule re-render, but value stored in priceValues const is not updated.
State is not exactly like variable. State has same value during one re-render. If you want actual value during re-render (after mutation) pass function with param to setState.
You code with expecting behaviour:
const ShowRange = () => {
const { priceValues, setPriceValues } = useProductsContext(); // priceValues == [0, 0]
const getMinVal = () => {
// priceValues == [0, 0]
setPriceValues((pricesValues) => [Math.random() * 100, priceValues[1]]);
};
const getMaxVal = () => {
// priceValues == [0, 0]
setPriceValues((priceValues) => [priceValues[0], Math.random() * 100]);
};
useEffect(() => {
// priceValues == [0, 0]
getMinVal();
// priceValues == [0, 0]
getMaxVal();
}, []);
console.log(JSON.stringify(priceValues));
return <>{priceValues[0] && priceValues[1] && <h1>Hi</h1>}</>;
};