1- Why is this happenning with Zustand?
That is not because of Zustand itself, but because of how React re-runs hooks.
2- How can I fix this?
You wrote this:
const [config, setConfig] = useSafeState<ConfigData>({
mode: ListModeEnum.CREATE_SHOPPING_LIST,
listType: ListTypeEnum.SHOPPING_LIST,
visible: false,
});
This might happen especially if you're not memoizing the useLists() hook return or structure.
You need to make sure that initialState is not recomputed on every render.
const initialConfig = useMemo(() => ({
mode: ListModeEnum.CREATE_SHOPPING_LIST,
listType: ListTypeEnum.SHOPPING_LIST,
visible: false,
}), []);
const [config, setConfig] = useSafeState<ConfigData>(initialConfig);
you can check this , if this not work , let me know