I have 3 layers of components each with their own state, the tree looks something like this

Data

 Field1
  Rule

 Field2

 Group1
  DateInput, TextInput..

The Data is the topmost component and can have any number of Fields and Groups. Fields and Groups also have their stateful children. I have to make an API call inside Data to send an object which contains all the state from Fields, Groups and Rules etc.

Each component including Data maintains an object containing all the state of itself and its children. The properties of these objects are bound to various input fields and children components. I then pass these objects to the parent using @Output and EventEmitter pattern. So, if you change some text on an input field at the bottom of the tree, it emits an event with the new object which in turn updates the parent's object and makes emit an event. This cycle continues until the latest value of the input field reaches Data.

Problem: I have to make it so that user can add/edit/delete (using input fields) any number of Fields and Groups in the data component. I'm maintaining an array inside Data and using it with *ngFor to render the child components. Add/remove operations work fine from array, but when I change some data in an input field or toggle a radio button (which is somewhere deep in the component tree), the whole list re-renders with a visible flash.

First of all, I don't want the flash. Secondly, there are some mismatch between the state of some child components. For example, a radio button which was set to A prior to re-render has option B (the default) afterwards.

I want to know if my way of implementing such a system is correct or not. What are the best practices and how to fix the flash and incorrect state problem?