React Render Function Preventing Creating New Canvas Element On Each Time Invoked - Charts.js

I am using React, Charts.js and react-chart.js. I am making an API request which returns data that i am then visualizing. The problem I am having is that when the page initially lo

Solution 1:

I think the problem is not on React, but in ChartJS ... It's getting new information... but instead of updating ... it is inserting new canvas..

Try setting redraw.

From the docs https://github.com/reactjs/react-chartjs

if data passed into the component changes, points will animate between values using chart.js' .update(). If you want the chart destroyed and redrawn on every change, pass in redraw as a prop. For example <LineChart data={this.state.chartData} redraw />

Solution 2:

This sounds like intended behaviour of React -- it will always rerender when the state changes. Your only options are to not bind your render to the state, or control if the update should get called. Without knowing what you're trying to accomplish, the react-chart docs seem to indicate it won't rerender/redraw the initial Canvas element.

If you want to manually control when the component will update, use the shouldComponentUpdate method.

Use shouldComponentUpdate() to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

shouldComponentUpdate: function(nextProps, nextState) {
  // return true to continue with update, false to stop itreturnthis.props.names.length == 0 && nextProps.names.length > 0
},

This could have side effects, such as if you are depending on props.names elsewhere and want that updated.