React-spring: Bug introduced in 6.1.10, calling setState on unmounted component

Created on 4 Dec 2018 · 7Comments · Source: pmndrs/react-spring

screen shot 2018-12-03 at 9 56 14 pm

Reproducible here: https://codesandbox.io/s/x3n7p0xwnw

I believe this bug may have been introduced at this line: https://github.com/drcmda/react-spring/commit/b9b004f3ecc870c7d306f4c0ccdc03e51c2ac05d#diff-b7a823815ca6180e3ed602d052a0aa61R174

For context, I was pretty much following the demo for "single-component mount/unmount reveals" on this page: http://react-spring.surge.sh/transition

bug

Source

austenpayan

All 7 comments

Ah, makes sense, need to check if the component is mounted. The warning is harmless otherwise. Won't show up next patch version.

drcmda on 4 Dec 2018

👍1

@drcmda thanks. P.S. recently came back to this library after not using it since ~v4, the new stuff and new docs with v6 is incredible and much easier than before! Great work.

austenpayan on 4 Dec 2018

Thanks! Great to hear that ...

drcmda on 5 Dec 2018

I'm still seeing this error on the following code:

const Modal: React.FC<{
  feature: Feature
  surveyId: string
  voterId: string
  isOpen: boolean
  onVote: (survey: { features: Feature[] }) => void
  toggle: () => void
}> = ({ feature, voterId, surveyId, onVote, isOpen, toggle }) => {
  const backdropTransitions = useTransition(isOpen, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  })

  const modalTransitions = useTransition(isOpen, null, {
    from: { transform: 'translateY(-5rem)' },
    enter: { transform: 'translateY(0)' },
    leave: { transform: 'translateY(-5rem)' }
  })

  const handleModalClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation()
  }

  return (
    <>
      {backdropTransitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div key={key} style={props} className="backdrop">
              {modalTransitions.map(
                ({ item, key, props }) =>
                  item && (
                    <animated.div
                      key={key}
                      style={props}
                      className="modal"
                      onClick={handleModalClick}
                    >
                      <button className="modal-close" onClick={toggle}>
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          data-prefix="fas"
                          data-icon="times"
                          role="img"
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 352 512"
                        >
                          <path
                            fill="currentColor"
                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                          ></path>
                        </svg>
                      </button>
                      <div className="modal__header">{feature.name}</div>
                      <div className="modal__body">
                        <ReactMarkdown source={feature.description} />
                      </div>
                      <div className="modal__footer">
                        <VoteButton
                          feature={feature}
                          voterId={voterId}
                          surveyId={surveyId}
                          onVote={onVote}
                        ></VoteButton>
                      </div>
                    </animated.div>
                  )
              )}
            </animated.div>
          )
      )}
    </>
  )
}