React Spring "Can't perform a React state update on an unmounted component"

Question

I have been running into using react spring when clicking quickly:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Here is a sample sandbox I found that has the same issue. If you rapidly click "click here" you will see the same issue I am facing.

https://codesandbox.io/s/greeting-card-with-react-spring-f2vr0?from-embed

Sandbox is from this blog:

https://blog.logrocket.com/animations-with-react-spring/

Assuming it's something silly I am missing, but wondering if this an issue with react-spring since it's relating to useEffect.

Answer 1

You are using a ternary and therefore the component is unmounted.

If greetingStatus is true, then render nothing. Also always render your animated div (because you are toggling opacity with 1 or 0)

Working copy of your code is here in sandbox

Code snippet

import React from "react";
import ReactDOM from "react-dom";
import { useSpring, animated as a } from "react-spring";

import "./styles.css";

const App = () => {
  const [greetingStatus, displayGreeting] = React.useState(false);
  const contentProps = useSpring({
    opacity: greetingStatus ? 1 : 0,
    marginTop: greetingStatus ? 0 : -500,
    position: "absolute"
  });
  return (
    <div className="container">
      <div className="button-container">
        <button onClick={() => displayGreeting(a => !a)} className="button">
          Click Here
        </button>
      </div>
      {!greetingStatus ? <div className="Intro">Click button below</div> : null}
      <a.div className="box" style={contentProps}>
        <h1>Hey there ! React Spring is awesome.</h1>
      </a.div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);