Is there a way to subscribe with selector? e.g. omit a certain property in a watched object?

[tztzt]

Hi there
I am developing a complex dynamic form that manages a complex data structure, below is a simplified structure of my data.

export interface Bar {
  name: string;
  description: string;
}

export interface Foo {
  name: string;
  description: string;
  bars: Bar[];
}

I want to be as optimised as I possibly can, in the way that when I render each 'bar' data component using useFieldArray, each bar can be aware of the parent 'foo's properties, but they should not be concerned with the value in other bar.

In my understanding, this seems not possible to do in RHF, unlike something in Zustand state management where I can do a selector with state, or do shallow subscribe.

Moreover, my use case in Foo is a set of dynamic properties so I cannot statically watch 'name' and 'description', the best way is to simply omit 'bars'.

If I were to do

const parentFoo = useWatch(fooPath)

The bar component ends up subscribing to the entire parentFoo, even including itself.

The alternative is to pass foo directly to each bar and omit the bar property, but on every state update inside bars, foo is a fresh new object reference.

Is my understanding correct? Has anybody attempted something like this before?

[BrendanC23]

Does useWatch's compute property solve your problem? This would allow you to trigger a re-render when name and description change but not when bars changes. Note that the returned watchedValue will no longer provide access to bars (though you can still use getValues() to access it).

const watchedValue = useWatch({
    control,
    name: fooPath,
    compute: ({ bars, ...rest }: FormValue) => {
      return rest; // This will be compared with deepEqual()
    }, 
});

[tztzt]

Oh wow, definitely first time I noticed that, I will give it a try.