Correct approach to get derived values from state

Hello,

In my store, I have several methods that calculates same derived values from state. I am looking for an optimized way to achive that.

Right now, I can do this:

getDerivedValue: () => {
  return get().listA[get().indexB].value;
}
...
get().getDerivedValue();

But I prefer something like this:

get derivedValue () {
  return get().listA[get().indexB].value;
}
...
get().derivedValue;

Unfortunately, using getter gives only the inital state, returning value doesn’t update with state changes. My computations are not that expensive, but it would be much better to access the value as it was a variable then calling it as a function. My concern is a bit aesthetic but anyway, it would be nice to have something like Mobx’s computed property. Is there a workaround for using getter or could you provide an alternative to achieve this?

Thank you.

[samselikoff]

Came across this and surprised to not see the topic of derived state anywhere in the readme. Would love to see how others are handling it!

I was hoping to be able to do something like this:

const useStore = create((set) => ({
  first: 'Daishi',
  last: 'Kato',
  get fullName() {
    return `${this.first} ${this.last}`;
  },
}));

but I guess that’s what you were referring to when you said you don’t think we can support object getters?

The custom hook solution mentioned above isn’t super appealing, just because I’d rather (a) keep my logic near each other and (b) have a single hook for a related group of state + derived data.

Any other thoughts?

[woehrl01]

I would like to share how I solve this without the need for additional libraries. It’s simple:

https://github.com/pmndrs/zustand/issues/132#issuecomment-1120467721 tl;dr; just use a nested object