useAnimationFrame custom hook implemented

src/common/index.js

@@ -17,6 +17,7 @@ const ShareModal = require('./ShareModal');
 const Slider = require('./Slider');
 const TextInput = require('./TextInput');
 const routesRegexp = require('./routesRegexp');
+const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
 const useFullscreen = require('./useFullscreen');
 const useLiveRef = require('./useLiveRef');
@@ -45,6 +46,7 @@ module.exports = {
     Slider,
     TextInput,
     routesRegexp,
+    useAnimationFrame,
     useBinaryState,
     useFullscreen,
     useLiveRef,

src/common/useAnimationFrame.js

@@ -0,0 +1,20 @@
+const React = require('react');
+
+const useAnimationFrame = () => {
+    const animationFrameId = React.useRef(null);
+    const request = React.useCallback((cb) => {
+        if (animationFrameId.current === null) {
+            animationFrameId.current = requestAnimationFrame(() => {
+                cb();
+                animationFrameId.current = null;
+            });
+        }
+    }, []);
+    const cancel = React.useCallback(() => {
+        cancelAnimationFrame(animationFrameId.current);
+        animationFrameId.current = null;
+    }, []);
+    return [request, cancel];
+};
+
+module.exports = useAnimationFrame;