Chartjs-React + chartjs app becomes slow as add charts

0👍

I changed how I manage both state and useEffect and now the drawing have no issue. As the documentation says, if multiple states change together combine them in a single object and that is what I did.
What I change:
As mentioned, I change the state into one object:

const [data, setData] = useState({
    chartData: {
      labels: [],
      datasets: [
        {
          label: "Users Gained",
          data: [],
          backgroundColor: ["red"],
          borderColor: "red",
        },
      ],
    },
    slideData: {
      slideTitle: "",
      htmlText: "",
      paragraphTitle: "",
    },
  });

And I change the useEffect to only run the first time that the component mounts:

useEffect(function () {
    fetch(`this is a call to my api`)
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        setData({
          chartData: {
            labels: data.data[props.slideData.xAxis],
            datasets: [
              {
                label: "Users Gained",
                data: data.data[props.slideData.yAxis],
                backgroundColor: ["red"],
                borderColor: "red",
              },
            ],
          },
          slideData: {
            slideTitle: data.data.slide_title,
            htmlText: data.data.html_text,
            paragraphTitle: data.data.paragraph_title,
          },
        });
        setLoading(false);
      });
  }, []); 

Leave a comment