Easy-peasy: Does destructuring state have any performance implications?

[GollyJer]

Typed state looks like this.

import { Action, action } from "easy-peasy";

export interface SettingsModel {
  activeTheme: string;
  setActiveTheme: Action<SettingsModel, string>;
}

const settings: SettingsModel = {
  activeTheme: "LightTheme",
  setActiveTheme: action((state, payload) => {
    state.activeTheme = payload;
  })
};

export default settings;

When accessing 👆 is there any gotchas to be aware of by destructuring...

const { activeTheme } = useStoreState(state => state.settings);

...instead of straight variable assignment?

const activeTheme = useStoreState(state => state.settings.activeTheme);

Thanks! 👍

[ctrlplusb]

I would say 95% of the time there wouldn't be any difference between the two forms. The only time it would matter would be if there was another property within your model.settings that updated often. The component using the destructured activeTheme would re-render for any update to settings.

I mean you would have to be talking about a significant number of updates happening in a short period to make this noticeable though, so I honestly wouldn't worry about it. Use what is convenient and refactor if you notice a bottleneck.

The main thing to avoid, like the docs state, is returning a new array/object instance from within your state mapper.

e.g.

const { activeTheme } = useStoreState(state => {
  return { theme: state.settings.theme, user: state.session.user };
});

That is a red flag as you would return a new object instance which would break the strict equality check.