Maximum update depth exceeded React when using Grommet Chart component

Question

I am getting the following error:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Followed by:

The above error occurred in the "Chart" component

my only use of the Chart component (which is from the grommet compontent lib) comes from this bit of code:

import {Chart} from 'grommet';


const WaveForm = (props:any):JSX.Element => { 
    
    const size= props.waveForm.length
    const color = props.isRecording?"recording":props.isPrimed?"primed":"brand";   

    return (
            <Chart
            bounds={[[0,Math.max(1000,size)], [-25,25]]}
            values= {props.waveForm.map((e:number,i:number) => ({value:[i, e, -e]}))}
            size={{"width": "fill",height:"75%"}} 
            round={true}
            color={color}
            thickness="hair"
            />
    
    );
  }

export default WaveForm;

I cannot for the life of me see why this is causing endless re-renders. Any help would be greatly appreciated.

Answer 1

The issue seemed to be due to an issue with the Grommet Chart handles 'fill'. Changing

size={{"width": "fill",height:"75%"}}

to

size={{"width": "100%",height:"75%"}}

fixed the issue