Zustand is returning the initial value, not the value after fetch in UseEffect. Why?

[ioiofadhil]

Hi. Thanks for the this state-management. Super friendly.

I tried to store my data result from fetch in the store like this :

export const useDashboardDataset = create((set, get) => ({
   data: false,
   get: async (params = new URLSearchParams({})) => {
      if (get().data) {
         return get().data;
      }
      try {
         const res = await axios({
            url: `${GeneralHelpers.api_domain()}/dashboard_datasets?${params}`,
            method: "GET",
            headers: {
               "Accept": "application/json",
               "Content-Type": "application/json",
               "Authorization": "Bearer " + JSON.parse(localStorage.getItem("user")).user_token.token,
            },
         });
         set({data: res.data.data});
      } catch (error) {
         toast.error("Failed to fetch datasets");
         set({data: []});
      }
      return get().data;
   },
}));

But when i call inside component like this :

const dashboardDatasets = useDashboardDataset((state) => state.data);
const dashboardDatasetsGet = useDashboardDataset((state) => state.get);

useEffect(() => {
   const get = async () => {
      if (!dashboardDatasets) {
            await dashboardDatasetsGet();
      }
      console.log(dashboardDatasets)
      console.log(useDashboardDataset.getState().data)
   };
   get();
}, []);

the first console.log returning the initial value, which is a false. But the second one returning after the changes. Why is this happening? I really prefer the first console log write because for me, the style looks more cleaner. Appreciate any help!! Thanks before!

[dai-shi]

It's a correct behavior with React and has nothing to do with Zustand.
Though correct, it's often confusing and can be said advanced. It's sometimes referred as "stale closures."

[dbritto-dev]

@ioiofadhil that's the expected behavior talking about stale closures