Jump to content
Search Community

gsap.ticker.add causing an infinite rendering in my component

balmeezy test
Moderator Tag

Recommended Posts

I have an issue where gsap.ticker.add is causing an infinite render loop in my react component. any idea how to go about handling this?

 

React code sandbox url: https://codesandbox.io/s/exciting-kepler-3h98n?file=/src/App.js

 

 

import gsap from 'gsap'
import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    gsap.ticker.add(() => console.log('!!! causing infinite render loop'))
  }, [])

  console.log('!!! causing infinite component render loop')
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App

 

 

 

See the Pen App.js by s (@s) on CodePen

Link to comment
Share on other sites

So using gsap.ticker.add runs the target function on every 'tick' (usually synced up with requestAnimationFrame). So even if you're running this in vanilla JS you'll see your console.log printing out about 60*/s. Is this not what you are experiencing? Referencing an external function via useEffect (gsap.ticker.add(funcName)) will likely cause the aforementioned re-render because of deps in useEffect. One way to avoid this would be to define your ticker function inside your useEffect.

  • Like 2
Link to comment
Share on other sites

@elegantseagulls how would u then utilize a function that ticker.add(() => funcName(param1)) for example where funcName does certain things if param1 is updated.

 

 

import gsap from 'gsap'
import { useEffect } from "react";

const App = () => {
const [param1, setParam1] = useState('someValue')
  useEffect(() => {
const funcName = (param1) => {
if (param1 === 'something1') {

   ... do something
    setParam1('somethingelse')
  }
}

    gsap.ticker.add(() => funcName(param))
  }, [])

  console.log('!!! causing infinite component render loop')
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

export default App

 

Edited by Cassie
code block
Link to comment
Share on other sites

Since you're using your param as state, you shouldn't need to pass it directly into the function, as it's an easily accessible variable, and since ticker is going to be constantly running, it'll be able to read that without specifically passing it in via ().

Another thing to note: unnamed arrow functions don't cleanup nice inside of ticker / event listeners. You'll want to separate your functions if you can and access/cleanup like: gsap.ticker.add(funcName) gsap.ticker.remove(funcName), which is important with apps like react, otherwise you can end up with unexpected results where you're doubling/trippling up functions/watchers/etc.

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...