make useChartInteractionState react compiler compliant

Author: borys3kk

src/components/Charts/hooks/useChartInteractionState.ts

@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react';
+import {useState} from 'react';
 import type {SharedValue} from 'react-native-reanimated';
 import {makeMutable, useAnimatedReaction} from 'react-native-reanimated';
 import {scheduleOnRN} from 'react-native-worklets';
@@ -96,34 +96,29 @@ function useChartInteractionState<Init extends ChartInteractionStateInit>(
     state: ChartInteractionState<Init>;
     isActive: boolean;
 } {
-    const keys = Object.keys(initialValues.y).join(',');
+    const yState = {} as Record<keyof Init['y'], {value: SharedValue<number>; position: SharedValue<number>}>;
 
-    const state = useMemo(() => {
-        const yState = {} as Record<keyof Init['y'], {value: SharedValue<number>; position: SharedValue<number>}>;
-
-        for (const [key, initVal] of Object.entries(initialValues.y)) {
-            yState[key as keyof Init['y']] = {
-                value: makeMutable(initVal),
-                position: makeMutable(0),
-            };
-        }
-
-        return {
-            isActive: makeMutable(false),
-            matchedIndex: makeMutable(-1),
-            x: {
-                value: makeMutable(initialValues.x),
-                position: makeMutable(0),
-            },
-            y: yState,
-            yIndex: makeMutable(-1),
-            cursor: {
-                x: makeMutable(0),
-                y: makeMutable(0),
-            },
+    for (const [key, initVal] of Object.entries(initialValues.y)) {
+        yState[key as keyof Init['y']] = {
+            value: makeMutable(initVal),
+            position: makeMutable(0),
         };
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- keys is a stable string representation of y keys
-    }, [keys]);
+    }
+
+    const state: ChartInteractionState<Init> = {
+        isActive: makeMutable(false),
+        matchedIndex: makeMutable(-1),
+        x: {
+            value: makeMutable(initialValues.x),
+            position: makeMutable(0),
+        },
+        y: yState,
+        yIndex: makeMutable(-1),
+        cursor: {
+            x: makeMutable(0),
+            y: makeMutable(0),
+        },
+    };
 
     const isActive = useIsInteractionActive(state);
 

src/components/Charts/hooks/useChartInteractions.ts

@@ -6,6 +6,8 @@ import {scheduleOnRN} from 'react-native-worklets';
 import {TOOLTIP_BAR_GAP} from '@components/Charts/constants';
 import {useChartInteractionState} from './useChartInteractionState';
 
+const INITIAL_INTERACTION_STATE = {x: 0, y: {y: 0}};
+
 /**
  * Arguments passed to the checkIsOver callback for hit-testing
  */
@@ -76,8 +78,7 @@ type CartesianActionsHandle = {
  */
 function useChartInteractions({handlePress, checkIsOver, barGeometry}: UseChartInteractionsProps) {
     /** Interaction state compatible with Victory Native's internal logic */
-    const {state: chartInteractionState, isActive: isTooltipActiveState} = useChartInteractionState({x: 0, y: {y: 0}});
-
+    const {state: chartInteractionState, isActive: isTooltipActiveState} = useChartInteractionState(INITIAL_INTERACTION_STATE);
     /** Ref passed to CartesianChart to allow manual touch injection */
     const actionsRef = useRef<CartesianActionsHandle>(null);