fix: fixed hook deps in more explicit way

src/AnimatedNumber.tsx

@@ -1,8 +1,9 @@
-import { useMemo, useCallback } from "react";
-import { View, TextStyle } from "react-native";
+import { useMemo, useCallback } from 'react';
+import { View } from 'react-native';
+import type { TextStyle } from 'react-native';
 
-import { Reel } from "./Reel";
-import { styles, lineHeightMultiplier } from "./AnimatedNumberStyle";
+import { Reel } from './Reel';
+import { styles, lineHeightMultiplier } from './AnimatedNumberStyle';
 
 type AnimatedNumberProps = {
   value: number;
@@ -15,8 +16,14 @@ type AnimatedNumberProps = {
 function AnimatedNumber(props: AnimatedNumberProps) {
   const { value, format, fontSize, textStyle, duration } = props;
 
-  const formattedValue = useMemo(() => { return format ? format.format(value) : value.toString() }, [value, format]);
-  const symbols = useMemo(() => formattedValue.toString().split(""), [formattedValue]);
+  const formattedValue = useMemo(() => {
+    return format ? format.format(value) : value.toString();
+  }, [value, format]);
+
+  const symbols = useMemo(
+    () => formattedValue.toString().split(''),
+    [formattedValue]
+  );
 
   const renderReels = useCallback(() => {
     return symbols.map((symbol, index) => {
@@ -30,7 +37,7 @@ function AnimatedNumber(props: AnimatedNumberProps) {
         />
       );
     });
-  }, [value, fontSize, duration]);
+  }, [symbols, fontSize, duration, textStyle]);
 
   const contentContainerStyle = useMemo(
     () => ({

src/Reel.tsx

@@ -1,6 +1,11 @@
 import { useMemo, useEffect, useCallback } from 'react';
-import { Text, FontVariant, TextStyle } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+import { Text } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import type { TextStyle, FontVariant } from 'react-native';
 
 import { styles, lineHeightMultiplier } from './AnimatedNumberStyle';
 
@@ -9,17 +14,21 @@ type ReelProps = {
   textStyle?: TextStyle;
   symbol: string;
   duration: number;
-}
+};
 
 const reelNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const frameDuration = 16;
+const fontVariant = ['tabular-nums' as FontVariant];
 
 function Reel(props: ReelProps) {
   const { fontSize, symbol, duration, textStyle } = props;
 
-  const fontVariant = ['tabular-nums' as FontVariant];
   const lineHeight = fontSize * lineHeightMultiplier;
-  const fontStyle = useMemo(() => ({ ...textStyle, fontSize, lineHeight, fontVariant }), [textStyle, fontSize]);
+
+  const fontStyle = useMemo(
+    () => ({ ...textStyle, fontSize, lineHeight, fontVariant }),
+    [textStyle, fontSize, lineHeight]
+  );
 
   const translateY = useSharedValue(0);
 
@@ -28,47 +37,45 @@ function Reel(props: ReelProps) {
   const style = useAnimatedStyle(() => {
     return {
       ...styles.reel,
-      transform: [{ translateY: translateY.value }]
-    }
+      transform: [{ translateY: translateY.value }],
+    };
   });
 
   useEffect(() => {
     if (isNumber) {
       const digit = parseInt(symbol, 10);
-      translateY.value = withTiming(fontSize * - lineHeightMultiplier * digit, { duration });
+      translateY.value = withTiming(fontSize * -lineHeightMultiplier * digit, {
+        duration,
+      });
     } else {
       // Direct setting to 0 from JS thread is async and slower than using withTiming
       translateY.value = withTiming(0, { duration: frameDuration });
     }
-  }, [symbol]);
-
+  }, [symbol, isNumber, duration, translateY, fontSize]);
 
-  const renderContent= useCallback(() => {
+  const renderContent = useCallback(() => {
     const renderReelNumbers = () => {
       return reelNumbers.map((number) => {
         return (
-          <Text key={number} style={fontStyle}>{number}</Text>
-        )
+          <Text key={number} style={fontStyle}>
+            {number}
+          </Text>
+        );
       });
     };
 
     const renderSymbol = () => {
       return (
-        <Text key={symbol} style={fontStyle}>{symbol}</Text>
+        <Text key={symbol} style={fontStyle}>
+          {symbol}
+        </Text>
       );
     };
 
-    return isNumber
-      ? renderReelNumbers()
-      : renderSymbol();
-
-  }, [fontSize, fontVariant, symbol]);
+    return isNumber ? renderReelNumbers() : renderSymbol();
+  }, [fontStyle, isNumber, symbol]);
 
-  return (
-    <Animated.View style={style}>
-      {renderContent()}
-    </Animated.View>
-  )
+  return <Animated.View style={style}>{renderContent()}</Animated.View>;
 }
 
-export { Reel };
+export { Reel };