pureRender totally useless about recharts HOT 6 CLOSED

It's really a problem.The state of LineChart is changing when mouse is moving in the chart, because we keep the location of mouse in state.

from recharts.

The most condition is the reference of array or object. I use lodash isEqual function to re-write pureRender. It works faster.

Line              yes: 1023      no: 0
Layer             yes: 1955      no: 2197
Curve             yes: 1245      no: 253
LineChart         yes: 556       no: 81
Surface           yes: 556       no: 0
CartesianGrid     yes: 0         no: 354
CartesianAxis     yes: 1215      no: 0
Legend            yes: 0         no: 47
Tooltip           yes: 481       no: 7
DefaultTooltip    yes: 481       no: 0
Dot               yes: 493       no: 497

from recharts.

Thanks, @arcthur.

Yeah, it work faster now.
Actually isEqual from lodash is yet another way to perform deep comparison. In terms of performance, this approach is pretty expensive.

The problem is not only for tooltip, but in managing state in common sense.
Every time LineChart is rerendering, it creates a bunch of new objects for children:

const items = findAllByType(children, Line);

let xAxisMap = this.getAxisMap('xAxis', items);
let yAxisMap = this.getAxisMap('yAxis', items);
const offset = this.getOffset(xAxisMap, yAxisMap);

xAxisMap = this.getFormatAxisMap(xAxisMap, offset, 'xAxis');
yAxisMap = this.getFormatAxisMap(yAxisMap, offset, 'yAxis');

I think it would be better to store such auxiliary objects (like axisMaps and offset) to state, and perform shallow comparison for own LineChart props (nextProps) and children props (nextProps.children[].props) in componentWillReceiveProps. If that comparison will be false, we could recalculate these objects, otherwise just reuse previous state.
This approach will allow us to use shallowEqual check for other pure components.

Deep comparison seems like a brute force to achieve some performance boost, but it hides problem rather than solves it.
What do you think?

from recharts.

Thanks @Cloudo to support the project, and welcome to provide the better codes to improve the recharts. 😄

Actually, isEqual isn't a better method that I may not spend much time to think about the problem. but the original pureRender is too simple that didn't satisfied most conditions, such as complex object. I will custom the better pureRender function to divisive the difference for next few days.

from recharts.

Thanks @Cloudo for your enthusiasm.
I plan to refactor the chart components in the next period of time.
I think the components can be optimized in the following two points:

1. Store some auxiliary objects (axisMaps, offset and so on)
2. Don't store the position of cursor in state

The job involves so much components, may take longer.
P.S. I'm sorry I didn't reply to you at the first time. We are on vacation for Chinese New Year, and we will start work next week.

from recharts.

We optimized the pureRender function above official pureRender, that may be solved more problems. Always thanks!

from recharts.