R: Add eslint-plugin-react-hooks and fix issues

README.md

@@ -59,6 +59,7 @@ This readme file is used mostly to document project dependencies and conventions
   - postcss
   - autoprefixer
   - eslint-plugin-simple-import-sort
+  - eslint-plugin-react-hooks
   - eslint-plugin-tsdoc
   - vite
   - jest

rsconcept/frontend/eslint.config.js

@@ -2,8 +2,7 @@ import globals from 'globals';
 import typescriptPlugin from 'typescript-eslint';
 import typescriptParser from '@typescript-eslint/parser';
 import reactPlugin from 'eslint-plugin-react';
-// import { fixupPluginRules } from '@eslint/compat';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
-// import reactHooksPlugin from 'eslint-plugin-react-hooks';
 
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 
@@ -35,7 +34,7 @@ export default [
   {
     plugins: {
       'react': reactPlugin,
-      // 'react-hooks': fixupPluginRules(reactHooksPlugin),
+      'react-hooks': reactHooksPlugin,
       'simple-import-sort': simpleImportSort
     },
     settings: { react: { version: 'detect' } },
@@ -56,7 +55,9 @@ export default [
       'react-refresh/only-export-components': ['off', { allowConstantExport: true }],
 
       'simple-import-sort/imports': 'warn',
-      'simple-import-sort/exports': 'error'
+      'simple-import-sort/exports': 'error',
+
+      ...reactHooksPlugin.configs.recommended.rules
     }
   },
   {

rsconcept/frontend/package.json

@@ -18,14 +18,15 @@
     "@uiw/react-codemirror": "^4.23.5",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.5.6",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "framer-motion": "^11.11.9",
     "html-to-image": "^1.11.11",
     "js-file-download": "^0.4.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.1.1",
+    "react-error-boundary": "^4.1.2",
     "react-icons": "^5.3.0",
-    "react-intl": "^6.8.0",
+    "react-intl": "^6.8.1",
     "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.27.0",
     "react-select": "^5.8.1",
@@ -39,16 +40,16 @@
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
-    "@types/node": "^22.7.6",
+    "@types/node": "^22.7.9",
-    "@types/react": "^18.3.11",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.11.0",
     "jest": "^29.7.0",
@@ -56,8 +57,8 @@
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.9.0",
+    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.9"
+    "vite": "^5.4.10"
   },
   "jest": {
     "preset": "ts-jest",

rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx

@@ -61,7 +61,7 @@ function PickMultiConstituenta({
         newGraph.foldNode(item.id);
       });
     return newGraph;
-  }, [schema.graph, data]);
+  }, [data, schema.graph, schema.items]);
 
   useLayoutEffect(() => {
     if (filtered.length === 0) {

rsconcept/frontend/src/components/select/PickSchema.tsx

@@ -63,7 +63,7 @@ function PickSchema({
       );
     }
     setFiltered(newFiltered);
-  }, [filterText, filterLocation]);
+  }, [filterText, filterLocation, baseFiltered]);
 
   const columns = useMemo(
     () => [

rsconcept/frontend/src/components/ui/DataTable/DataTable.tsx

@@ -146,7 +146,7 @@ function DataTable<TData extends RowData>({
       colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
     }
     return colSizes;
-  }, [tableImpl.getState().columnSizingInfo, tableImpl.getState().columnSizing]);
+  }, [tableImpl]);
 
   return (
     <div tabIndex={-1} id={id} className={className} style={{ minHeight: fixedSize, maxHeight: fixedSize, ...style }}>

rsconcept/frontend/src/components/wrap/AnimateFade.tsx

@@ -18,7 +18,7 @@ function AnimateFade({ style, noFadeIn, noFadeOut, children, hideContent, ...res
       animate={hideContent ? 'hidden' : 'active'}
       variants={animateFade.variants}
       exit={{ ...(!noFadeOut ? animateFade.exit : {}) }}
-      style={{ display: hideContent ? 'none' : '', ...style }}
+      style={{ display: hideContent ? 'none' : '', willChange: 'auto', ...style }}
       {...restProps}
     >
       {children}

rsconcept/frontend/src/context/LibraryContext.tsx

@@ -238,7 +238,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
         });
       }
     },
-    [reloadItems, user]
+    [reloadItems]
   );
 
   const destroyItem = useCallback(
@@ -254,7 +254,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
           })
       });
     },
