React JS - Component rendering in infinite loop

Question

When I render a screen with the Bar component it renders in an infinite loop, even before I attempt to pass data. I've imported react-chartjs-2 to test and that works fine, i.e. loads just once. But the other bar chart appears to render, then continues to do so until my browser crashes.

I'm thinking it may be related to the fact that my component is a const.

//import Bar from 'react-chartjs-2';   // <-- Renders once
import Bar from './../charts/Bar.js';  // <-- Renders in a loop

const MyComponent = () => {

    return (
        <div className="search">
            <Bar/>
        </div>
    );

}
export default MyComponent;

This is the Bar component I'm using. It's from a Themeforest template called Gogo-React.

/* eslint-disable prefer-rest-params */
import React, { useEffect, useRef, useState } from 'react';
import { Chart } from 'chart.js';

import { barChartOptions } from './config';

const Bar = ({ data, shadow = false }) => {
  const chartContainer = useRef(null);
  const [, setChartInstance] = useState(null);

  useEffect(() => {
    if (chartContainer && chartContainer.current) {
      if (shadow) {
        Chart.defaults.global.datasets.barWithShadow =
          Chart.defaults.global.datasets.bar;
        Chart.defaults.barWithShadow = Chart.defaults.bar;
        Chart.controllers.barWithShadow = Chart.controllers.bar.extend({
          draw(ease) {
            Chart.controllers.bar.prototype.draw.call(this, ease);
            const {
              chart: { ctx },
            } = this;
            ctx.save();
            ctx.shadowColor = 'rgba(0,0,0,0.2)';
            ctx.shadowBlur = 7;
            ctx.shadowOffsetX = 5;
            ctx.shadowOffsetY = 7;
            ctx.responsive = true;
            Chart.controllers.bar.prototype.draw.apply(this, arguments);
            ctx.restore();
          },
        });
      }
      const context = chartContainer.current.getContext('2d');
      const newChartInstance = new Chart(context, {
        type: shadow ? 'barWithShadow' : 'bar',
        options: barChartOptions,
        data,
      });
      setChartInstance(newChartInstance);
    }
  }, [chartContainer, data, shadow]);

  return <canvas ref={chartContainer} />;
};

export default Bar;

Oguz3 · Accepted Answer · 2021-10-23 18:54:03Z

2

useEffect is listening to chartContainer. then useEffect is running and changing canvas and chartContainer ref then useEffect is triggered. This will cause a loop.

answered Oct 23, 2021 at 18:54

Oguz3

1277 bronze badges

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

1 Comment

randomG765 Over a year ago

Is there a problem with the way I'm calling the Bar component? I'm trying to avoid editing it because it's part of the template I'm using and I assume it works. Could it be caused by the context I'm calling the component from?

Karl H · Accepted Answer · 2021-10-23 19:01:20Z

2

The useEffect() hook in React is called every time the state of dependencies change, you bar is calling the useEffect() hook repeatedly because of the chartContianer state getting updated.

Better way of doing this is to update the data in the chart and not the entire chart itself.

answered Oct 23, 2021 at 19:01

Karl H

1301 silver badge6 bronze badges

1 Comment

randomG765 Over a year ago

Is there a problem with the way I'm calling the Bar component? I'm trying to avoid editing it because it's part of the template I'm using and I assume it works. Could it be caused by the context I'm calling the component from?

Collectives™ on Stack Overflow

React JS - Component rendering in infinite loop

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related