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

updated ^

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

@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

 

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

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