When the equality check returns true return the previous value

[briandipalma]

It's great that shallow checks prevent a render when you create objects that are the same in a selector but you still end up returning the newest version of the object from the selector. So if another hook causes a render this new object can trigger other hooks if it's used in dependency arrays even though it's the same object in according to the equality function. It would be great if the selector returned the previous object when the equality function says the two values are the same.

It looks to me like this a React API change and not something within zustand's control?

[briandipalma]

You can work around this issue with a ref:

function getAllFormValues(formID: string) {
  return (state: FormState) => {
    // A new object reference is created each time this selector is called
    return { fieldOne: state.fieldOne.value, fieldTwo: state.fieldTwo.value };
  }
}

function useFormValues(formID: string) {
  const formValuesRef = useRef({});
  const formValues = useFormStore(getAllFormValues(formID));

  if (shallow(formValuesRef.current, formValues) === false) {
    formValuesRef.current = formValues;
  }

  return formValuesRef.current;
}

[briandipalma]

I still feel that internally React should do something like this.

[dai-shi]

Not sure if I understand it but is it related with #1282 ?

[dai-shi]

Is it already modified?

[briandipalma]

I don't know what you mean by "it"...but in essence shallow must be given the old selector value to compare the new selector value against. What I'd like is if an equality function like shallow is used to compare two selector values and they are computed to be the same then the old value is what is returned from the selector. That should prevent hooks like useEffect running with what are the same values. Is that even possible?

[dai-shi]

I've rephrased the post and added some more code

I thought you edited #1998 (comment), but I didn't notice the change.

Now, I see what you mean by the code. useRef is the workaround.

So, do you have an issue (=useEffect infinite loop) with this:

function getAllFormValues(formID: string) {
  return (state: FormState) => {
    // A new object reference is created each time this selector is called
    return { fieldOne: state.fieldOne.value, fieldTwo: state.fieldTwo.value };
  }
}

function useFormValues(formID: string) {
  const formValues = useFormStore(getAllFormValues(formID), shallow);
  return formValues;
}

[briandipalma]

Yes I do, because getAllFormValues returns a new object each time. I guess shallow is only used to prevent renders when the store changes but if something else triggers a render then the store selector will return a new object and shallow doesn't really have a role.

What's required is that when a custom equality function is provided with a selector and the custom equality function says two values are the same the older value is returned from the use store calls. Looking at the code I don't think this is something zustand can fix.
It only seems to have access to the old value in subscribeWithSelector.ts.

Basically if

const formValues = useFormStore(getAllFormValues(formID), shallow);

is called 20 times in a row due to unrelated setState triggered by an interval for example, I'd like formValues to be the exact same object reference. I'm not sure this is something zustand can fix/do.

[dai-shi]

Can you create a minimal reproduction with https://codesandbox.io/s/react-new ?
Don't put too much code. Just a few lines in a single file should be enough.