-    [reloadItems, user]
+    [reloadItems]
   );
 
   const cloneItem = useCallback(
@@ -291,7 +291,7 @@ export const LibraryState = ({ children }: React.PropsWithChildren) => {
           })
       });
     },
-    [reloadItems, user]
+    [reloadItems]
   );
 
   return (

rsconcept/frontend/src/context/OssContext.tsx

@@ -94,7 +94,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
 
   useEffect(() => {
     oss.setID(itemID);
-  }, [itemID, oss.setID]);
+  }, [itemID, oss]);
 
   const update = useCallback(
     (data: ILibraryUpdateData, callback?: DataCallback<ILibraryItem>) => {
@@ -115,7 +115,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.localUpdateItem, oss.setData]
+    [itemID, model, library, oss]
   );
 
   const setOwner = useCallback(
@@ -139,7 +139,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems]
+    [itemID, model, library]
   );
 
   const setAccessPolicy = useCallback(
@@ -163,7 +163,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems]
+    [itemID, model, library]
   );
 
   const setLocation = useCallback(
@@ -187,7 +187,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems]
+    [itemID, model, library]
   );
 
   const setEditors = useCallback(
@@ -211,7 +211,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems]
+    [itemID, model, library]
   );
 
   const savePositions = useCallback(
@@ -228,7 +228,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, library.localUpdateTimestamp]
+    [itemID, library]
   );
 
   const createOperation = useCallback(
@@ -246,7 +246,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, library.localUpdateTimestamp, oss.setData]
+    [itemID, library, oss]
   );
 
   const deleteOperation = useCallback(
@@ -265,7 +265,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, library.reloadItems, oss.setData]
+    [itemID, library, oss]
   );
 
   const createInput = useCallback(
@@ -284,7 +284,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, library.reloadItems, oss.setData]
+    [itemID, library, oss]
   );
 
   const setInput = useCallback(
@@ -306,7 +306,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems, oss.setData]
+    [itemID, model, library, oss]
   );
 
   const updateOperation = useCallback(
@@ -328,7 +328,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems, oss.setData]
+    [itemID, model, library, oss]
   );
 
   const executeOperation = useCallback(
@@ -350,7 +350,7 @@ export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateP
         }
       });
     },
-    [itemID, model, library.reloadItems, oss.setData]
+    [itemID, model, library, oss]
   );
 
   return (

rsconcept/frontend/src/context/RSFormContext.tsx

@@ -151,7 +151,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, schema, library.localUpdateItem, oss.invalidateItem]
+    [itemID, setSchema, schema, library, oss]
   );
 
   const upload = useCallback(
@@ -172,7 +172,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, schema, library.localUpdateItem]
+    [itemID, setSchema, schema, library]
   );
 
   const setOwner = useCallback(
@@ -195,7 +195,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, schema, library.localUpdateItem]
+    [itemID, schema, library]
   );
 
   const setAccessPolicy = useCallback(
@@ -218,7 +218,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, schema, library.localUpdateItem]
+    [itemID, schema, library]
   );
 
   const setLocation = useCallback(
@@ -240,7 +240,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, schema, library.reloadItems]
+    [itemID, schema, library]
   );
 
   const setEditors = useCallback(
@@ -283,7 +283,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, schema, user, setSchema, library.localUpdateTimestamp, oss.invalidateItem]
+    [itemID, schema, user, setSchema, library, oss]
   );
 
   const restoreOrder = useCallback(
@@ -303,7 +303,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, schema, user, setSchema, library.localUpdateTimestamp]
+    [itemID, schema, user, setSchema, library]
   );
 
   const produceStructure = useCallback(
@@ -322,7 +322,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [setSchema, itemID, library.localUpdateTimestamp, oss.invalidateItem]
+    [setSchema, itemID, library, oss]
   );
 
   const download = useCallback(
@@ -354,7 +354,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, library.localUpdateTimestamp, oss.invalidateItem]
+    [itemID, setSchema, library, oss]
   );
 
   const cstDelete = useCallback(
@@ -373,7 +373,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, library.localUpdateTimestamp, oss.invalidateItem]
+    [itemID, setSchema, library, oss]
   );
 
   const cstUpdate = useCallback(
@@ -392,7 +392,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
           })
       });
     },
