How to access the updated state after setState method with react hooks?

Question

On button click I want to set the state to selectedMealPlan , store the updated state to the localStorage and route to another component.

  const [selectedMealPlan, setSelectedMealPlan] = useContext(
    selectedMealPlanContext
  );
  const AddItem = (e: any) => {
    setSelectedMealPlan((prev: any) => ({
      ...prev,
      nutrients: {
        newValue: "newValue",
      },
    }));
    localStorage.setItem("mealplan", JSON.stringify(selectedMealPlan))
    history.push("/home");
  };

The problem is that setState() is asynchronous and I can only store the old state to localStorage, is there a way that I could access the most recent state?

Answer 1

I'd use useEffect to watch for changes to selectedMealPlan , and when detected, call setItem :

const AddItem = (e: any) => {
    setSelectedMealPlan((prev: any) => ({
        ...prev,
        nutrients: {
            newValue: "newValue",
        },
    }));
};
useEffect(() => {
    localStorage.setItem("mealplan", JSON.stringify(selectedMealPlan))
    history.push("/home");
}, [selectedMealPlan]);

You could also save the new state object in a variable inside the setSelectedMealPlan callback, and both call setItem with it and return it for the new state, but that'd be impure and weird.