Addressing the questions posed, retrieving data in the parent component and then passing it down as props may seem cumbersome at first. However, this approach offers a more efficient design. Consider a scenario where a parent component has multiple child components - by fetching the data within the parent and distributing it to the children, we encounter initial challenges but ensure that any changes to the data APIs only require modifications in the parent component file. The children remain unaffected as long as they adhere to the defined interface involving events and props. This method is much simpler compared to having each child fetch its own data.
Generally speaking, the decision to implement a design that involves additional structuring, coding, and thought depends on whether it will ultimately benefit the team over the project's entire lifespan. Therefore, larger systems tend to have extensive designs due to their requirement for maintenance by multiple individuals over an extended period. Conversely, for disposable projects like a script meant for organizing files in daily tasks, there may be room for quick and functional code solutions.
Furthermore, the child components discussed function similarly to pure functions, producing consistent outputs with the same inputs regardless of repetition. Just like the appeal of functional programming, these components are straightforward in structure, easy to manage, but necessitate careful design and initial implementation efforts to fit into our complex reality.