-    [itemID, reload, library.localUpdateTimestamp, oss.invalidateItem]
+    [itemID, reload, library, oss]
   );
 
   const cstRename = useCallback(
@@ -411,7 +411,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [setSchema, itemID, library.localUpdateTimestamp, oss.invalidateItem]
+    [setSchema, itemID, library, oss]
   );
 
   const cstSubstitute = useCallback(
@@ -430,7 +430,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [setSchema, itemID, library.localUpdateTimestamp, oss.invalidateItem]
+    [setSchema, itemID, library, oss]
   );
 
   const cstMoveTo = useCallback(
@@ -448,7 +448,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, library.localUpdateTimestamp]
+    [itemID, setSchema, library]
   );
 
   const versionCreate = useCallback(
@@ -466,7 +466,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, library.localUpdateTimestamp]
+    [itemID, setSchema, library]
   );
 
   const findPredecessor = useCallback((data: ITargetCst, callback: (reference: IConstituentaReference) => void) => {
@@ -537,7 +537,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [setSchema, library.localUpdateItem]
+    [setSchema, library]
   );
 
   const inlineSynthesis = useCallback(
@@ -556,7 +556,7 @@ export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChil
         }
       });
     },
-    [itemID, setSchema, library.localUpdateTimestamp, oss.invalidateItem]
+    [setSchema, library, oss]
   );
 
   return (

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -44,7 +44,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
 
   const handleTypeChange = useCallback(
     (target: CstType) => partialUpdate({ cst_type: target, alias: generateAlias(target, schema) }),
-    [partialUpdate, schema, generateAlias]
+    [partialUpdate, schema]
   );
 
   return (

rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx

@@ -62,6 +62,7 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
   const cache = useRSFormCache();
   const schemas = useMemo(
     () => schemasIDs.map(id => cache.getSchema(id)).filter(item => item !== undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [schemasIDs, cache.getSchema]
   );
 
@@ -90,6 +91,7 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
 
   useLayoutEffect(() => {
     cache.preload(schemasIDs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schemasIDs]);
 
   useLayoutEffect(() => {
@@ -109,6 +111,7 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
         return true;
       })
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schemasIDs, schemas, cache.loading]);
 
   useLayoutEffect(() => {

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx

@@ -61,7 +61,7 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
         <TabSchema selected={donorID} setSelected={setDonorID} receiver={receiver} />
       </TabPanel>
     ),
-    [donorID]
+    [donorID, receiver]
   );
   const itemsPanel = useMemo(
     () => (

rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx

@@ -30,7 +30,7 @@ function DlgRelocateConstituents({ oss, hideWindow, target, onSubmit }: DlgReloc
       ...node.outputs.map(id => oss.operationByID.get(id)!.result).filter(id => id !== null)
     ];
     return ids.map(id => library.items.find(item => item.id === id)).filter(item => item !== undefined);
-  }, [oss, library.items]);
+  }, [oss, library.items, target.id]);
 
   const [destination, setDestination] = useState<ILibraryItem | undefined>(undefined);
   const [selected, setSelected] = useState<ConstituentaID[]>([]);
@@ -42,7 +42,7 @@ function DlgRelocateConstituents({ oss, hideWindow, target, onSubmit }: DlgReloc
     }
     const destinationOperation = oss.items.find(item => item.result === destination.id);
     return getRelocateCandidates(target.id, destinationOperation!.id, source.schema, oss);
-  }, [destination, source.schema?.items]);
+  }, [destination, target.id, source.schema, oss]);
 
   const isValid = useMemo(() => !!destination && selected.length > 0, [destination, selected]);
 

rsconcept/frontend/src/hooks/useOssDetails.ts

@@ -15,14 +15,17 @@ function useOssDetails({ target, items }: { target?: string; items: ILibraryItem
   const [loading, setLoading] = useState(target != undefined);
   const [error, setError] = useState<ErrorData>(undefined);
 
-  function setSchema(data?: IOperationSchemaData) {
+  const setSchema = useCallback(
+    (data?: IOperationSchemaData) => {
       if (!data) {
         setInner(undefined);
         return;
       }
       const newSchema = new OssLoader(data, items).produceOSS();
       setInner(newSchema);
-  }
+    },
+    [items]
+  );
 
   const reload = useCallback(
     (setCustomLoading?: typeof setLoading, callback?: () => void) => {
@@ -43,7 +46,7 @@ function useOssDetails({ target, items }: { target?: string; items: ILibraryItem
         }
       });
     },
-    [target]
+    [target, setSchema]
   );
 
   useEffect(() => {

rsconcept/frontend/src/hooks/useRSFormCache.ts

@@ -76,6 +76,7 @@ function useRSFormCache() {
         }
       })
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pending]);
 
   return { preload, getSchema, getConstituenta, getSchemaByCst, loading, error, setError };

