[bug]: animated-grid-pattern unusable

[120MF]

Describe the bug

the animated-grid-pattern component can't see any animation effect now. and it will cause the page crash after seconds. see #838

you can catch error in console:

installHook.js:1 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

which comes from the components tsx:

  // Update squares to animate in
  useEffect(() => {
    if (dimensions.width && dimensions.height) {
      setSquares(generateSquares(numSquares))
    }
  }, [dimensions, numSquares, generateSquares])

Affected component/components

Animated Grid Pattern

How to reproduce

Introduce it to your code
see the error in console

Codesandbox/StackBlitz link

No response

Logs

installHook.js:1 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

which comes from the components tsx:

  // Update squares to animate in
  useEffect(() => {
    if (dimensions.width && dimensions.height) {
      setSquares(generateSquares(numSquares))
    }
  }, [dimensions, numSquares, generateSquares])

System Info

Linux Fedora 42
Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[Yeom-JinHo]

@120MF
I fixed this issue in #858.
If you have time, could you take a look and review it with me?

[120MF]

Thanks for the fix! @Yeom-JinHo
I tried to clone it but failed to compile it. I'll check it out later.