Chartjs-ChartJS in React throws 'too may re-renders'

by

1👍

✅

You need to add a dependency array to useEffect. Excluding items from the dependency array may lead to an infinite chain of updates.

Add the dependency array as the second parameter of useEffect:

  useEffect(()=>{
    setChartData({
      labels: ['john','kevin','george','mike','oreo'],
      datasets:[
        {
          label: 'label',
          data: [12,55,34,120,720],
          borderColor: 'green',
          backgroundColor: 'blue',
        },
      ],
    })
  },[])
  setChartOptions({
    responsive:true,
    plugins:{
      legend:{
        position:'top'
      },
      title:{
        display:true,
        text:'text from tittle'
      }
    }
  }, [chartOptions, chartData]) // effect will run when either changes

Want to run the effect only once?

If you want to run an effect and clean it up only once (on mount and
unmount), you can pass an empty array ([]) as a second argument. This
tells React that your effect doesn’t depend on any values from props
or state, so it never needs to re-run. This isn’t handled as a special
case — it follows directly from how the dependencies array always
works.

Find out more in the docs

Leave a comment