mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-04-23 03:00:31 -04:00
bac0ce1e69
I learned that the inline selector syntax recreates the selector function on every render: ```ts const val = useAppSelector((s) => s.slice.val) ``` Not good! Better is to create a selector outside the function and use it. Doing that for all selectors now, most of the way through now. Feels snappier.
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { FormControl, FormLabel, Switch } from '@invoke-ai/ui-library';
|
|
import { createSelector } from '@reduxjs/toolkit';
|
|
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
|
import {
|
|
selectCanvasSettingsSlice,
|
|
settingsDynamicGridToggled,
|
|
} from 'features/controlLayers/store/canvasSettingsSlice';
|
|
import { memo, useCallback } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const selectDynamicGrid = createSelector(selectCanvasSettingsSlice, (canvasSettings) => canvasSettings.dynamicGrid);
|
|
|
|
export const CanvasSettingsDynamicGridSwitch = memo(() => {
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const dynamicGrid = useAppSelector(selectDynamicGrid);
|
|
const onChange = useCallback(() => {
|
|
dispatch(settingsDynamicGridToggled());
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<FormControl>
|
|
<FormLabel m={0} flexGrow={1}>
|
|
{t('controlLayers.dynamicGrid')}
|
|
</FormLabel>
|
|
<Switch size="sm" isChecked={dynamicGrid} onChange={onChange} />
|
|
</FormControl>
|
|
);
|
|
});
|
|
|
|
CanvasSettingsDynamicGridSwitch.displayName = 'CanvasSettingsDynamicGridSwitch';
|