If I use actions as a key in store it is stripped out from it for subsequent renders

[alex-bondarev-linnovate]

A bit weird but if I follow TkDodo's advice on separating actions from state and create a hook for it, much like in the example

export const useBearActions = () => useBearStore((state) => state.actions);

it fails on subsequent rerenders. So it works fine on initial render but then errors. All other 'dedicated' hooks for the same store work fine even in the same component. I've tripple-checked the syntax.

What is even weirder is that if I change actions to something else it works just fine. Has anybody experienced anything like it? I'm pretty sure that the issue is with me and how I do stuff, but still 😃 I've never experienced receiving half of the store in a component simply because I chose the wrong key inside of it (so it seems). I'm receiving everything but the 'actions' bit.

[dbritto-dev]

@alex-bondarev-linnovate would you mind creating a demo on stackblitz?

[travisbreaks]

The actions key specifically is the problem, not your selector pattern. Two things can cause this:

Most likely: devtools middleware conflict

If you are using the devtools middleware, it has internal logic that intercepts state updates to send them to the Redux DevTools browser extension. In some zustand versions, the devtools middleware treats state.actions specially — it may serialize state for the extension and drop non-serializable values (functions), then re-hydrate a state where actions is missing or undefined. The effect is that state.actions is undefined after the first mutation triggers a devtools sync, which causes the error on re-renders.

Quick check: remove devtools from your middleware stack. If the error disappears, that is the cause.

Secondary: infinite re-render from reference inequality

Even without devtools, selecting state.actions (an object) with the default Object.is equality will trigger an infinite loop in certain store shapes. If any middleware (immer, subscribeWithSelector) reconstructs the state object on mutation, state.actions gets a new object reference on every set — causing zustand to always consider the selector result "changed", which triggers a re-render, which triggers another comparison, and React throws "Maximum update depth exceeded".

Fix

// Option 1: shallow equality (works with both scenarios)
import { shallow } from 'zustand/shallow'

export const useBearActions = () =>
  useBearStore((state) => state.actions, shallow)

// Option 2: select individual actions (stable function references)
export const useAddBear = () => useBearStore((state) => state.actions.addBear)
export const useRemoveBear = () => useBearStore((state) => state.actions.removeBear)

// Option 3: read actions outside React (they never change)
const { addBear, removeBear } = useBearStore.getState().actions

Option 1 is the drop-in fix with minimal change. Option 2 or 3 are better if you only need specific actions in a given component, since they avoid creating a selector that returns an object at all.

If you are on zustand v5, shallow is now exported from zustand directly: import { useShallow } from 'zustand/react/shallow'.