refactor(project): combine and optimize Zustand selectors

src/components/Account/Account.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
+import shallow from 'zustand/shallow';
 
 import type { FormSectionContentArgs, FormSectionProps } from '../Form/FormSection';
 import Visibility from '../../icons/Visibility';
@@ -37,7 +38,14 @@ const Account = ({ panelClassName, panelHeaderClassName }: Props): JSX.Element =
   const history = useHistory();
   const [viewPassword, toggleViewPassword] = useToggle();
 
-  const { user: customer, customerConsents, publisherConsents } = useAccountStore();
+  const { customer, customerConsents, publisherConsents } = useAccountStore(
+    ({ user, customerConsents, publisherConsents }) => ({
+      customer: user,
+      customerConsents,
+      publisherConsents,
+    }),
+    shallow,
+  );
 
   const consentValues = useMemo(() => formatConsentValues(publisherConsents, customerConsents), [publisherConsents, customerConsents]);
   const initialValues = useMemo(

src/containers/AccountModal/AccountModal.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
+import shallow from 'zustand/shallow';
 
 import Dialog from '../../components/Dialog/Dialog';
 import useQueryParam from '../../hooks/useQueryParam';
@@ -28,7 +29,7 @@ const AccountModal = () => {
   const viewParam = useQueryParam('u');
   const [view, setView] = useState(viewParam);
   const message = useQueryParam('message');
-  const { loading, auth } = useAccountStore();
+  const { loading, auth } = useAccountStore(({ loading, auth }) => ({ loading, auth }), shallow);
   const config = useConfigStore((s) => s.config);
   const {
     assets: { banner },

src/containers/AccountModal/forms/RenewSubscription.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
+import shallow from 'zustand/shallow';
 
 import { removeQueryParam } from '../../../utils/history';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -13,7 +14,7 @@ import { updateSubscription } from '#src/stores/AccountController';
 const RenewSubscription = () => {
   const { t } = useTranslation('account');
   const history = useHistory();
-  const { subscription, user } = useAccountStore();
+  const { subscription, user } = useAccountStore(({ subscription, user }) => ({ subscription, user }), shallow);
   const [renewed, setRenewed] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);

src/screens/Home/Home.tsx

@@ -4,6 +4,7 @@ import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
 import List from 'react-virtualized/dist/commonjs/List';
 import { useHistory } from 'react-router-dom';
 import classNames from 'classnames';
+import shallow from 'zustand/shallow';
 
 import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { favoritesStore } from '../../stores/FavoritesStore';
@@ -53,8 +54,7 @@ const Home = (): JSX.Element => {
   const updateBlurImage = useBlurImageUpdater(playlist);
 
   // User
-  const user = useAccountStore((state) => state.user);
-  const subscription = !!useAccountStore((state) => state.subscription);
+  const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
   const onCardClick = useCallback(
     (playlistItem: PlaylistItem, playlistId?: string) => {

src/screens/Movie/Movie.tsx

@@ -3,6 +3,7 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 
 import { useFavorites } from '../../stores/FavoritesStore';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
@@ -69,8 +70,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   const [playTrailer, setPlayTrailer] = useState<boolean>(false);
 
   // User
-  const user = useAccountStore((state) => state.user);
-  const subscription = useAccountStore((state) => state.subscription);
+  const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
   const allowedToWatch = isAllowedToWatch(accessModel, !!user, itemRequiresSubscription, !!subscription);
 
   // Handlers

src/screens/Playlist/Playlist.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import shallow from 'zustand/shallow';
 
 import { cardUrl } from '../../utils/formatting';
 import usePlaylist from '../../hooks/usePlaylist';
@@ -38,8 +39,7 @@ function Playlist({
   const updateBlurImage = useBlurImageUpdater(filteredPlaylist);
 
   // User
-  const user = useAccountStore((state) => state.user);
-  const subscription = !!useAccountStore((state) => state.subscription);
+  const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
   useEffect(() => {
     // reset filter when the playlist id changes

src/screens/Search/Search.tsx

@@ -3,6 +3,7 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { UIStore } from '../../stores/UIStore';
@@ -41,8 +42,7 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
   const updateBlurImage = useBlurImageUpdater(playlist);
 
   // User
-  const user = useAccountStore((state) => state.user);
-  const subscription = !!useAccountStore((state) => state.subscription);
+  const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
   // Update the search bar query to match the route param on mount
   useEffect(() => {

src/screens/Series/Series.tsx

@@ -3,6 +3,7 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import shallow from 'zustand/shallow';
 
 import CardGrid from '../../components/CardGrid/CardGrid';
 import { useFavorites } from '../../stores/FavoritesStore';
@@ -76,8 +77,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   const [playTrailer, setPlayTrailer] = useState<boolean>(false);
 
   // User
-  const user = useAccountStore((state) => state.user);
-  const subscription = useAccountStore((state) => state.subscription);
+  const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
   const allowedToWatch = isAllowedToWatch(accessModel, !!user, itemRequiresSubscription, !!subscription);
 
   // Handlers