About best practice, using it in project the first time, I've written tons of boilerplate, wondering if it can be more concise?

[FateRiddle]

For instance my App component needs to get access to a number of states and methods, I wrote them one by one like this in App:

  const els = useStore((state) => state.els);
  const setEls = useStore((state) => state.setEls);
  const setLabelEditing = useStore((state) => state.setLabelEditing);
  const showTool = useStore((state) => state.showTool);
  const showEditor = useStore((state) => state.showEditor);
  const editorId = useStore((state) => state.editorId);
  const editElById = useStore((state) => state.editElById);

Is this the best practice? If not what is?

[dai-shi]

That looks good to me. Alternatively, you could combine them like in an array and use shallow.

If you are looking for another practice, we can define actions outside useStore in advance.
See: https://github.com/pmndrs/zustand/wiki/Practice-with-no-store-actions

[FateRiddle]

@dai-shi Thanks. By the way what's the best way, performance wise, to do a selector?
By that I mean, if I've got items and currentId saved as zustand states, how does a component get access to currentItem which is items[currentId]. Do I fetch both items and currentId from useStore, then do the math in the given component?

I'd imaging if I do that, any change to items would result in a rerender of the component, yet the component is supposed to change only when "current item" is changed.

[dai-shi]

performance-wise, defining a stable selector outside a component is the best.

const selectCurrentItem = (state) => state.items[state.currentId]

const Component = () => {
  const currentItem = useStore(selectCurrentItem)
  // ...
}

[TheRefineryAU]

In this article the author uses this pattern:

const { count, increment, decrement } = useCounterStore();

I haven't seen this anywhere else but it works for me and saves so mcuh boilerplate! Is there any issues/downsides with using this approach over OP's code?

[dai-shi]

This is valid, but if there are some other properties, it can cause extra rerenders.

You might be interested in valtio which optimizes this pattern.

[TheRefineryAU]

Is there an easy way to tell if i'm causing extra rerenders?

[dai-shi]

Use React DevTools.