React + gsap = why render when cursor moves?

I made a custom cursor using gsap in react. I can’t understand why the rendering occurs when the cursor moves, although I don't change state?

👉SandBox

Thanks.

Upvotes: 0

Views: 288

Answers (2)

Solution 1

enter image description here

Solution 2

Don't use state but just variables ))

Upvotes: 1

Son Dang
Son Dang

Reputation: 199

React Components by default don't skip render by shallow compare props and state, so every state update will trigger re-render.

You either need to implement shouldComponentUpdate, or extends PureComponent, or convert to Functional Component (which by default don't re-render if state doesn't change even if you call set state)

Upvotes: 1

Related Questions