UseEffect dosen't trigger setState when using sessionStorage-CodePudding

Hey I've go a problem with this code.

const [itemsCart, setCart] = useState([]);
  useEffect(() => {
    (async function (){
      const buffer = await JSON.parse(window.sessionStorage.getItem("itemsCart"))
      setCart(buffer);
      console.log(buffer);
      console.log(itemsCart);
    })()
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("itemsCart", JSON.stringify(itemsCart));
  }, [itemsCart]);

The buffer gets the data, the state variable dosen't. I assume there must be a problem with synchronization however I'm not able to fix that. The output: here

CodePudding user response：

This question is not correct and the approach to solve the problem is not correct as well(whatever problem you are trying to solve). React has different design.

You are trying to get the items and then set them once you get it using useEffect.

The best approach would be to pass your array as a prop from higher order component and then use your useEffect once it has been triggered by dependencies(passed prop)

Make useEffect hook run before rendering the component

CodePudding user response：

This happens because react will wait until all script in useEffect is called and after that, setState will trigger rerender. Because there can be multiple setStates and we want to rerender it only once. That means, you are logging old value in console.log(itemsCart) before its actually there after rerender.

You can logi it with second useEffect before updating sessionStorage and you will see, that state is changed. Or you can create new useEffect for this

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

CodePudding user response：

this works:

const [itemsCart, setCart] = useState(JSON.parse(window.localStorage.getItem("itemsCart")));

  useEffect(() => {
    console.log(itemsCart);
    window.localStorage.setItem("itemsCart", JSON.stringify(itemsCart));
  }, [itemsCart]);

CodePudding user response：

To run the second useEffect(), itemsCart needs to be modified before via useState(). I can't see in your first useEffect() when you call setItemsCart().