Element Style Cleanup Incomplete Causes Invisible Cursor

[Mark Zhang]

Description

If AnimatedCursor is rendered conditionally, the cursor will stay invisible even when AnimatedCursor is removed from the render tree.

To Produce

import { useState } from "react";
import AnimatedCursor from "react-animated-cursor";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      {count <= 1 && <AnimatedCursor />}
    </>
  );
}

export default App;

Potential Fix

These lines for removing event listeners seems suspicious. Although they might not directly relate to this issue, they seem wrong. The correct way is to create a named function for the event handler and pass that to the removeEventListener function. Otherwise, the added listeners are separate object than the listeners that are specified to remove.