title: triggering a requestanimation reactjs hook in a button click
body: <p>I have this hook which is to abstract <code>requestAnimationFrame</code>:</p>
  
  <pre><code>export const useAnimationIncrease = ({
    easingName = EasingName.linear,
    diff: end,
    duration = 500
  }: AnimationIncreaseProps) =&gt; {
    const [increase, setIncrease] = useState(0);
    const start = useRef&lt;any&gt;(null);
  
    useLayoutEffect(() =&gt; {
      let raf: number;
  
      const frame = (timestamp: number) =&gt; {
        if (!start.current) {
          start.current = timestamp;
        }
  
        const time = timestamp - start.current;
  
        // get percent of completion in range [0, 1]
        const percentRange = Math.min(time / duration, 1);
  
        const percent = easing[easingName as string](percentRange);
  
        setIncrease(increase + end * percent);
  
        if (time &lt; duration) {
          raf = requestAnimationFrame(frame);
        }
      };
  
      raf = requestAnimationFrame(frame);
  
      return () =&gt; {
        cancelAnimationFrame(raf);
      };
    },              [end]);
  
    return increase;
  };
  </code></pre>
  
  <p>it used like this:</p>
  
  <pre><code>const increase = useAnimationIncrease({ easingName: EasingName.inOutCubic, diff: 10 });
  </code></pre>
  
  <p>It will return the increase each time so I can use it for scrolling etc.</p>
  
  <p>How would I trigger this in a button click though or am I approaching this wrong.</p>
  
  <p>If I try this;</p>
  
  <pre><code>onClick={(e) =&gt; {
    const increase = useAnimationIncrease({ easingName: EasingName.inOutCubic, diff: 10 });
    // use increase
  }
  </code></pre>
  
  <p>Then I get the error message:</p>
  
  <blockquote>
    <p>Hooks can only be called inside the body of a function component.</p>
  </blockquote>