0

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.

Sanket Shah
  • 2,888
  • 1
  • 11
  • 22
Jack McKay Fletcher
  • 129
  • 8
  • 1
    If you return `null` instead of `Chart`, does the problem go away? If so, try removing all the props and see if that fixes the error. If so, remove props one by one until you identify which prop is breaking. – sallf Dec 08 '21 at 17:20
  • thanks I followed this idea. I found if I set the size as : size={{"width": "100%",height:"75%"}} instead of {{"width": "fill",height:"75%"}} then I do not get the crash. – Jack McKay Fletcher Dec 08 '21 at 17:40
  • 1
    Sounds like it could be a bug with grommet and/or "fill" isn't supported. Might be worth [filing an issue](https://github.com/grommet/grommet/blob/HEAD/CONTRIBUTING.md#you-can-become-a-contributor) because even if "fill" isn't supported, I would expect it to fail more gracefully. – sallf Dec 08 '21 at 22:41

1 Answers1

0

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

Jack McKay Fletcher
  • 129
  • 8