在 React 功能组件中使用 useRef 时出现无法读取 null 错误的属性“样式”

Question

I am trying to re-create this circle-follow-cursor effect found here but within a React functional component.

const Button = props => {
  const ballRef = React.useRef(null)

  let mouseX = 0
  let mouseY = 0
  let ballX = 0
  let ballY = 0
  let speed = 0.2

  function animate() {
    let distX = mouseX - ballX
    let distY = mouseY - ballY
    ballX = ballX + distX * speed
    ballY = ballY + distY * speed
    ballRef.current.style.left = ballX + "px"
    ballRef.current.style.top = ballY + "px"

    requestAnimationFrame(animate)
  }

  animate()

  document.addEventListener("mousemove", function(event) {
    mouseX = event.pageX
    mouseY = event.pageY
  })

  return (
      <div ref={ballRef} >Button</div>
  )
}

export default Button

The thing is, the code works the very first time I implemented it, then when I refresh the page it throws this error:

TypeError: Cannot read property 'style' of null
animate
src/components/button/index.js:19
  16 | let distY = mouseY - ballY
  17 | ballX = ballX + distX * speed
  18 | ballY = ballY + distY * speed
> 19 | ballRef.current.style.left = ballX + "px"
  20 | ballRef.current.style.top = ballY + "px"
  21 | 
  22 | requestAnimationFrame(animate)

I'm sure it's related to how React re-renders the UI based on changes but I thought the useRef hook helps with that. Anyway, I thought I'd get some fresh eyes on this.

Answer 1

You need to set animate() in useEffect

useEffect(() => {
    animate();
}, []);

Answer 2

You're voilating several rules while using React Component and hooks, here's a much standard version of your code:

// Put the variables outside to make sure they won't reset while component refresh
let mouseX = 0
let mouseY = 0
let ballX = 0
let ballY = 0
let speed = 0.2

const Button = props => {
    const ballRef = React.useRef(null);

    // use useCallback to make sure this function won't create multiple copies when refreshed
    const animate = React.useCallback(() => {
        // Make sure the ballRef is created, at the first run, the ball ref is still null
        if(ballRef && ballRef.current) {
            let distX = mouseX - ballX
            let distY = mouseY - ballY
            ballX = ballX + distX * speed
            ballY = ballY + distY * speed
            ballRef.current.style.left = ballX + "px"
            ballRef.current.style.top = ballY + "px"
        }

        requestAnimationFrame(animate)
    }, [ballRef, mouseX, mouseY, ballX, ballY]);

    // This make sure the function inside only runs when the component is mounted
    React.useEffect(()=>{
        const onMouseMove = event => {
            mouseX = event.pageX;
            mouseY = event.pageY;
        };

        document.addEventListener("mousemove", onMouseMove);

        animate();

        // When the component is unmount, remove the listener
        return () => document.removeEventListener("mousemove", onMouseMove);
    }, []);

    return (
        <div ref={ballRef} >Button</div>
    )
}

export default Button