How do I mount/unmount a component in React with a keystroke?

Question

I'm making an app that renders 3d objects on keyboard press. I would like these objects to disappear after 2-3 seconds, or when the animation is finished playing.

This is a component that handles the key pressed logic:

const Selector = () => {
  const [selector, setSelector] = useState(null);
  useEffect(() => {
    function setupKeyLogger() {
      document.onkeydown = function (e) {
        console.log(e);
        switch (e.keyCode) {
          case 65:
            setSelector('SpinningCube');
            break;
          case 83:
            setSelector('SmallCube');
            break;
          default:
            break;
        }
      };
    }
    setupKeyLogger();
  });
  switch (selector) {
    case 'SpinningCube':
      return (
        <>
          <SpinningCube />
        </>
      );
    case 'SmallCube':
      return (
        <>
          <SmallCube />
        </>
      );
    default:
      return <></>;
  }
};

Right now, it's switching between the two objects <SpinningCube /> and <SmallCube /> when I press the two different keys. However if I spam a key, it only renders the component on the initial key press. I want it to re-render and restart the animation on the component every time I hit the key, even if it is the same one over and over. I'm assuming I need a way to unmount and then remount the component upon every key stroke?

I am using Three and React Spring to handle my animations.

Your effect should only be applied once with `useEffect(..., [])` — Jonas Wilms, Jul 12 '20 at 20:54
Using mounting to control animations sounds like a bad idea in general. An animation is more like an effect, not something stateful — Jonas Wilms, Jul 12 '20 at 20:56

score 1 · Accepted Answer · answered Jul 12 '20 at 21:01

Components will re-render when props or state have changed. When you spam a button, the same state gets set, but not changed, so nothing happens. So, what you need is another parameter to flip on each press and pass to the children (forcing them to re-render).

const Selector = () => {
  const [selector, setSelector] = useState(null);
  const [forceRender, setForceRender] = useState(0);
  const forceAnimation = (selected) => {
    setSelector(selected);
    setForceRender(++forceRender);
  };

  useEffect(() => {
    function setupKeyLogger() {
      document.onkeydown = function (e) {
        console.log(e);
        switch (e.keyCode) {
          case 65:
            forceAnimation('SpinningCube');
            break;
          case 83:
            forceAnimation('SmallCube');
            break;
          default:
            break;
        }
      };
    }
    setupKeyLogger();
  });

  switch (selector) {
    case 'SpinningCube':
      return (
        <key={forceRender}> // if this doesn't work, I'd try passing it to a React.Fragment or div instead
          <SpinningCube />
        </>
      );
    case 'SmallCube':
      return (
        <key={forceRender}>
          <SmallCube />
        </>
      );
    default:
      return <></>;
  }
};

@charlieyin in the useEffect, you should also return a function to clean up the onkeydown event. — Yoshi, Jul 13 '20 at 18:17

How do I mount/unmount a component in React with a keystroke?

1 Answers1