Multiple React components architecture

Question

I am creating a realtime dashboard which consumes an API for the data. The application is an isomorphic react app built on top of a node API, I am using the Flux architecture, more specifically the alt implementation .

My question is the dashboard has around 4/5 realtime charts (I am using a React D3 library) , each chart calls an API endpoint. I have a main <Dashboard /> component and inside this each chart component lives. My question is should the <Dashboard /> be responsible for listening for data and passing it though as props or should each graph component be responsible for its own store/action life cycle? If I pass the data through as props this would this mean the UI would rerender more than is required?

I have yet to find any examples of React/Dashboard/Charting application so if anyone knows of any this would be very useful.

Answer 1

It's better to keep the API access right at the top level, and just pass everything down through props. Consider putting the data from the API into a store, and using that to drive the top-level component. The practical advantages of doing it that way:

• you now have the freedom to use the same data in more than one place - it's not trapped in the child component
• testing is simplified, because you can just pass in some dummy props and confirm that you get the right result
• it's easier to reason about: the child components no longer need to care about the implementation details of where their data came from

Regarding your question about performance: Consider using pure render mixin and only updating the parts of the store that need to change. That way, your chart components can very quickly tell is anything has changed, and won't re-render if nothing has changed.