We're using RxJS to implement a Kanban board with updates via sockets. There's a state manager.

We're using RxJS to implement a Kanban board with updates via sockets. There's a state manager. In a simplified version, everything is based on three entities:

funnel - pipeline
stage - stage
deal - deal

Let's consider two structures (pseudo-markup). For example, the task is to change the value of color for the stage entity, and the information about this came via sockets.

1st structure option

funnel$: Observable = { name: T, ..., stages: T[] [{ name: T, color: T, ..., deals: T[] [{ name: T, ... }] }] } In case of a color change, we find the stage by ID, change the color value, and then funnel$.next(funnel$.value). The data on the client has been updated.

2nd structure option

funnel$: Observable = { name$: Observable, ..., stages$: Observable<T[]> [{ name$: Observable, color$: Observable, ..., deals$: Observable<T[]> [{ name$: Observable, ... }] }] } In case of a color change, we find the stage by ID, change the color value, and then funnel$.value.stages$.value[index].value.color$.next(color). The data on the client has also been updated.

Questions:

How do people usually do such things, or is one of the methods unacceptable?
In my opinion, each method has its pros and cons. Globally, the first method is much easier to work with data inside components, while the second method renders much fewer components that depend on the data.
I suspect that the choice depends on business tasks, such as how often messages about data changes will arrive. 🤔