Is it possible to re-render on change of any object property without calling all of them?

[giardiv]

Store

const useStore = create((set, get) => ({
  config: {
    x: null,
    y: null,
    z: null,
    options: null,
    sort: null
  },

  setX: (x) =>
    set((state) => ({ config: { ...state.config, x: x} })),
  setY: (y) =>
    set((state) => ({ config: { ...state.config, y: y} })),

....

Component A

setX(x)

...

setY(y)

Component B

const {x, y, z, option } = useConfigStore(state => 
    ({x: state.config.x, y: state.config.y, z: state.config.z,  option: state.config.option}), shallow);

In this example when I change the value of x or y, component B re-render. Is there a way to re-render component B on any change of the properties of the object config? Like updating sort

[dai-shi]

You mean like this const config = useConfigStore(state => state.config)?

[giardiv]

This does not work because I don't update config but property of config like config.sort. With that the component B does not re-render on change of a property of config

That's why I use shallow here

[giardiv]

I tried that as well but same issue

const config = useConfigStore(state => state.config, shallow);

[dai-shi]

I don't update config but property of config like config.sort.

This breaks immutability contract. You need to update foo object if you change foo.bar property.

[lkdm]

How are you updating sort in this example, @giardiv? If you are updating them like you update setX and setY there should be no problem because you are using the spread syntax to replace the entire object.