rsconcept/frontend/src/hooks/useWindowSize.ts

@@ -1,19 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { PARAMETER } from '@/utils/constants';
 
 function useWindowSize() {
   const isClient = typeof window === 'object';
 
-  function getSize() {
+  const getSize = useCallback(
-    return {
+    () => ({
       width: isClient ? window.innerWidth : undefined,
       height: isClient ? window.innerHeight : undefined,
       isSmall: isClient && window.innerWidth < PARAMETER.smallScreen
-    };
+    }),
-  }
+    [isClient]
+  );
 
   const [windowSize, setWindowSize] = useState(getSize);
 
@@ -26,7 +27,7 @@ function useWindowSize() {
     }
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
-  }, []);
+  }, [isClient, getSize]);
 
   return windowSize;
 }

rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx

@@ -90,7 +90,7 @@ function LibraryPage() {
   const toggleVisible = useCallback(() => setIsVisible(prev => toggleTristateFlag(prev)), [setIsVisible]);
   const toggleOwned = useCallback(() => setIsOwned(prev => toggleTristateFlag(prev)), [setIsOwned]);
   const toggleEditor = useCallback(() => setIsEditor(prev => toggleTristateFlag(prev)), [setIsEditor]);
-  const toggleFolderMode = useCallback(() => options.setFolderMode(prev => !prev), [options.setFolderMode]);
+  const toggleFolderMode = useCallback(() => options.setFolderMode(prev => !prev), [options]);
   const toggleSubfolders = useCallback(() => setSubfolders(prev => !prev), [setSubfolders]);
 
   const resetFilter = useCallback(() => {
@@ -102,7 +102,7 @@ function LibraryPage() {
     setIsEditor(undefined);
     setFilterUser(undefined);
     options.setLocation('');
-  }, [setHead, setIsVisible, setIsOwned, setIsEditor, setFilterUser, options.setLocation]);
+  }, [setHead, setIsVisible, setIsOwned, setIsEditor, setFilterUser, options]);
 
   const promptRenameLocation = useCallback(() => {
     setShowRenameLocation(true);
@@ -119,7 +119,7 @@ function LibraryPage() {
         toast.success(information.locationRenamed);
       });
     },
