refactor: remove unnecessary useMemos

apps/expo/app/fissa/[pin]/[trackId]/index.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useMemo } from "react";
-import { View } from "react-native";
-import { Stack, useGlobalSearchParams, useRouter } from "expo-router";
 import { SAVED_TRACKS_PLAYLIST_ID, useSpotify, useTracks } from "@fissa/utils";
+import { Stack, useGlobalSearchParams, useRouter } from "expo-router";
+import { useCallback } from "react";
+import { View } from "react-native";
 
 import { PageTemplate, PlaylistList, TrackListItem } from "../../../../src/components";
 import { toast } from "../../../../src/utils";
@@ -12,9 +12,7 @@ const AddToPlaylist = () => {
   const spotify = useSpotify();
   const tracks = useTracks([String(trackId)]);
 
-  const track = useMemo(() => {
-    return tracks?.find(({ id }) => id === trackId);
-  }, [trackId, tracks]);
+  const track = tracks?.find(({ id }) => id === trackId);
 
   const handlePlaylistPress = useCallback(
     async (playlist: SpotifyApi.PlaylistObjectSimplified) => {

apps/expo/app/join.tsx

@@ -1,14 +1,14 @@
+import { theme } from "@fissa/tailwind-config";
+import { notificationAsync, NotificationFeedbackType } from "expo-haptics";
+import { Stack, useRouter } from "expo-router";
 import { useCallback, useMemo, useRef, useState } from "react";
 import {
-  TextInput,
-  View,
-  type NativeSyntheticEvent,
-  type TextInputChangeEventData,
-  type TextInputTextInputEventData,
+    TextInput,
+    View,
+    type NativeSyntheticEvent,
+    type TextInputChangeEventData,
+    type TextInputTextInputEventData,
 } from "react-native";
-import { notificationAsync, NotificationFeedbackType } from "expo-haptics";
-import { Stack, useRouter } from "expo-router";
-import { theme } from "@fissa/tailwind-config";
 
 import { Button, PageTemplate, Typography } from "../src/components";
 import { api } from "../src/utils/api";

apps/expo/src/components/pages/fissa/Tracks.tsx

@@ -9,7 +9,7 @@ import {
 import { type FlashList } from "@shopify/flash-list";
 import { NotificationFeedbackType, notificationAsync } from "expo-haptics";
 import { useGlobalSearchParams, useRouter } from "expo-router";
-import { useCallback, useEffect, useMemo, useRef, useState, type FC } from "react";
+import { useCallback, useEffect, useRef, useState, type FC } from "react";
 import {
     Animated,
     TouchableHighlight,
@@ -317,21 +317,9 @@ const TrackActions: FC<TrackActionsProps> = ({ track, onPress }) => {
     },
   });
 
-  const isActiveTrack = useMemo(() => fissa?.currentlyPlayingId === track.id, [fissa, track.id]);
-
-  const hasBeenPlayed = useMemo(
-    () => fissa?.tracks.find(({ trackId }) => trackId === track?.id)?.hasBeenPlayed,
-    [track?.id, fissa?.tracks],
-  );
-
-  const canRemoveTrack = useMemo(() => {
-    const isAddedByUser =
-      fissa?.tracks.find(({ trackId }) => trackId === track?.id)?.by?.email === user?.id;
-
-    if (isAddedByUser) return true;
-
-    return isOwner;
-  }, [track?.id, fissa?.tracks, user, isOwner]);
+  const isActiveTrack = fissa?.currentlyPlayingId === track.id;
+  const hasBeenPlayed =  fissa?.tracks.find(({ trackId }) => trackId === track?.id)?.hasBeenPlayed;
+  const canRemoveTrack = fissa?.tracks.find(({ trackId }) => trackId === track?.id)?.by?.email === user?.id ?? isOwner
 
   const handleVote = useCallback(
     (vote: number) => async () => {

apps/expo/src/components/shared/Rejoin.tsx

@@ -1,14 +1,14 @@
-import { useMemo, type FC } from "react";
-import { View } from "react-native";
 import { useTracks } from "@fissa/utils";
+import { type FC } from "react";
+import { View } from "react-native";
 
 import { api } from "../../utils";
 import { Button } from "./button";
 
 export const Rejoin = () => {
   const { data } = api.auth.getUserFissa.useQuery();
 
-  const lastFissa = useMemo(() => data?.isIn[0]?.pin, [data?.isIn]);
+  const lastFissa = data?.isIn[0]?.pin;
 
   if (lastFissa?.length !== 4) return <View className="my-1 h-16" />; // We return view for the layout
 

packages/utils/stores/spotifyStore.ts

@@ -86,15 +86,13 @@ export const useDevices = (autoFetch: boolean) => {
     void spotify.getMyDevices().then(({ devices }) => setDevices(devices));
   }, [spotify, setDevices]);
 
-  const activeDevice = useMemo(() => {
-    return devices.find(({ is_active }) => is_active);
-  }, [devices]);
+  const activeDevice = devices.find(({ is_active }) => is_active);
 
   useEffect(() => {
     if(!autoFetch) return;
 
     fetchDevices();
-  }, [fetchDevices,autoFetch]);
+  }, [fetchDevices, autoFetch]);
 
   return { devices, activeDevice, fetchDevices };
 };