CODEWITHSUNDEEP
javascriptreactjs
Chris
Chris

Reputation: 171

React Maximum update depth exceeded - why only in sub component?

I have read almost all of the existing questions to this problem but I just don't find an answer to this.

I built an application that basically has the following hiarchy:

App
  Load
  Deploy

I split the load component further into the following structure:

App
  Load
    Owner
    Heir
    Other
  Deploy

I have a single source of truth in <App /> so that means that I just passed all the handlers from <Load/> to <Owner />, <Heir /> and <Other />.

In <Owner /> is now the following code that was previously in <Load/>:

<Form.Control
    type="number"
    min="0"
    step="0.00001"
    placeholder="enter ETH amount"
    value={
    heir.share !== ""
        ? this.props.web3.utils.fromWei(
            heir.share.toString(),
            "Ether"
        )
        : ""
    }
    onChange={e =>
    this.props.onValueChange(
        heir.id,
        e.target.value !== ""
        ? BigNumber(
            this.props.web3.utils.toWei(e.target.value)
            )
        : ""
    )
    }
/>

The this.props.onValueChange method is passed from <Load /> and ultimately leads to <App /> where the state of an object is altered.

Before I did this change it worked like a charm. Now I get the Maximum update depth exceeded error. To me this doesn't make any sense. I followed the documentation with passing the values correctly in an arrow function.

Edit: Here's a gist of the owner component.

Upvotes: 0

Views: 116

Answers (1)

Michael Knight
Michael Knight

Reputation: 265

I can't see the issue in the snippet you've shared so perhaps send a link to the github repo or share the rest of your code. But as suggested above you code must have infinite recursive calls which isn't hard to do in react.

You should look carefully on each component to see if it's updating the state when it loads.

If you have one single state object every time that it is updated, any component that receives that state as a prop will have to re-render, which makes sense as you components must reflect the current state.

But what happens if one of those components alters the state when in is rendered? The whole process starts off again and again.

You should also consider using the provider,Redux or some other form of state management system. They may seem daunting at first but are super helpful. I would be more than happy to help explain them if you like.

edit after reviewing gist

Looking and your gist it looks like in you're calling the handle show and updating the state every time this component is rendered therefore creating an infinite loop.

You should try making it a function which calls the handle change instead e.g.

Onclick={()=>this.handleChange(insert variable here)}

Let me know how you get on

Upvotes: 2

Related Questions