<div id="root" class="panel center text-center"></div>
body{
  margin: 0;
  padding: 0;
  height: 100vh;
}

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

.box {
  margin: 10px;
  padding: 0.5rem;
  width: 120px;
  height: 120px;
}
const { useEffect, useRef, useState } = React;

function App() {
  const el = useRef();
  const q = gsap.utils.selector(el);
  
  const [count, setCount] = useState(0);
  const [delayedCount, setDelayedCount] = useState(0);

  // only runs on first render
  useEffect(() => {
    gsap.to(q(".box-1"), { rotation: "+=360" });
  }, []);

  // runs on first render and every time delayedCount changes
  useEffect(() => {
    gsap.to(q(".box-2"), { rotation: "+=360" });
  }, [delayedCount]);

  // runs on every render
  useEffect(() => {
    gsap.to(q(".box-3"), { rotation: "+=360" });
  });

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

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

  return (
    <div className="app" ref={el}>
      <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 className="box box-1 purple">First render</div>
        <div className="box box-2 blue">First render & delayed count change</div>
        <div className="box box-3 red">Every render</div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));
View Compiled

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js