Typescript typescribe警告，explate—deps，useEffect依赖项列表

我最近遇到了这个问题，但从来没有关心过这个问题.在列出useEffect个依赖项时，一个Typescift给出了一个警告，非常甜蜜，它理解了我应该把什么作为依赖项:React Hook useEffect has a missing dependency: 'radius'. Either include it or remove the dependency array.eslintreact-hooks/exhaustive-deps. 但是为什么它会抛出这个错误时，包括这两个dep: The 'drawBall' function makes the dependencies of useEffect Hook (at line 41) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'drawBall' in its own useCallback() Hook.eslintreact-hooks/exhaustive-deps，认为既然它是在deps列表中，将它放在useEffect()本身中是很自然的，但仍然不能完全理解它的逻辑.

export default function Ball({ radius }: BallProps) {
    const ball = new Image()
    ball.src = "/billiard.png"

    const canvasRef = useRef<HTMLCanvasElement>(null);

    const drawBall: DrawBallProps = (ctx, radius) => {

        // Ball
        ctx.drawImage(ball, 0, 0, radius * 2, radius * 2);
               
        //animate the ball
    };
    
    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;
        
        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        
        const render = () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall(ctx, radius);
            requestAnimationFrame(render);
            console.log('rendered');
        };

        render();
    }, [drawBall, radius]);

    return (
        <canvas ref={canvasRef} width={100} height={100} style={{ border: '1px solid black' }} />
    );
}

如果我不包括绘图函数或半径作为依赖项，会有什么变化吗？，是的…我在这方面很糟糕…