diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerGalleriesPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerGalleriesPanel.tsx
index e7f4f020c..94c00051c 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerGalleriesPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerGalleriesPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { GalleryList } from "src/components/Galleries/GalleryList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerDetailsProps {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerDetailsProps {
 export const PerformerGalleriesPanel: React.FC<IPerformerDetailsProps> = ({
   performer,
 }) => {
-  return <GalleryList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <GalleryList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerImagesPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerImagesPanel.tsx
index 6e22700ad..e78035bbb 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerImagesPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerImagesPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { ImageList } from "src/components/Images/ImageList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerImagesPanel {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerImagesPanel {
 export const PerformerImagesPanel: React.FC<IPerformerImagesPanel> = ({
   performer,
 }) => {
-  return <ImageList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <ImageList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerMoviesPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerMoviesPanel.tsx
index f3facc01b..6e2609511 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerMoviesPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerMoviesPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { MovieList } from "src/components/Movies/MovieList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerDetailsProps {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerDetailsProps {
 export const PerformerMoviesPanel: React.FC<IPerformerDetailsProps> = ({
   performer,
 }) => {
-  return <MovieList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <MovieList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScenesPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScenesPanel.tsx
index 6cc07b390..991908e8b 100644
--- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScenesPanel.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerScenesPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneList } from "src/components/Scenes/SceneList";
-import { performerFilterHook } from "src/core/performers";
+import { usePerformerFilterHook } from "src/core/performers";
 
 interface IPerformerDetailsProps {
   performer: GQL.PerformerDataFragment;
@@ -10,5 +10,6 @@ interface IPerformerDetailsProps {
 export const PerformerScenesPanel: React.FC<IPerformerDetailsProps> = ({
   performer,
 }) => {
-  return <SceneList filterHook={performerFilterHook(performer)} />;
+  const filterHook = usePerformerFilterHook(performer);
+  return <SceneList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioGalleriesPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioGalleriesPanel.tsx
index f71a28600..809ac6d6b 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioGalleriesPanel.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioGalleriesPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { GalleryList } from "src/components/Galleries/GalleryList";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 
 interface IStudioGalleriesPanel {
   studio: GQL.StudioDataFragment;
@@ -10,5 +10,6 @@ interface IStudioGalleriesPanel {
 export const StudioGalleriesPanel: React.FC<IStudioGalleriesPanel> = ({
   studio,
 }) => {
-  return <GalleryList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <GalleryList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioImagesPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioImagesPanel.tsx
index c1b2fb11f..13549015c 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioImagesPanel.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioImagesPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 import { ImageList } from "src/components/Images/ImageList";
 
 interface IStudioImagesPanel {
@@ -8,5 +8,6 @@ interface IStudioImagesPanel {
 }
 
 export const StudioImagesPanel: React.FC<IStudioImagesPanel> = ({ studio }) => {
-  return <ImageList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <ImageList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioMoviesPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioMoviesPanel.tsx
index b8510138c..1d238cc0a 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioMoviesPanel.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioMoviesPanel.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { MovieList } from "src/components/Movies/MovieList";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 
 interface IStudioMoviesPanel {
   studio: GQL.StudioDataFragment;
 }
 
 export const StudioMoviesPanel: React.FC<IStudioMoviesPanel> = ({ studio }) => {
-  return <MovieList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <MovieList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioPerformersPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioPerformersPanel.tsx
index 32ebf1dae..8394033c6 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioPerformersPanel.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioPerformersPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 import { PerformerList } from "src/components/Performers/PerformerList";
 import { StudiosCriterion } from "src/models/list-filter/criteria/studios";
 
@@ -24,10 +24,9 @@ export const StudioPerformersPanel: React.FC<IStudioPerformersPanel> = ({
     movies: [studioCriterion],
   };
 
+  const filterHook = useStudioFilterHook(studio);
+
   return (
-    <PerformerList
-      filterHook={studioFilterHook(studio)}
-      extraCriteria={extraCriteria}
-    />
+    <PerformerList filterHook={filterHook} extraCriteria={extraCriteria} />
   );
 };
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioScenesPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioScenesPanel.tsx
index 0bd2ddfec..741d871d5 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/StudioScenesPanel.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioScenesPanel.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneList } from "src/components/Scenes/SceneList";
-import { studioFilterHook } from "src/core/studios";
+import { useStudioFilterHook } from "src/core/studios";
 
 interface IStudioScenesPanel {
   studio: GQL.StudioDataFragment;
 }
 
 export const StudioScenesPanel: React.FC<IStudioScenesPanel> = ({ studio }) => {
-  return <SceneList filterHook={studioFilterHook(studio)} />;
+  const filterHook = useStudioFilterHook(studio);
+  return <SceneList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagGalleriesPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagGalleriesPanel.tsx
index 97ae35107..dd6ff61c3 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagGalleriesPanel.tsx
+++ b/ui/v2.5/src/components/Tags/TagDetails/TagGalleriesPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 import { GalleryList } from "src/components/Galleries/GalleryList";
 
 interface ITagGalleriesPanel {
@@ -8,5 +8,6 @@ interface ITagGalleriesPanel {
 }
 
 export const TagGalleriesPanel: React.FC<ITagGalleriesPanel> = ({ tag }) => {
-  return <GalleryList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <GalleryList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagImagesPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagImagesPanel.tsx
index 5df08f505..c037cdb4b 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagImagesPanel.tsx
+++ b/ui/v2.5/src/components/Tags/TagDetails/TagImagesPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 import { ImageList } from "src/components/Images/ImageList";
 
 interface ITagImagesPanel {
@@ -8,5 +8,6 @@ interface ITagImagesPanel {
 }
 
 export const TagImagesPanel: React.FC<ITagImagesPanel> = ({ tag }) => {
-  return <ImageList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <ImageList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagPerformersPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagPerformersPanel.tsx
index 4cbb4e6d6..43a447ed3 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagPerformersPanel.tsx
+++ b/ui/v2.5/src/components/Tags/TagDetails/TagPerformersPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 import { PerformerList } from "src/components/Performers/PerformerList";
 
 interface ITagPerformersPanel {
@@ -8,5 +8,6 @@ interface ITagPerformersPanel {
 }
 
 export const TagPerformersPanel: React.FC<ITagPerformersPanel> = ({ tag }) => {
-  return <PerformerList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <PerformerList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagScenesPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagScenesPanel.tsx
index 1cfd0dc68..972c19d16 100644
--- a/ui/v2.5/src/components/Tags/TagDetails/TagScenesPanel.tsx
+++ b/ui/v2.5/src/components/Tags/TagDetails/TagScenesPanel.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneList } from "src/components/Scenes/SceneList";
-import { tagFilterHook } from "src/core/tags";
+import { useTagFilterHook } from "src/core/tags";
 
 interface ITagScenesPanel {
   tag: GQL.TagDataFragment;
 }
 
 export const TagScenesPanel: React.FC<ITagScenesPanel> = ({ tag }) => {
-  return <SceneList filterHook={tagFilterHook(tag)} />;
+  const filterHook = useTagFilterHook(tag);
+  return <SceneList filterHook={filterHook} />;
 };
diff --git a/ui/v2.5/src/core/performers.ts b/ui/v2.5/src/core/performers.ts
index 6dadec8d1..44787b121 100644
--- a/ui/v2.5/src/core/performers.ts
+++ b/ui/v2.5/src/core/performers.ts
@@ -2,7 +2,9 @@ import { PerformersCriterion } from "src/models/list-filter/criteria/performers"
 import * as GQL from "src/core/generated-graphql";
 import { ListFilterModel } from "src/models/list-filter/filter";
 
-export const performerFilterHook = (performer: GQL.PerformerDataFragment) => {
+export const usePerformerFilterHook = (
+  performer: GQL.PerformerDataFragment
+) => {
   return (filter: ListFilterModel) => {
     const performerValue = {
       id: performer.id,
diff --git a/ui/v2.5/src/core/studios.ts b/ui/v2.5/src/core/studios.ts
index c34145025..cee81bcc4 100644
--- a/ui/v2.5/src/core/studios.ts
+++ b/ui/v2.5/src/core/studios.ts
@@ -5,10 +5,10 @@ import React from "react";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "./config";
 
-export const studioFilterHook = (studio: GQL.StudioDataFragment) => {
+export const useStudioFilterHook = (studio: GQL.StudioDataFragment) => {
+  const config = React.useContext(ConfigurationContext);
   return (filter: ListFilterModel) => {
     const studioValue = { id: studio.id, label: studio.name };
-    const config = React.useContext(ConfigurationContext);
     // if studio is already present, then we modify it, otherwise add
     let studioCriterion = filter.criteria.find((c) => {
       return c.criterionOption.type === "studios";
diff --git a/ui/v2.5/src/core/tags.ts b/ui/v2.5/src/core/tags.ts
index 9a93e5716..e24f23fcb 100644
--- a/ui/v2.5/src/core/tags.ts
+++ b/ui/v2.5/src/core/tags.ts
@@ -10,9 +10,9 @@ import React from "react";
 import { ConfigurationContext } from "src/hooks/Config";
 import { IUIConfig } from "./config";
 
-export const tagFilterHook = (tag: GQL.TagDataFragment) => {
+export const useTagFilterHook = (tag: GQL.TagDataFragment) => {
+  const config = React.useContext(ConfigurationContext);
   return (filter: ListFilterModel) => {
-    const config = React.useContext(ConfigurationContext);
     const tagValue = { id: tag.id, label: tag.name };
     // if tag is already present, then we modify it, otherwise add
     let tagCriterion = filter.criteria.find((c) => {