<div id="root" class="panel center text-center"></div>

.app {
  padding: 10px;
}

.box {
  margin: 10px 0;
}

import React, {
  useLayoutEffect, useRef, useState, useCallback
} from "https://esm.sh/react@18.3.1";
import ReactDOM from "https://esm.sh/react-dom@18.3.1";
import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1";

console.clear();

function useStateRef(defaultValue) {
  const [state, setState] = useState(defaultValue);
  const ref = useRef(state);

  const dispatch = useCallback((value) => {
    ref.current = typeof value === "function" ? value(ref.current) : value;
    setState(ref.current);
  }, []);

  return [state, dispatch, ref];
}

function App() {  
  const app = useRef();
  const [count, setCount, countRef] = useStateRef(5);
  const [gsapCount, setGsapCount] = useState(0);
  
  useGSAP(() => {
    gsap.to(".box", {
      x: 200,
      duration: 1,
      repeat: -1,
      yoyo: true,
      ease: "none",
      onRepeat: () => setGsapCount(countRef.current)
    });
  }, {
    scope: app
  });
     
  return (
    <div className="app" ref={app}>
      <div>
        <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
      <p>Count: {count}</p>
      <p>GSAP Count: {gsapCount}</p>
      <div className="box gradient-blue">Box</div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);