Setstate needs to test if it's mounted before running

[chrisjpatty]

Currently the components don't test if they're mounted before firing a setState. This leads to an occasional case where components throw React's setState error. Each component should internally track their mounted state as described here

[TrySound]

I think this problem is automatically eliminated with synchronous unsubscribe from store via willUnmount hook, what we currently do now.

[chrisjpatty]

Something in the timing must be a little bit off then. I'm getting the setState error when I use it like so: https://www.useloom.com/share/71f0474ebfd44a779cf0f3d4c9f44cf1

[chrisjpatty]

It's in the case where I have a Droppapble nested inside of another Droppable. The inner Droppable throws the error because it's only rendered while dragging, and unmounts immediately after.

[chrisjpatty]

<Droppable>
  {
    ({isOver, events, isDragging, type}) => (
      <div className={(isOver ? "section is-over " : "section ") + (selected ? "active" : " ")} {...events}>
        {
          selected && !isFirst ?
          <button className="reorder up" onClick={this.moveUp} ><span className="icon icon-caret-up"></span></button>
          : null
        }
        <h4 onClick={this.selectSection}>
          {title !== "" ? title : " "}
        </h4>
        {
          description ?
          <ReactMarkdown className="description" source={description} />
          :
          null
        }
        {children}
        {
          isDragging && type === 'field' ?
          <div className="drag-mask">
            <Droppable accepts='field' onDrop={this.fieldDropped}>
              {
                ({events}) => (
                  <div className="field-drop" {...events}>
                    Drop field here to add
                  </div>
                )
              }
            </Droppable>
          </div>
          :
          null
        }
        <div className="bottom-divider"></div>
        {
          selected && !isLast ?
          <button className="reorder down" onClick={this.moveDown}><span className="icon icon-caret-down"></span></button>
          : null
        }
      </div>
    )
  }
</Droppable>