import * as React from "react";

import { useFrameRateManager } from "react-frame-rate";

export function Counter() {
  const [counter, setCounter] = React.useState(0);

  const {
    updateCallback,
    updateFrameRate,
    updateAnimation
  } = useFrameRateManager();

  React.useEffect(() => {
    updateCallback(() => setCounter((value) => value + 1));
  }, [updateCallback, setCounter]);

  React.useEffect(() => {
    updateFrameRate(30);
  }, [updateFrameRate]);

  React.useEffect(() => {
    updateAnimation(true);
    return () => {
      updateAnimation(false);
    };
  }, [updateAnimation]);

  return <div>{counter}</div>;
}

import * as React from "react";

import withReactFrameRate, { BaseUpdateProps } from "react-frame-rate";

type Props = Readonly<{
  counter: number;
}> &
  BaseUpdateProps;

export function Counter() {
  const [isAnimating, setIsAnimation] = React.useState(true);

  const updateState = React.useCallback<(state: Props) => Props>(
    (state: Props) => {
      const newCounter = state.counter + 1;
      if (newCounter >= 100) {
        setIsAnimation(false);
      }
      return { ...state, counter: newCounter };
    },
    [setIsAnimation]
  );

  const options = React.useMemo(
    () => ({
      updateState,
      frameRate: 30
    }),
    [updateState]
  );

  const WithAnimation = React.useMemo(
    () =>
      withReactFrameRate<Props>(options)((props: Props) => (
        <>{props.counter}</>
      )),
    [options]
  );

  return <WithAnimation counter={0} isAnimating={isAnimating} />;
}