Tengo 3 capas de componentes cada una con su propio estado, el árbol se parece a esto

 Data Field1 Rule Field2 Group1 DateInput, TextInput..

Los Data son el componente superior y pueden tener cualquier número de Field y Group . Los campos y los grupos también tienen sus hijos con estado. Tengo que hacer una llamada API dentro de Data para enviar un objeto que contenga todo el estado de Campos, Grupos y Reglas, etc.

Cada componente que incluye Data mantiene un objeto que contiene todo el estado de sí mismo y sus hijos. Las propiedades de estos objetos están vinculadas a varios campos de entrada y componentes secundarios. Luego paso estos objetos al padre usando el patrón @Output y EventEmitter. Entonces, si cambia algún texto en un campo de entrada en la parte inferior del árbol, emite un evento con el nuevo objeto que a su vez actualiza el objeto principal y emite un evento. Este ciclo continúa hasta que el último valor del campo de entrada llega a Data .

Problema : tengo que hacerlo para que el usuario pueda agregar/editar/eliminar (usando campos de entrada) cualquier cantidad de campos y grupos en el componente de datos. Mantengo una matriz dentro Data y la uso con *ngFor para representar los componentes secundarios. Las operaciones de agregar/eliminar funcionan bien desde la matriz, pero cuando cambio algunos datos en un campo de entrada o alterno un botón de opción (que se encuentra en algún lugar profundo del árbol de componentes), la lista completa se vuelve a mostrar con un destello visible.

En primer lugar, no quiero el flash. En segundo lugar, existe cierta discrepancia entre el estado de algunos componentes secundarios. Por ejemplo, un botón de opción que se configuró en A antes de volver a renderizar tiene la opción B (predeterminada) después.

Quiero saber si mi forma de implementar dicho sistema es correcta o no. ¿Cuáles son las mejores prácticas y cómo solucionar el problema de flash y estado incorrecto?