My question is similar to this one: How to manage component rendering when there are several small, repeatable sub-components
I am building a RequirementsList component, which has a list of 'Requirement' components.
- Each Requirement may have 0 or more Comment components.
- When the requirements data is fetched from server, associated comments are not fetched immediately (lazy loading).
- So, first rendering will show only basic part of the requirement. When user clicks on the comments tab, the comments component in comments tab makes a call to the store to fetch the comments.
- Now when comments are successfully fetched from server, I want to re-render the affected comments tab.
I am in a dilemma on how to propagate the received comments data to the comments component. I can see a couple of options:
- Comments Component listens for store event, gets the data and updates itself. This is straight and simple. But violates the principle of data flow from parent.
- Parent root component (RequirementsList) listens to store, and propagates the results as props. In this case, I donno how? The parent is only listening for list of requirements, and not for comments against each requirements.
So, I presume that first option is the right way to go, as the parent doesn't care in managing the data for some Comment component deep down the hierarchy.
Are there any better suggestions for this?