Why doesnt registering to a field within an object that is itself registered not cause the other controller to render?

[paulleonartcalvo]

I have a form like this:

{ 
    config: {
        name: string;
        colors: string[];
    }
}

I have a controller which registers to config, and another controller which registers to config.colors. The first controller, on change, should update the entire config to some {name: string; colors: string[]}. When the second controller changes, it should only update config with new colors: string[]. However, i notice that when i change colors, the controller with config does not update its instance of config.colors to match. Why is this the case? Am i improperly using the controllers?

They are currently arranged like this:

<Controller  control={control} name='config' render={({field}) => <Picker onChange={field.onChange}/> }/>
<Controller  control={control} name='config.colors' render={({field}) => <Picker onChange={field.onChange}/> }/>

[leapful]

@paulleonartcalvo

Component Controller and also the whole react-hook-form are built with optimization for re-rendering therefore when registering a form field name, it will be treated as an isolated standalone field to prevent side effect with other registered fields. So yes, your implementation cannot work properly following your expected behavior.

The correct way to solve this problem is to register field config.name and config.colors then perform update on each other field if needed by using setValue method.

For example:

// Field "config.name"
const onChange = (data) => {
   field.onChange(data.name);
   setValue('config.colors', data.colors);
   trigger('config.colors') // trigger validation if needed
}