diff --git a/gui/src/components/card/LoadingCard.tsx b/gui/src/components/card/LoadingCard.tsx
index cfd2e06f..b2afeed0 100644
--- a/gui/src/components/card/LoadingCard.tsx
+++ b/gui/src/components/card/LoadingCard.tsx
@@ -34,7 +34,7 @@ export function LoadingCard(props: LoadingCardProps) {
   const { t } = useTranslation();
 
   const cancel = useMutation(() => client.cancel(image.outputs[index].key));
-  const ready = useQuery([`ready-${image.outputs[index].key}`], () => client.ready(image.outputs[index].key), {
+  const ready = useQuery(['ready', image.outputs[index].key], () => client.ready(image.outputs[index].key), {
     // data will always be ready without this, even if the API says its not
     cacheTime: 0,
     refetchInterval: POLL_TIME,
diff --git a/gui/src/components/tab/Img2Img.tsx b/gui/src/components/tab/Img2Img.tsx
index 597622de..c32dbff2 100644
--- a/gui/src/components/tab/Img2Img.tsx
+++ b/gui/src/components/tab/Img2Img.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow} from 'zustand/shallow';
 
 import { HighresParams, Img2ImgParams, ModelParams, UpscaleParams } from '../../client/types.js';
 import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
@@ -47,21 +48,10 @@ export function Img2Img() {
   });
 
   const state = mustExist(useContext(StateContext));
+  const { pushHistory, setHighres, setImg2Img, setModel, setUpscale } = useStore(state, selectActions, shallow);
+  const { loopback, source, sourceFilter, strength } = useStore(state, selectReactParams, shallow);
   const model = useStore(state, selectModel);
-  const source = useStore(state, (s) => s.img2img.source);
-  const sourceFilter = useStore(state, (s) => s.img2img.sourceFilter);
-  const strength = useStore(state, (s) => s.img2img.strength);
-  const loopback = useStore(state, (s) => s.img2img.loopback);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setImg2Img = useStore(state, (s) => s.setImg2Img);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setHighres = useStore(state, (s) => s.setImg2ImgHighres);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setUpscale = useStore(state, (s) => s.setImg2ImgUpscale);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setModel = useStore(state, (s) => s.setImg2ImgModel);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const pushHistory = useStore(state, (s) => s.pushHistory);
+
   const { t } = useTranslation();
 
   return <Box>
@@ -155,6 +145,21 @@ export function Img2Img() {
   </Box>;
 }
 
+export function selectActions(state: OnnxState) {
+  return {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    pushHistory: state.pushHistory,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setImg2Img: state.setImg2Img,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setHighres: state.setImg2ImgHighres,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setModel: state.setImg2ImgModel,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setUpscale: state.setImg2ImgUpscale,
+  };
+}
+
 export function selectModel(state: OnnxState): ModelParams {
   return state.img2imgModel;
 }
@@ -163,6 +168,15 @@ export function selectParams(state: OnnxState): TabState<Img2ImgParams> {
   return state.img2img;
 }
 
+export function selectReactParams(state: OnnxState) {
+  return {
+    loopback: state.img2img.loopback,
+    source: state.img2img.source,
+    sourceFilter: state.img2img.sourceFilter,
+    strength: state.img2img.strength,
+  };
+}
+
 export function selectHighres(state: OnnxState): HighresParams {
   return state.img2imgHighres;
 }
diff --git a/gui/src/components/tab/Inpaint.tsx b/gui/src/components/tab/Inpaint.tsx
index 6bcbd63d..c8582d60 100644
--- a/gui/src/components/tab/Inpaint.tsx
+++ b/gui/src/components/tab/Inpaint.tsx
@@ -5,8 +5,9 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
-import { HighresParams, InpaintParams, ModelParams, UpscaleParams } from '../../client/types.js';
+import { BrushParams, HighresParams, InpaintParams, ModelParams, UpscaleParams } from '../../client/types.js';
 import { IMAGE_FILTER, STALE_TIME } from '../../config.js';
 import { ClientContext, ConfigContext, OnnxState, StateContext, TabState } from '../../state.js';
 import { HighresControl } from '../control/HighresControl.js';
@@ -33,6 +34,7 @@ export function Inpaint() {
 
   async function uploadSource(): Promise<void> {
     const innerState = state.getState();
+    const { outpaint } = innerState;
     const inpaint = selectParams(innerState);
 
     if (outpaint.enabled) {
@@ -64,42 +66,23 @@ export function Inpaint() {
   }
 
   const state = mustExist(useContext(StateContext));
-  const source = useStore(state, (s) => s.inpaint.source);
-  const mask = useStore(state, (s) => s.inpaint.mask);
-  const strength = useStore(state, (s) => s.inpaint.strength);
-  const noise = useStore(state, (s) => s.inpaint.noise);
-  const filter = useStore(state, (s) => s.inpaint.filter);
-  const tileOrder = useStore(state, (s) => s.inpaint.tileOrder);
-  const fillColor = useStore(state, (s) => s.inpaint.fillColor);
+  const { pushHistory, setBrush, setHighres, setModel, setInpaint, setUpscale } = useStore(state, selectActions, shallow);
+  const { source, mask, strength, noise, filter, tileOrder, fillColor } = useStore(state, selectReactParams, shallow);
   const model = useStore(state, selectModel);
-  const outpaint = useStore(state, (s) => s.outpaint);
-  const brush = useStore(state, (s) => s.inpaintBrush);
+  const brush = useStore(state, selectBrush);
 
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setInpaint = useStore(state, (s) => s.setInpaint);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setBrush = useStore(state, (s) => s.setInpaintBrush);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setModel = useStore(state, (s) => s.setInpaintModel);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setHighres = useStore(state, (s) => s.setInpaintHighres);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setUpscale = useStore(state, (s) => s.setInpaintUpscale);
-
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const pushHistory = useStore(state, (s) => s.pushHistory);
   const { t } = useTranslation();
 
   const query = useQueryClient();
   const upload = useMutation(uploadSource, {
-    onSuccess: () => query.invalidateQueries([ 'ready' ]),
+    onSuccess: () => query.invalidateQueries(['ready']),
   });
 
   function renderBanner() {
     if (supportsInpaint()) {
       return undefined;
     } else {
-      return <Alert severity="warning">{t('error.inpaint.support')}</Alert>;
+      return <Alert severity='warning'>{t('error.inpaint.support')}</Alert>;
     }
   }
 
@@ -245,6 +228,27 @@ export function Inpaint() {
   </Box>;
 }
 
+export function selectActions(state: OnnxState) {
+  return {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    pushHistory: state.pushHistory,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setBrush: state.setInpaintBrush,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setHighres: state.setInpaintHighres,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setModel: state.setInpaintModel,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setInpaint: state.setInpaint,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setUpscale: state.setInpaintUpscale,
+  };
+}
+
+export function selectBrush(state: OnnxState): BrushParams {
+  return state.inpaintBrush;
+}
+
 export function selectModel(state: OnnxState): ModelParams {
   return state.inpaintModel;
 }
@@ -253,6 +257,18 @@ export function selectParams(state: OnnxState): TabState<InpaintParams> {
   return state.inpaint;
 }
 
+export function selectReactParams(state: OnnxState) {
+  return {
+    source: state.inpaint.source,
+    mask: state.inpaint.mask,
+    strength: state.inpaint.strength,
+    noise: state.inpaint.noise,
+    filter: state.inpaint.filter,
+    tileOrder: state.inpaint.tileOrder,
+    fillColor: state.inpaint.fillColor,
+  };
+}
+
 export function selectHighres(state: OnnxState): HighresParams {
   return state.inpaintHighres;
 }
diff --git a/gui/src/components/tab/Txt2Img.tsx b/gui/src/components/tab/Txt2Img.tsx
index 82d26f71..a1d110eb 100644
--- a/gui/src/components/tab/Txt2Img.tsx
+++ b/gui/src/components/tab/Txt2Img.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
 import { HighresParams, ModelParams, Txt2ImgParams, UpscaleParams } from '../../client/types.js';
 import { ClientContext, ConfigContext, OnnxState, StateContext, TabState } from '../../state.js';
@@ -32,19 +33,10 @@ export function Txt2Img() {
   });
 
   const state = mustExist(useContext(StateContext));
-  const height = useStore(state, (s) => s.txt2img.height);
-  const width = useStore(state, (s) => s.txt2img.width);
+  const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(state, selectActions, shallow);
+  const { height, width } = useStore(state, selectReactParams, shallow);
   const model = useStore(state, selectModel);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setParams = useStore(state, (s) => s.setTxt2Img);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setHighres = useStore(state, (s) => s.setTxt2ImgHighres);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setUpscale = useStore(state, (s) => s.setTxt2ImgUpscale);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const setModel = useStore(state, (s) => s.setTxt2ImgModel);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const pushHistory = useStore(state, (s) => s.pushHistory);
+
   const { t } = useTranslation();
 
   return <Box>
@@ -95,6 +87,21 @@ export function Txt2Img() {
   </Box>;
 }
 
+export function selectActions(state: OnnxState) {
+  return {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    pushHistory: state.pushHistory,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setHighres: state.setTxt2ImgHighres,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setModel: state.setTxt2ImgModel,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setParams: state.setTxt2Img,
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    setUpscale: state.setTxt2ImgUpscale,
+  };
+}
+
 export function selectModel(state: OnnxState): ModelParams {
   return state.txt2imgModel;
 }
@@ -103,6 +110,13 @@ export function selectParams(state: OnnxState): TabState<Txt2ImgParams> {
   return state.txt2img;
 }
 
+export function selectReactParams(state: OnnxState) {
+  return {
+    height: state.txt2img.height,
+    width: state.txt2img.width,
+  };
+}
+
 export function selectHighres(state: OnnxState): HighresParams {
   return state.txt2imgHighres;
 }