test.jsx

import React from 'react';

const App = () => {
  return (
    <div className="content">
      <Header/>
      {Array.from({ length: 1000 }, (_, i) => (
        <Hoverable key={i} />
      ))}
    </div>
  );
};

function Header() {
  const isCtrlPressed = useIsCtrlPressed();
  return (<h1>Is Ctrl Pressed: {isCtrlPressed ? "Yes" : "No"}</h1>);
}

function Hoverable() {
  const [isHovered, setIsHovered] = React.useState(false);
  const isCtrlPressed = useIsCtrlPressed();
  const isHoveredAndCtrlPressed = isHovered && isCtrlPressed;

  const children = React.useMemo(() => {
    return isHoveredAndCtrlPressed ? <Hovered /> : <NotHovered />;
  }, [isHoveredAndCtrlPressed]);

  return <div 
    style={{ padding: 10, border: "1px solid black" }}
    onMouseEnter={() => setIsHovered(true)}
    onMouseLeave={() => setIsHovered(false)}
  >{children}</div>;
}

class CtrlStore {
  private isCtrlPressed: boolean;
  private listeners: Set<() => void>
  constructor() {
    this.isCtrlPressed = false;
    this.listeners = new Set();
    window.addEventListener("keydown", (e) => {
      if (e.ctrlKey) {
        this.isCtrlPressed = true;
        this.listeners.forEach((listener) => listener());
      }
    })
    window.addEventListener("keyup", (e) => {
      this.isCtrlPressed = false;
      this.listeners.forEach((listener) => listener());
    })
  }
  subscribe = (listener: () => void) => {
    this.listeners.add(listener);
    return () => {
      this.listeners.delete(listener);
    };
  }
  getSnapshot = () => {
    return this.isCtrlPressed;
  }
}

const store = new CtrlStore();

function useIsCtrlPressed() {
  return React.useSyncExternalStore(store.subscribe, store.getSnapshot);
}

function Hovered() {
  return <div style={{ color: "green" }}>Yes</div>;
}

function NotHovered() {
  return <div style={{ color: "red" }}>No</div>;
}

export default App;