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

body{
  margin: 0;
  padding: 0;
  height: 100vh;
}

.app {
  padding: 1px;
  width: 100%;
}

.box {
  margin: 1rem;
  padding: 0.5rem;
  width: 100px;
  height: 100px;
  font-size: 0.9rem;
}

p {
  margin: 0.2em;
  font-size: 0.85rem;
}

button {
  margin-bottom: 0.5rem;
}

console.clear();

import React from "https://esm.sh/react@19.0.0";
import ReactDOM from "https://esm.sh/react-dom@19.0.0/client";

import gsap from "https://esm.sh/gsap";
import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@19.0.0";
const { useEffect, useRef, useState } = React;

gsap.registerPlugin(useGSAP);

function App() {
  const app = useRef();
  
  const box1 = useRef();
  const box2 = useRef();
  const box3 = useRef();
  
  const [count, setCount] = useState(0);
  const [delayedCount, setDelayedCount] = useState(0);

  // only runs on first render
  useGSAP(() => {
    gsap.to(box1.current, { rotation: "+=360" });
  });

  // runs on first render and every time delayedCount changes
  useGSAP(() => {
    gsap.to(box2.current, { rotation: "+=360" });
  }, [delayedCount]);
  
  // passing in null to use no dependancy array in the internal useEffect
  // runs on every render
  useGSAP(() => {
    gsap.to(box3.current, { rotation: "+=360" });
  }, null);

  useEffect(() => {
    const timer = setTimeout(() => setDelayedCount(count), 500);

    return () => clearTimeout(timer);
  }, [count]);

  return (
    <div className="app" ref={app}>
      <div>
        <button onClick={() => setCount(count + 1)}>Click to trigger a render</button>
      </div>
      <p>Count: {count}</p>
      <p>Delayed Count: {delayedCount}</p>
      <p>Renders: {1 + delayedCount + count}</p>
      <div className="flex-row">
        <div ref={box1} className="box gradient-purple">First render</div>
        <div ref={box2} className="box gradient-blue">First render & delayed count change</div>
        <div ref={box3} className="box gradient-red">Every render</div>
      </div>
    </div>
  );
}

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