4

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.

Improve this question
2
  • I would divide them into separate stores. But having it the way you mentioned should be okay. And you wouldn't rerender more than it is required. Each of your child components could have componentWillReceiveProps() and if the props didn't change you wouldn't need to rerender those components Commented Jul 4, 2015 at 9:46
  • If you pass through as props, you can catch non-changes and kill the render during shouldComponentUpdate() facebook.github.io/react/docs/… Commented Jul 4, 2015 at 20:07

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.