mark action selectors as shallow

gui/src/components/ImageHistory.tsx

@@ -4,18 +4,17 @@ import { ReactNode, useContext } from 'react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
-import { StateContext } from '../state.js';
+import { OnnxState, StateContext } from '../state.js';
 import { ErrorCard } from './card/ErrorCard.js';
 import { ImageCard } from './card/ImageCard.js';
 import { LoadingCard } from './card/LoadingCard.js';
 
 export function ImageHistory() {
-  const history = useStore(mustExist(useContext(StateContext)), (state) => state.history);
+  const store = mustExist(useContext(StateContext));
-  const limit = useStore(mustExist(useContext(StateContext)), (state) => state.limit);
+  const { history, limit } = useStore(store, selectParams, shallow);
-  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { removeHistory } = useStore(store, selectActions, shallow);
-  const removeHistory = useStore(mustExist(useContext(StateContext)), (state) => state.removeHistory);
-
   const { t } = useTranslation();
 
   const children: Array<[string, ReactNode]> = [];
@@ -43,3 +42,17 @@ export function ImageHistory() {
 
   return <Grid container spacing={2}>{children.map(([key, child]) => <Grid item key={key} xs={6}>{child}</Grid>)}</Grid>;
 }
+
+export function selectActions(state: OnnxState) {
+  return {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    removeHistory: state.removeHistory,
+  };
+}
+
+export function selectParams(state: OnnxState) {
+  return {
+    history: state.history,
+    limit: state.limit,
+  };
+}

gui/src/components/Profiles.tsx

@@ -19,6 +19,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 { BaseImgParams, HighresParams, ImageMetadata, Txt2ImgParams, UpscaleParams } from '../client/types.js';
 import { OnnxState, StateContext } from '../state.js';
@@ -38,7 +39,7 @@ export interface ProfilesProps {
 
 export function Profiles(props: ProfilesProps) {
   const store = mustExist(useContext(StateContext));
-  const { removeProfile, saveProfile } = useStore(store, selectActions);
+  const { removeProfile, saveProfile } = useStore(store, selectActions, shallow);
   const profiles = useStore(store, selectProfiles);
 
   const [dialogOpen, setDialogOpen] = useState(false);

gui/src/components/card/ErrorCard.tsx

@@ -7,6 +7,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 { ImageResponse, ReadyResponse, RetryParams } from '../../client/types.js';
 import { ClientContext, ConfigContext, OnnxState, StateContext } from '../../state.js';
@@ -24,7 +25,7 @@ export function ErrorCard(props: ErrorCardProps) {
   const { params } = mustExist(useContext(ConfigContext));
 
   const state = mustExist(useContext(StateContext));
-  const { pushHistory, removeHistory } = useStore(state, selectActions);
+  const { pushHistory, removeHistory } = useStore(state, selectActions, shallow);
   const { t } = useTranslation();
 
   async function retryImage() {

gui/src/components/card/ImageCard.tsx

@@ -6,6 +6,7 @@ import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHash } from 'react-use/lib/useHash';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
 import { ImageResponse } from '../../client/types.js';
 import { BLEND_SOURCES, ConfigContext, OnnxState, StateContext } from '../../state.js';
@@ -33,7 +34,7 @@ export function ImageCard(props: ImageCardProps) {
 
   const config = mustExist(useContext(ConfigContext));
   const store = mustExist(useContext(StateContext));
-  const { setBlend, setImg2Img, setInpaint, setUpscale } = useStore(store, selectActions);
+  const { setBlend, setImg2Img, setInpaint, setUpscale } = useStore(store, selectActions, shallow);
 
   async function loadSource() {
     const req = await fetch(outputs[index].url);

gui/src/components/card/LoadingCard.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
 import { ImageResponse } from '../../client/types.js';
 import { POLL_TIME } from '../../config.js';
@@ -27,7 +28,7 @@ export function LoadingCard(props: LoadingCardProps) {
   const { params } = mustExist(useContext(ConfigContext));
 
   const store = mustExist(useContext(StateContext));
-  const { removeHistory, setReady } = useStore(store, selectActions);
+  const { removeHistory, setReady } = useStore(store, selectActions, shallow);
   const { t } = useTranslation();
 
   const cancel = useMutation(() => client.cancel(image.outputs[index].key));

gui/src/components/control/OutpaintControl.tsx

@@ -4,6 +4,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 { ConfigContext, OnnxState, StateContext } from '../../state.js';
 import { NumericField } from '../input/NumericField.js';
@@ -11,7 +12,7 @@ import { NumericField } from '../input/NumericField.js';
 export function OutpaintControl() {
   const { params } = mustExist(useContext(ConfigContext));
   const store = mustExist(useContext(StateContext));
-  const {setOutpaint} = useStore(store, selectActions);
+  const {setOutpaint} = useStore(store, selectActions, shallow);
   const outpaint = useStore(store, selectOutpaint);
   const { t } = useTranslation();
 

gui/src/components/input/PromptInput.tsx

@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
 import { STALE_TIME } from '../../config.js';
 import { ClientContext, OnnxState, StateContext } from '../../state.js';
@@ -40,7 +41,7 @@ export function PromptInput(props: PromptInputProps) {
   const { selector, onChange } = props;
 
   const store = mustExist(useContext(StateContext));
-  const { prompt, negativePrompt } = useStore(store, selector);
+  const { prompt, negativePrompt } = useStore(store, selector, shallow);
 
   const client = mustExist(useContext(ClientContext));
   const models = useQuery(['models'], async () => client.models(), {

gui/src/components/tab/Blend.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 { BlendParams, BrushParams, ModelParams, UpscaleParams } from '../../client/types.js';
 import { IMAGE_FILTER } from '../../config.js';
@@ -33,7 +34,7 @@ export function Blend() {
   });
 
   const store = mustExist(useContext(StateContext));
-  const { pushHistory, setBlend, setBrush, setUpscale } = useStore(store, selectActions);
+  const { pushHistory, setBlend, setBrush, setUpscale } = useStore(store, selectActions, shallow);
   const brush = useStore(store, selectBrush);
   const blend = useStore(store, selectParams);
   const { t } = useTranslation();

gui/src/components/tab/Models.tsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
+import { shallow } from 'zustand/shallow';
 
 import { STALE_TIME } from '../../config.js';
 import { ClientContext, OnnxState, StateContext } from '../../state.js';
@@ -90,7 +91,7 @@ export function Models() {
     removeExtraNetwork,
     removeExtraSource,
     removeUpscalingModel,
-  } = useStore(store, selectActions);
+  } = useStore(store, selectActions, shallow);
 
   const client = mustExist(useContext(ClientContext));
   const result = useQuery(['extras'], async () => client.extras(), {

gui/src/components/tab/Upscale.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, UpscaleParams, UpscaleReqParams } from '../../client/types.js';
 import { IMAGE_FILTER } from '../../config.js';
@@ -34,7 +35,7 @@ export function Upscale() {
   });
 
   const store = mustExist(useContext(StateContext));
-  const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(store, selectActions);
+  const { pushHistory, setHighres, setModel, setParams, setUpscale } = useStore(store, selectActions, shallow);
   const model = useStore(store, selectModel);
   const params = useStore(store, selectParams);
   const { t } = useTranslation();