So as per documentation in React, the initial state of the below code of canMove is true. I changed it to false.

import React from "react";
import "./style.css";

import { useState, useEffect } from 'react';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [canMove, setCanMove] = useState(false);

  useEffect(() => {
    function handleMove(e) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
    if(canMove)
    window.addEventListener('pointermove', handleMove);
    return () => window.removeEventListener('pointermove', handleMove);
  }, [canMove]);

  return (
    <>
      <label>
        <input type="checkbox"
          checked={canMove}
          onChange={(e) => {
            setCanMove(e.target.checked)
            }
          } 
        />
        The dot is allowed to move
      </label>
      <hr />
      <div style={{
        position: 'absolute',
        backgroundColor: 'pink',
        borderRadius: '50%',
        opacity: 0.6,
        transform: `translate(${position.x}px, ${position.y}px)`,
        pointerEvents: 'none',
        left: -20,
        top: -20,
        width: 40,
        height: 40,
      }} />
    </>
  );
}

So after first render, useEffect runs but adding event listener to pointermove is dependent on canMove which is now false and hence no event listener is added. Now if we click the checkbox, canMove is true this triggers the useEffect again, and the cleanup should run first. But there is no handlemove function added to pointer move previously. So this line should give error logically?