Updating the useState values automatically in react js?

Question

I have a usestate array object called mo, which gets the data from an rest api from get request. I use useEffect for getting the data.

 const [mo, UpdateMO] = useState([{}]);

I will be creating an item by post request and that newly created item is stored in tempArray. This newly created item is appended to the mo array object.

UpdateMO([...mo], tempArray);

I show all the values of mo in a table. It is getting updated only once a re-render or refresh is taking place. On refreshing I would be going back to the homepage. So, how can I refresh or re-render the mo so that on creating a new item it automatically re-renders the mo.

Answer 1

Setting state will be done asynchronously. When you want to update state, you can grab the previous values in the state to combine with the new values.

Setting state also triggers a re-render.

// initialize state with an empty array
const [mo, setMo] = useState([]);

// get newValues and update state
setMo((previousValues) => [...previousValues, newValues]);

Answer 2

Use redux for that to maintain data and update data