feat: remove unneeded memoized selectors

src/components/AllApps.tsx

@@ -5,13 +5,13 @@ import { useSelector } from 'react-redux'
 import { BACKGROUND_COLOR } from '../constants'
 import { AppDetails } from '../models/app-details'
 import { RenderedIn } from '../models/rendered-in'
-import { selectAppsListMemoized } from '../slices/appsList'
+import { selectAppsList } from '../slices/appsList'
 import { getListItemLayout, getListKey } from '../utils/apps'
 import AllAppsLetterIndex from './AllAppsLetterIndex'
 import AppItem from './AppItem'
 
 const AllApps = () => {
- const apps = useSelector(selectAppsListMemoized)
+ const apps = useSelector(selectAppsList)
  const listRef: MutableRefObject<FlatList<AppDetails> | null> = useRef(null)
 
  const scrollToIndex = useCallback(

src/components/AppItemMenu.tsx

@@ -11,22 +11,12 @@ import {
 } from '../constants'
 import SearchContext from '../contexts/SearchContext'
 import { resetAppsSearchState, selectDisplayAppMenu, selectMenuAppDetails, setDisplayAppMenu } from '../slices/appState'
+import { addFavoriteApp, removeFavoriteApp, selectFavoriteApps, selectFavoriteAppsCount } from '../slices/favoriteApps'
+import { addPinnedApp, removePinnedApp, selectPinnedApps, selectTemporaryPinnedApps } from '../slices/pinnedApps'
 import {
- addFavoriteApp,
- removeFavoriteApp,
- selectFavoriteAppsCountMemoized,
- selectFavoriteAppsMemoized,
-} from '../slices/favoriteApps'
-import {
- addPinnedApp,
- removePinnedApp,
- selectPinnedAppsMemoized,
- selectTemporaryPinnedAppsMemoized,
-} from '../slices/pinnedApps'
-import {
- selectDisplayFavoriteAppsMemoized,
- selectDisplayPinnedAppsMemoized,
- selectDisplayTemporaryPinnedAppsMemoized,
+ selectDisplayFavoriteApps,
+ selectDisplayPinnedApps,
+ selectDisplayTemporaryPinnedApps,
 } from '../slices/preferences'
 import { getAppIndex } from '../utils/apps'
 import { requestAppUninstall, showAppDetails } from '../utils/apps-module'
@@ -38,13 +28,13 @@ const AppItemMenu = () => {
  const [isFavoriteApp, setIsFavoriteApp] = useState(false)
  const [isPinnedApp, setIsPinnedApp] = useState(false)
  const [isTemporarilyPinnedApp, setIsTemporarilyPinnedApp] = useState(false)
- const favoriteApps = useSelector(selectFavoriteAppsMemoized)
- const pinnedApps = useSelector(selectPinnedAppsMemoized)
- const temporaryPinnedApps = useSelector(selectTemporaryPinnedAppsMemoized)
- const favoriteAppsCount = useSelector(selectFavoriteAppsCountMemoized)
- const displayFavoriteAppsValue = useSelector(selectDisplayFavoriteAppsMemoized)
- const displayPinnedAppsValue = useSelector(selectDisplayPinnedAppsMemoized)
- const displayTemporaryPinnedApps = useSelector(selectDisplayTemporaryPinnedAppsMemoized)
+ const favoriteApps = useSelector(selectFavoriteApps)
+ const pinnedApps = useSelector(selectPinnedApps)
+ const temporaryPinnedApps = useSelector(selectTemporaryPinnedApps)
+ const favoriteAppsCount = useSelector(selectFavoriteAppsCount)
+ const displayFavoriteAppsValue = useSelector(selectDisplayFavoriteApps)
+ const displayPinnedAppsValue = useSelector(selectDisplayPinnedApps)
+ const displayTemporaryPinnedApps = useSelector(selectDisplayTemporaryPinnedApps)
  const { clearAndBlurSearchInput } = useContext(SearchContext)
 
  const appDetails = useSelector(selectMenuAppDetails)

src/components/FavoriteApps.tsx

@@ -10,11 +10,11 @@ import {
  sectionWrapper,
  whiteTextColorStyle,
 } from '../shared/styles'
-import { selectFavoriteAppsMemoized } from '../slices/favoriteApps'
+import { selectFavoriteApps } from '../slices/favoriteApps'
 import AppItem from './AppItem'
 
 const FavoriteApps = () => {
- const apps = useSelector(selectFavoriteAppsMemoized)
+ const apps = useSelector(selectFavoriteApps)
 
  const noAppsFound = useMemo(() => apps.length === 0, [apps])
 

src/components/PinnedApps.tsx

@@ -4,13 +4,13 @@ import { useSelector } from 'react-redux'
 import { PinnedApp } from '../models/pinned-app'
 import { RenderedIn } from '../models/rendered-in'
 import { sectionHeaderLabelStyle, sectionHeaderWrapperStyle, sectionWrapper } from '../shared/styles'
-import { selectPinnedAppsMemoized } from '../slices/pinnedApps'
+import { selectPinnedApps } from '../slices/pinnedApps'
 import { getListItemLayout, getListKey } from '../utils/apps'
 import AppItem from './AppItem'
 import EmptyListComponent from './shared/EmptyListComponent'
 
 const PinnedApps = () => {
- const apps = useSelector(selectPinnedAppsMemoized)
+ const apps = useSelector(selectPinnedApps)
 
  const renderItem: ListRenderItem<PinnedApp> = ({ item }: ListRenderItemInfo<PinnedApp>) => (
  <AppItem appDetails={item} renderedIn={RenderedIn.PINNED_APPS} />

src/components/RecentApps.tsx

@@ -4,13 +4,13 @@ import { useSelector } from 'react-redux'
 import { RecentApp } from '../models/recent-app'
 import { RenderedIn } from '../models/rendered-in'
 import { sectionHeaderLabelStyle, sectionHeaderWrapperStyle, sectionWrapper } from '../shared/styles'
-import { selectRecentAppsMemoized } from '../slices/recentApps'
+import { selectRecentApps } from '../slices/recentApps'
 import { getListItemLayout, getListKey } from '../utils/apps'
 import AppItem from './AppItem'
 import EmptyListComponent from './shared/EmptyListComponent'
 
 const RecentApps = () => {
- const apps = useSelector(selectRecentAppsMemoized)
+ const apps = useSelector(selectRecentApps)
 
  const renderItem: ListRenderItem<RecentApp> = ({ item }: ListRenderItemInfo<RecentApp>) => (
  <AppItem appDetails={item} renderedIn={RenderedIn.RECENT_APPS} />

src/components/Search.tsx

@@ -14,12 +14,12 @@ import {
  setAppsSearchResult,
  setDisplayAllApps,
 } from '../slices/appState'
-import { selectAppsListMemoized, selectAppsLoading } from '../slices/appsList'
+import { selectAppsList, selectAppsLoading } from '../slices/appsList'
 import { getAppsByLabel } from '../utils/apps'
 
 const Search = () => {
  const dispatch = useDispatch()
- const apps = useSelector(selectAppsListMemoized)
+ const apps = useSelector(selectAppsList)
  const appsLoading = useSelector(selectAppsLoading)
  const searchQuery = useSelector(selectAppsSearchQuery)
  const displayAllApps = useSelector(selectDisplayAllApps)

src/components/Settings/sections/FavoriteAppsSettings.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from 'react'
 import { Switch, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 import { sortFavoriteApps } from '../../../slices/appState'
-import { clearFavoriteApps, selectFavoriteAppsCountMemoized } from '../../../slices/favoriteApps'
-import { displayFavoriteApps, selectDisplayFavoriteAppsMemoized } from '../../../slices/preferences'
+import { clearFavoriteApps, selectFavoriteAppsCount } from '../../../slices/favoriteApps'
+import { displayFavoriteApps, selectDisplayFavoriteApps } from '../../../slices/preferences'
 import { displayToast } from '../../../utils/toast'
 import CustomPressable from '../../shared/CustomPressable'
 import SettingsItemLabel from '../shared/SettingsItemLabel'
@@ -18,8 +18,8 @@ import {
 
 const FavoriteAppsSettings = () => {
  const dispatch = useDispatch()
- const favoriteAppsCount = useSelector(selectFavoriteAppsCountMemoized)
- const displayFavoriteAppsValue = useSelector(selectDisplayFavoriteAppsMemoized)
+ const favoriteAppsCount = useSelector(selectFavoriteAppsCount)
+ const displayFavoriteAppsValue = useSelector(selectDisplayFavoriteApps)
 
  const toggleDisplayFavoriteApps = () => {
  dispatch(displayFavoriteApps(!displayFavoriteAppsValue))

src/components/Settings/sections/PinnedAppsSettings.tsx

@@ -5,16 +5,16 @@ import { useDispatch, useSelector } from 'react-redux'
 import { sortPinnedApps, sortTemporaryPinnedApps } from '../../../slices/appState'
 import {
  clearPinnedApps,
- selectPinnedAppsCountMemoized,
- selectTemporaryPinnedAppsConfigMemoized,
- selectTemporaryPinnedAppsCountMemoized,
+ selectPinnedAppsCount,
+ selectTemporaryPinnedAppsConfig,
+ selectTemporaryPinnedAppsCount,
  setTemporaryAppsConfig,
 } from '../../../slices/pinnedApps'
 import {
  displayPinnedApps,
  displayTemporaryPinnedApps,
- selectDisplayPinnedAppsMemoized,
- selectDisplayTemporaryPinnedAppsMemoized,
+ selectDisplayPinnedApps,
+ selectDisplayTemporaryPinnedApps,
 } from '../../../slices/preferences'
 import { getDateFromStringWithCurrentDateValue, getTimeFromDate, stripDateFromSeconds } from '../../../utils/date'
 import { displayToast } from '../../../utils/toast'
@@ -33,11 +33,11 @@ import {
 
 const PinnedAppsSettings = () => {
  const dispatch = useDispatch()
- const displayPinnedAppsValue = useSelector(selectDisplayPinnedAppsMemoized)
- const pinnedAppsCount = useSelector(selectPinnedAppsCountMemoized)
- const displayTemporaryPinnedAppsValue = useSelector(selectDisplayTemporaryPinnedAppsMemoized)
- const temporaryPinnedAppsCount = useSelector(selectTemporaryPinnedAppsCountMemoized)
- const temporaryPinnedAppsConfig = useSelector(selectTemporaryPinnedAppsConfigMemoized)
+ const displayPinnedAppsValue = useSelector(selectDisplayPinnedApps)
+ const pinnedAppsCount = useSelector(selectPinnedAppsCount)
+ const displayTemporaryPinnedAppsValue = useSelector(selectDisplayTemporaryPinnedApps)
+ const temporaryPinnedAppsCount = useSelector(selectTemporaryPinnedAppsCount)
+ const temporaryPinnedAppsConfig = useSelector(selectTemporaryPinnedAppsConfig)
 
  const toggleDisplayPinnedApps = () => {
  dispatch(displayPinnedApps(!displayPinnedAppsValue))

src/components/Settings/sections/RecentAppsSettings.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Switch, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
-import { displayRecentApps, selectDisplayRecentAppsMemoized } from '../../../slices/preferences'
+import { displayRecentApps, selectDisplayRecentApps } from '../../../slices/preferences'
 import { clearRecentApps } from '../../../slices/recentApps'
 import { displayToast } from '../../../utils/toast'
 import CustomPressable from '../../shared/CustomPressable'
@@ -17,7 +17,7 @@ import {
 
 const RecentAppsSettings = () => {
  const dispatch = useDispatch()
- const displayRecentAppsValue = useSelector(selectDisplayRecentAppsMemoized)
+ const displayRecentAppsValue = useSelector(selectDisplayRecentApps)
 
  const toggleDisplayRecentApps = () => {
  dispatch(displayRecentApps(!displayRecentAppsValue))

src/components/SortableFavoriteApps.tsx

@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { BACKGROUND_COLOR, WHITE_COLOR } from '../constants'
 import { FavoriteApp } from '../models/favorite-app'
 import { setDisplaySortableFavoriteApps } from '../slices/appState'
-import { selectFavoriteAppsMemoized, setFavoriteApps } from '../slices/favoriteApps'
+import { selectFavoriteApps, setFavoriteApps } from '../slices/favoriteApps'
 import { getListKey } from '../utils/apps'
 import AppIcon from './shared/AppIcon'
 import CustomIcon from './shared/CustomIcon'
@@ -27,7 +27,7 @@ const doneButtonRippleConfig: PressableAndroidRippleConfig = {
 
 const SortableFavoriteApps = () => {
  const dispatch = useDispatch()
- const apps = useSelector(selectFavoriteAppsMemoized)
+ const apps = useSelector(selectFavoriteApps)
  const [sorted, setSorted] = useState(false)
 
  const rotateValue = useSharedValue(-5)

src/components/SortablePinnedApps.tsx

@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { BACKGROUND_COLOR, WHITE_COLOR } from '../constants'
 import { PinnedApp } from '../models/pinned-app'
 import { setDisplaySortablePinnedApps } from '../slices/appState'
-import { selectPinnedAppsMemoized, setPinnedApps } from '../slices/pinnedApps'
+import { selectPinnedApps, setPinnedApps } from '../slices/pinnedApps'
 import { getListKey } from '../utils/apps'
 import AppIcon from './shared/AppIcon'
 import CustomIcon from './shared/CustomIcon'
@@ -27,7 +27,7 @@ const doneButtonRippleConfig: PressableAndroidRippleConfig = {
 
 const SortablePinnedApps = () => {
  const dispatch = useDispatch()
- const apps = useSelector(selectPinnedAppsMemoized)
+ const apps = useSelector(selectPinnedApps)
  const [sorted, setSorted] = useState(false)
 
  const rotateValue = useSharedValue(-5)

src/components/SortableTemporaryPinnedApps.tsx

@@ -12,7 +12,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { BACKGROUND_COLOR, WHITE_COLOR } from '../constants'
 import { PinnedApp } from '../models/pinned-app'
 import { setDisplaySortableTemporaryPinnedApps } from '../slices/appState'
-import { selectTemporaryPinnedAppsMemoized, setPinnedApps } from '../slices/pinnedApps'
+import { selectTemporaryPinnedApps, setPinnedApps } from '../slices/pinnedApps'
 import { getListKey } from '../utils/apps'
 import AppIcon from './shared/AppIcon'
 import CustomIcon from './shared/CustomIcon'
@@ -27,7 +27,7 @@ const doneButtonRippleConfig: PressableAndroidRippleConfig = {
 
 const SortableTemporaryPinnedApps = () => {
  const dispatch = useDispatch()
- const apps = useSelector(selectTemporaryPinnedAppsMemoized)
+ const apps = useSelector(selectTemporaryPinnedApps)
  const [sorted, setSorted] = useState(false)
 
  const rotateValue = useSharedValue(-5)

src/components/TemporaryPinnedApps.tsx

@@ -4,13 +4,13 @@ import { useSelector } from 'react-redux'
 import { PinnedApp } from '../models/pinned-app'
 import { RenderedIn } from '../models/rendered-in'
 import { sectionHeaderLabelStyle, sectionHeaderWrapperStyle, sectionWrapper } from '../shared/styles'
-import { selectTemporaryPinnedAppsMemoized } from '../slices/pinnedApps'
+import { selectTemporaryPinnedApps } from '../slices/pinnedApps'
 import { getListItemLayout, getListKey } from '../utils/apps'
 import AppItem from './AppItem'
 import EmptyListComponent from './shared/EmptyListComponent'
 
 const TemporaryPinnedApps = () => {
- const apps = useSelector(selectTemporaryPinnedAppsMemoized)
+ const apps = useSelector(selectTemporaryPinnedApps)
 
  const renderItem: ListRenderItem<PinnedApp> = ({ item }: ListRenderItemInfo<PinnedApp>) => (
  <AppItem appDetails={item} renderedIn={RenderedIn.PINNED_APPS} />

src/containers/TopContainer.tsx

@@ -19,18 +19,18 @@ import {
  selectDisplaySortableTemporaryPinnedApps,
 } from '../slices/appState'
 import {
- selectDisplayFavoriteAppsMemoized,
- selectDisplayPinnedAppsMemoized,
- selectDisplayRecentAppsMemoized,
- selectDisplayTemporaryPinnedAppsMemoized,
+ selectDisplayFavoriteApps,
+ selectDisplayPinnedApps,
+ selectDisplayRecentApps,
+ selectDisplayTemporaryPinnedApps,
 } from '../slices/preferences'
 
 const TopContainer = () => {
  const searchQuery = useSelector(selectAppsSearchQuery)
- const displayRecentApps = useSelector(selectDisplayRecentAppsMemoized)
- const displayPinnedApps = useSelector(selectDisplayPinnedAppsMemoized)
- const displayTemporaryPinnedApps = useSelector(selectDisplayTemporaryPinnedAppsMemoized)
- const displayFavoriteApps = useSelector(selectDisplayFavoriteAppsMemoized)
+ const displayRecentApps = useSelector(selectDisplayRecentApps)
+ const displayPinnedApps = useSelector(selectDisplayPinnedApps)
+ const displayTemporaryPinnedApps = useSelector(selectDisplayTemporaryPinnedApps)
+ const displayFavoriteApps = useSelector(selectDisplayFavoriteApps)
  const sortableFavoriteApps = useSelector(selectDisplaySortableFavoriteApps)
  const sortablePinnedApps = useSelector(selectDisplaySortablePinnedApps)
  const sortableTemporaryPinnedApps = useSelector(selectDisplaySortableTemporaryPinnedApps)

src/hooks/useTimeBasedRendering.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { selectTemporaryPinnedAppsConfigMemoized } from '../slices/pinnedApps'
+import { selectTemporaryPinnedAppsConfig } from '../slices/pinnedApps'
 
 type CheckResult = {
  startRenderingTimeOutId: NodeJS.Timeout | undefined
@@ -12,7 +12,7 @@ export const useTimeBasedRendering = () => {
  const [endDate, setEndDate] = useState<Date | undefined>()
  const [canRender, setCanRender] = useState(false)
 
- const temporaryPinnedAppsConfig = useSelector(selectTemporaryPinnedAppsConfigMemoized)
+ const temporaryPinnedAppsConfig = useSelector(selectTemporaryPinnedAppsConfig)
 
  useEffect(() => {
  setStartDate(temporaryPinnedAppsConfig.startDate ? new Date(temporaryPinnedAppsConfig.startDate) : undefined)

src/slices/appStateHandler.ts

@@ -23,8 +23,8 @@ import {
  sortTemporaryPinnedApps,
  toogleAllApps,
 } from './appState'
-import { selectFavoriteAppsMemoized } from './favoriteApps'
-import { selectPinnedAppsMemoized } from './pinnedApps'
+import { selectFavoriteApps } from './favoriteApps'
+import { selectPinnedApps } from './pinnedApps'
 import { addRecentApp } from './recentApps'
 
 // We should only add a launched app if it was clicked (rendered) in one of the following places;
@@ -50,8 +50,8 @@ function* appLaunchHandler(action: PayloadAction<{ renderedIn: RenderedIn; appDe
  }
 
  // Skip adding to recent apps if permanently pinned/favourited but launched from different lists/views
- const pinnedApps: PinnedApp[] = yield select(selectPinnedAppsMemoized)
- const favoriteApps: FavoriteApp[] = yield select(selectFavoriteAppsMemoized)
+ const pinnedApps: PinnedApp[] = yield select(selectPinnedApps)
+ const favoriteApps: FavoriteApp[] = yield select(selectFavoriteApps)
  // TODO: Include the temporarily pinned apps but only when they're rendered/displayed.
 
  const pinnedAppsPackages: string[] = pinnedApps.map(({ packageName }: PinnedApp) => packageName)

src/slices/appsList.ts

@@ -35,10 +35,9 @@ export const { setAppsList, setAppsLoading } = appsListSlice.actions
 export const getAppsListAction = createAction('appsList/getAppsListAction')
 export const appRemovedAction = createAction<string>('appsList/appRemovedAction')
 
-const selectAppsList = (state: RootState) => state.appsList.list
+export const selectAppsList = (state: RootState) => state.appsList.list
 export const selectAppsLoading = (state: RootState) => state.appsList.loading
 
-export const selectAppsListMemoized = createSelector(selectAppsList, (list: AppDetails[]) => list)
 export const selectAppsLetterListMemoized = createSelector(selectAppsList, (list: AppDetails[]) =>
  getAppsLetterIndex(list)
 )

src/slices/favoriteApps.ts

@@ -1,4 +1,4 @@
-import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { FavoriteApp } from '../models/favorite-app'
 import { RootState } from '../store'
 import { getApp, getAppIndex } from '../utils/apps'
@@ -39,9 +39,7 @@ export const favoriteAppsSlice = createSlice({
 
 export const { addFavoriteApp, removeFavoriteApp, setFavoriteApps, clearFavoriteApps } = favoriteAppsSlice.actions
 
-const selectFavoriteApps = (state: RootState) => state.favoriteApps.list
-
-export const selectFavoriteAppsMemoized = createSelector(selectFavoriteApps, (list: FavoriteApp[]) => list)
-export const selectFavoriteAppsCountMemoized = createSelector(selectFavoriteApps, (list: FavoriteApp[]) => list.length)
+export const selectFavoriteApps = (state: RootState) => state.favoriteApps.list
+export const selectFavoriteAppsCount = (state: RootState) => state.favoriteApps.list.length
 
 export default favoriteAppsSlice.reducer