-    [location, library]
+    [options, library]
   );
 
   const handleDownloadCSV = useCallback(() => {
@@ -159,7 +159,15 @@ function LibraryPage() {
         onRenameLocation={promptRenameLocation}
       />
     ),
-    [options.location, library.folders, options.setLocation, toggleFolderMode, subfolders]
+    [
+      options.location,
+      library.folders,
+      options.setLocation,
+      toggleFolderMode,
+      promptRenameLocation,
+      toggleSubfolders,
+      subfolders
+    ]
   );
 
   return (

rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx

@@ -19,6 +19,13 @@ function ManualsPage() {
 
   const { mainHeight } = useConceptOptions();
 
+  const onSelectTopic = useCallback(
+    (newTopic: HelpTopic) => {
+      router.push(urls.help_topic(newTopic));
+    },
+    [router]
+  );
+
   if (!Object.values(HelpTopic).includes(activeTopic)) {
     setTimeout(() => {
       router.push(urls.page404);
@@ -27,13 +34,6 @@ function ManualsPage() {
     return null;
   }
 
-  const onSelectTopic = useCallback(
-    (newTopic: HelpTopic) => {
-      router.push(urls.help_topic(newTopic));
-    },
-    [router]
-  );
-
   return (
     <div className='flex mx-auto max-w-[80rem]' role='manuals' style={{ minHeight: mainHeight }}>
       <TopicsList activeTopic={activeTopic} onChangeTopic={topic => onSelectTopic(topic)} />

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx

@@ -145,13 +145,6 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
     [controller, getPositions, flow]
   );
 
-  const handleDeleteSelected = useCallback(() => {
-    if (controller.selected.length !== 1) {
-      return;
-    }
-    handleDeleteOperation(controller.selected[0]);
-  }, [controller, getPositions]);
-
   const handleDeleteOperation = useCallback(
     (target: OperationID) => {
       if (!controller.canDelete(target)) {
@@ -162,6 +155,13 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
     [controller, getPositions]
   );
 
+  const handleDeleteSelected = useCallback(() => {
+    if (controller.selected.length !== 1) {
+      return;
+    }
+    handleDeleteOperation(controller.selected[0]);
+  }, [controller, handleDeleteOperation]);
+
   const handleCreateInput = useCallback(
     (target: OperationID) => {
       controller.createInput(target, getPositions());
@@ -282,7 +282,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
         handleEditOperation(Number(node.id));
       }
     },
-    [handleEditOperation, controller.openOperationSchema]
+    [handleEditOperation, controller]
   );
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {

rsconcept/frontend/src/pages/OssPage/OssEditContext.tsx

@@ -288,14 +288,11 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
     [model]
   );
 
-  const promptDeleteOperation = useCallback(
+  const promptDeleteOperation = useCallback((target: OperationID, positions: IOperationPosition[]) => {
-    (target: OperationID, positions: IOperationPosition[]) => {
     setPositions(positions);
     setTargetOperationID(target);
     setShowDeleteOperation(true);
-    },
+  }, []);
-    [model]
-  );
 
   const deleteOperation = useCallback(
     (keepConstituents: boolean, deleteSchema: boolean) => {
@@ -363,22 +360,16 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
     [model]
   );
 
-  const promptRelocateConstituents = useCallback(
+  const promptRelocateConstituents = useCallback((target: OperationID) => {
-    (target: OperationID) => {
     setTargetOperationID(target);
     setShowRelocateConstituents(true);
-    },
+  }, []);
-    [model]
-  );
 
-  const handleRelocateConstituents = useCallback(
+  const handleRelocateConstituents = useCallback((data: ICstRelocateData) => {
-    (data: ICstRelocateData) => {
     // TODO: implement backed call
     console.log(data);
     toast.success('В разработке');
-    },
+  }, []);
-    [model]
-  );
 
   return (
     <OssEditContext.Provider

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx

@@ -169,7 +169,11 @@ function FormConstituenta({
         ) : null}
         {state ? (
           <AnimatePresence>
-            <AnimateFade key='cst_expression_fade' hideContent={!state.definition_formal && isElementary}>
+            <AnimateFade
+              key='cst_expression_fade'
+              hideContent={!state.definition_formal && isElementary}
+              style={{ willChange: 'auto' }}
+            >
               <EditorRSExpression
                 id='cst_expression'
                 label={

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx

@@ -95,8 +95,7 @@ function EditorRSExpression({
     });
   }
 
-  const onShowError = useCallback(
+  const onShowError = useCallback((error: IRSErrorDescription, prefixLen: number) => {
-    (error: IRSErrorDescription, prefixLen: number) => {
     if (!rsInput.current) {
       return;
     }
@@ -109,9 +108,7 @@ function EditorRSExpression({
       }
     });
     rsInput.current?.view?.focus();
-    },
+  }, []);
-    [activeCst]
-  );
 
   const handleEdit = useCallback((id: TokenID, key?: string) => {
     if (!rsInput.current?.editor || !rsInput.current.state || !rsInput.current.view) {

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx

@@ -38,7 +38,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
   const { accessLevel } = useAccessMode();
   const intl = useIntl();
   const router = useConceptNavigation();
-  const options = useConceptOptions();
+  const { setLocation, setFolderMode } = useConceptOptions();
 
   const ownerSelector = useDropdown();
   const onSelectUser = useCallback(
@@ -60,11 +60,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
       if (!item) {
         return;
       }
-      options.setLocation(item.location);
+      setLocation(item.location);
-      options.setFolderMode(true);
+      setFolderMode(true);
       router.push(urls.library, event.ctrlKey || event.metaKey);
     },
-    [options.setLocation, options.setFolderMode, item, router]
+    [setLocation, setFolderMode, item, router]
   );
 
   if (!item) {

rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx

@@ -341,7 +341,7 @@ export const RSEditState = ({
         toast.success(information.newVersion(data.version));
       });
     },
-    [model, viewVersion]
+    [model]
   );
 
   const handleDeleteVersion = useCallback(