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:

If you're using the devtools middleware, it serializes state for the Redux DevTools extension and can drop non-serializable values (functions). In some zustand versions, state.actions gets stripped during a devtools sync, leaving it undefined on re-renders. Try removing devtools() temporarily to confirm.

The other possibility is a naming collision. zustand internally uses certain keys, and actions is a common pattern that some middleware touches. Renaming to something like methods or handlers is the quickest diagnostic.

If devtools is the culprit, wrapping the devtools middleware so it excludes the actions key from serialization fixes it without removing devtools entirely.

[tamish-max]

This usually happens because the devtools middleware serializes state for Redux DevTools, and functions inside a nested actions object get stripped during a restore / jump / hot-reload cycle.

So the flow is roughly:

{
  bears: 0,
  actions: { addBear: fn, reset: fn }
}

becomes a DevTools snapshot like:

{ bears: 0, actions: {} }

and when that snapshot is applied back, your real actions object gets overwritten.

A safer pattern is to keep actions at the top level instead of inside a nested object:

const useBearStore = create<{
  bears: number
  addBear: () => void
  reset: () => void
}>()(
  devtools((set) => ({
    bears: 0,
    addBear: () => set((s) => ({ bears: s.bears + 1 })),
    reset: () => set({ bears: 0 }),
  }))
)

Then consume only the action you need:

const addBear = useBearStore((s) => s.addBear)

If you really want the grouped actions object, I'd avoid time-travel/restore for that store or keep those functions out of the DevTools-tracked shape.