react-height icon indicating copy to clipboard operation
react-height copied to clipboard

infinite loop with setState( { dirty...}

Open tcoldmf opened this issue 6 years ago • 1 comments

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.

{snip} .getElementHeight(this.wrapper);t===this.state.height?this.setState({dirty:!1}):this.setState({height:t,dirty:!1},function(){return e.props. {snip}

Code:

        <ReactHeight onHeightReady={ height => setHiddenContent( height > props.maxHeight )}>
          {
            hidden_content &&
              <div
                style={{
                    top: '120px',
                    height: '80px',
                    width: '100%',
                    position: 'absolute',
                    backgroundImage: 'url(/assets/images/mensajero/degradado.png)',
                }}
              />
          }
          { props.children.contentToCollapse }
        </ReactHeight>

tcoldmf avatar Sep 05 '19 16:09 tcoldmf

Please provide a working codepen (or any online example) I can check. At this point I can only assume that when you setHiddenContent your component changes children which triggers ReactHeight update, which calls onHeightReady and so on in a loop, thus you need to limit updates in your App instead (using setState or anything else that will not create new children for any new height that is probably even same)

nkbt avatar Nov 08 '19 05:11 nkbt