Visualizing ImmutableJS data from Redux store in a graph

Question

I am working on a React and Redux application that uses ImmutableJS to store all of it's state. The app receives data from a sensor at about 100 Hz. I need to draw a graph that updates in real time and displays this data. I have been using React-Vis for the graph, the problem is that it takes an array of objects and not an ImmutableJS data structure.

I have solved this by converting the ImmutableJS data structure to an array like this:

const data = this.props.HEGPercentage.toIndexedSeq().toArray()

This works but the problem I am encountering is massive lag if I run this with real data, I think because it has to create a new array all the time.

How can I create a high performance solution for this and still use ImmutableJS?

Answer 1

Converting between plain JS objects and Immutable.js objects can be very expensive. In particular, the fromJS() and toJS() operations are the most expensive operations in the Immutable.js library, and should be avoided as much as possible (and especially in Redux mapState functions).

It sounds like you're already at least somewhat on the right track. Use memoized selectors to cut down on expensive transformations, try to round those numbers if possible so that there's fewer meaningless changes, and cut down on the total number of updates overall.

My React/Redux links list has a large section of articles on improving performance for React, Redux, and Immutable.js, which may be helpful.

It's also worth noting that I personally advise against use of Immutable.js for a variety of reasons.