Memoizing selectors for actions

[zbeyens]

I was thinking to write a selector containing all the actions of the store:

const selActions = (state: SlatePluginsState) => ({
  setValue: state.setValue,
  setComponents: state.setComponents,
  setEditor: state.setEditor,
  setPlugins: state.setPlugins,
});

export const useSlatePluginsActions = () => useSlatePluginsStore(selActions, shallow);

As the actions never gets updated, is writing a selector for each action useless in term of performance?

[dai-shi]

I'd say it's a subtle difference and you can do either way.
If you are keen about the performance, it's still creating an object and shallow compare it in every render.

More performant way is:

const actions = {
  setValue: useStore.getState().setValue,
  setComponents: useStore.getState().setComponents,
  setEditor: useStore.getState().setEditor,
  setPlugins: useStore.getState().setPlugins,
};

Or, not defining actions in the store in the first place. But, again it would be a subtle difference and you wouldn't notice unless benchmarking in artificial settings.