nkbt / react-height

Component-wrapper to determine and report children elements height
MIT License
180 stars 27 forks source link

infinite loop with setState( { dirty...} #39

Open tcoldmf opened 5 years ago

tcoldmf commented 5 years ago

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>
nkbt commented 4 years ago

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)