Use callbacks everywhere

BestPage.tsx

@@ -19,7 +19,6 @@ export default function BestPage() {
       WHERE name LIKE ?
       GROUP BY name;
     `;
-
     const bestReps = `
       SELECT name, MAX(reps) as reps, unit, weight 
       FROM sets
@@ -27,7 +26,6 @@ export default function BestPage() {
         AND weight = ?
       GROUP BY name;
     `;
-
     const [weight] = await db.executeSql(bestWeight, [`%${search}%`]);
     if (!weight) return setBests([]);
     let newBest: Best[] = [];

EditPlan.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, Text, View} from 'react-native';
 import {Button, Dialog, Portal, Switch} from 'react-native-paper';
 import {DatabaseContext} from './App';
@@ -33,7 +33,7 @@ export default function EditPlan({
     refresh();
   }, [plan, db]);
 
-  const save = async () => {
+  const save = useCallback(async () => {
     if (!days || !workouts) return;
     const newWorkouts = workouts.filter(workout => workout).join(',');
     const newDays = days.filter(day => day).join(',');
@@ -49,23 +49,29 @@ export default function EditPlan({
       );
     setPlan(undefined);
     onSave();
-  };
+  }, [days, workouts, db]);
 
-  const toggleWorkout = (on: boolean, name: string) => {
-    if (on) {
-      setWorkouts([...workouts, name]);
-    } else {
-      setWorkouts(workouts.filter(workout => workout !== name));
-    }
-  };
+  const toggleWorkout = useCallback(
+    (on: boolean, name: string) => {
+      if (on) {
+        setWorkouts([...workouts, name]);
+      } else {
+        setWorkouts(workouts.filter(workout => workout !== name));
+      }
+    },
+    [setWorkouts],
+  );
 
-  const toggleDay = (on: boolean, day: string) => {
-    if (on) {
-      setDays([...days, day]);
-    } else {
-      setDays(days.filter(d => d !== day));
-    }
-  };
+  const toggleDay = useCallback(
+    (on: boolean, day: string) => {
+      if (on) {
+        setDays([...days, day]);
+      } else {
+        setDays(days.filter(d => d !== day));
+      }
+    },
+    [setDays],
+  );
 
   return (
     <Portal>

HomePage.tsx

@@ -45,8 +45,11 @@ export default function HomePage() {
     refresh();
   }, [search, refresh]);
 
-  const renderItem = ({item}: {item: Set}) => (
-    <SetItem item={item} key={item.id} setSet={setEdit} onRemove={refresh} />
+  const renderItem = useCallback(
+    ({item}: {item: Set}) => (
+      <SetItem item={item} key={item.id} setSet={setEdit} onRemove={refresh} />
+    ),
+    [setEdit, refresh],
   );
 
   const update = useCallback(async () => {

PlanItem.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useCallback, useContext, useState} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {List, Menu} from 'react-native-paper';
 import {DatabaseContext} from './App';
@@ -17,16 +17,19 @@ export default function PlanItem({
   const [anchor, setAnchor] = useState({x: 0, y: 0});
   const db = useContext(DatabaseContext);
 
-  const remove = async () => {
+  const remove = useCallback(async () => {
     await db.executeSql(`DELETE FROM plans WHERE id = ?`, [item.id]);
     setShow(false);
     onRemove();
-  };
+  }, [db, setShow]);
 
-  const longPress = (e: GestureResponderEvent) => {
-    setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY});
-    setShow(true);
-  };
+  const longPress = useCallback(
+    (e: GestureResponderEvent) => {
+      setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY});
+      setShow(true);
+    },
+    [setAnchor, setShow],
+  );
 
   return (
     <>

PlanPage.tsx

@@ -29,8 +29,16 @@ export default function PlanPage() {
     refresh();
   }, [search, refresh]);
 
-  const renderItem = ({item}: {item: Plan}) => (
-    <PlanItem item={item} key={item.id} setPlan={setPlan} onRemove={refresh} />
+  const renderItem = useCallback(
+    ({item}: {item: Plan}) => (
+      <PlanItem
+        item={item}
+        key={item.id}
+        setPlan={setPlan}
+        onRemove={refresh}
+      />
+    ),
+    [setPlan, refresh],
   );
 
   return (

SetItem.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useCallback, useContext, useState} from 'react';
 import {GestureResponderEvent} from 'react-native';
 import {List, Menu} from 'react-native-paper';
 import {DatabaseContext} from './App';
@@ -17,23 +17,26 @@ export default function SetItem({
   const [anchor, setAnchor] = useState({x: 0, y: 0});
   const db = useContext(DatabaseContext);
 
-  const remove = async () => {
+  const remove = useCallback(async () => {
     await db.executeSql(`DELETE FROM sets WHERE id = ?`, [item.id]);
     setShow(false);
     onRemove();
-  };
+  }, [setShow, db]);
 
-  const copy = () => {
+  const copy = useCallback(() => {
     const set = {...item};
     delete set.id;
     setSet(set);
     setShow(false);
-  };
+  }, [setSet, setShow]);
 
-  const longPress = (e: GestureResponderEvent) => {
-    setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY});
-    setShow(true);
-  };
+  const longPress = useCallback(
+    (e: GestureResponderEvent) => {
+      setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY});
+      setShow(true);
+    },
+    [setShow, setAnchor],
+  );
 
   return (
     <>

SettingsPage.tsx

@@ -72,7 +72,6 @@ export default function SettingsPage() {
       );
       return granted === PermissionsAndroid.RESULTS.GRANTED;
     };
-
     const granted = await permission();
     if (granted) {
       await FileSystem.writeFile(filePath, data);