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

$3

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(options)((props: Props) => (
<>{props.counter}
)),
[options]
);