Uncaught RangeError: Maximum call stack size exceeded - ReactJS

Question

I have gone over all questions like mine, but couldn't find anything useful for this case.

Please help.

This is my function:

renderFields() {
    if (this.props.field) { // some prop

      return (
        <SelectBox
          className="selectbox"
          value={this.state.selectId}
        />
      );
    }
  }

Where used:

renderAllFields() {
  <div>{this.renderFields()}</div>
}

This generates the following message:

Uncaught RangeError: Maximum call stack size exceeded

It probably has something to do with life cycles in React, but I am not sure.

For example when I check:

componentDidUpdate = (prevProps) => {
    console.log('prevProps', prevProps);
    console.log('this.props', this.props);
  };

They look the same.

Thanks.

EDIT:

render() {
  return (
    <div>
      <Formsy.Form
         ref="form"
         onChange={this.checkForChange}>
        <Grid fluid className="container__seven--holder">
          {this.renderAllFields()}
        </Grid>
     </Formsy.Form>
    </div>
  )
}

checkForChange() gets values from form and sets updated state using:

this.setState(updatedState);

I believe the issue is with updating on each change.. even when I move mouse it keeps updating.

Could you add the code where are you calling `renderAllFields()`? — Namaskar, Dec 26 '18 at 16:26
I tried to recreate your class [here](https://codepen.io/anon/pen/XoarQz) and it seems to not be erroring. This seems like the `onChange` functions and `setState` keep triggering each other. I would start off by removing the `setState` call in `checkForChange()` and see if it keeps happening. — Namaskar, Dec 26 '18 at 16:58
@SvenWritesCode, do you want to continue in chat, it is really tricky? — dututu, Dec 27 '18 at 09:20

Hemadri Dasari · Answer 1 · 2018-12-26T18:31:11.737

1

Since you haven’t shared enough information or complete component code, I suspect below could be the reason

Change

   <Formsy.Form
     ref="form"
     onChange={this.checkForChange}>
    <Grid fluid className="container__seven--holder">
      {this.renderAllFields()}
    </Grid>
 </Formsy.Form>

To

Below solution would work If you expect event for checkForChange function

    <Formsy.Form
     ref="form"
     onChange={e => this.checkForChange(e)}>
    <Grid fluid className="container__seven--holder">
      {this.renderAllFields()}
    </Grid>
 </Formsy.Form>

Below solution would work If you don’t expect event for checkForChange function

    <Formsy.Form
     ref="form"
     onChange={() => this.checkForChange()}>
    <Grid fluid className="container__seven--holder">
      {this.renderAllFields()}
    </Grid>
   </Formsy.Form>

edited Dec 26 '18 at 18:31

answered Dec 26 '18 at 18:25

Hemadri Dasari

32,666
37
119
162

Thanks, care to explain? – dututu Dec 26 '18 at 18:49
If you don’t use () => then without user action the function gets called on every render and that function sets the state which means onChange gets called on every render. To control this behavior you need to make it arrow way like I explained in my answer – Hemadri Dasari Dec 26 '18 at 18:53
It didn't help.. care to continue in chat? – dututu Dec 26 '18 at 19:04

Uncaught RangeError: Maximum call stack size exceeded - ReactJS

1 Answers1