Add eslint-plugin-react-compiler

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * Update to `@shlinkio/shlink-frontend-kit` 0.7.0
 * Update to `@shlinkio/shlink-web-component` 0.13.0
 * Update to `@shlinkio/shlink-js-sdk` 2.0.0
+* Add `eslint-plugin-react-compiler`
 
 ### Deprecated
 * *Nothing*

eslint.config.js

@@ -1,4 +1,8 @@
 import shlink from '@shlinkio/eslint-config-js-coding-standard';
+import reactCompiler from 'eslint-plugin-react-compiler';
 
 /* eslint-disable-next-line no-restricted-exports */
-export default shlink;
+export default [
+  ...shlink,
+  reactCompiler.configs.recommended,
+];

package.json

@@ -74,6 +74,7 @@
     "eslint": "^9.21.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-40c6c23-20250301",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "history": "^5.3.0",

src/container/utils.ts

@@ -1,12 +1,11 @@
 import type { IContainer } from 'bottlejs';
 import type { FC } from 'react';
-import { useRef } from 'react';
+import { useMemo } from 'react';
 
 export type FCWithDeps<Props, Deps> = FC<Props> & Partial<Deps>;
 
 export function useDependencies<Deps>(obj: Deps): Omit<Required<Deps>, keyof FC> {
-  const depsRef = useRef(obj as Omit<Required<Deps>, keyof FC>);
-  return depsRef.current;
+  return useMemo(() => obj as Omit<Required<Deps>, keyof FC>, [obj]);
 }
 
 export function componentFactory<Deps, CompType = Omit<Partial<Deps>, keyof FC>>(

src/servers/CreateServer.tsx

@@ -40,7 +40,9 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
   const navigate = useNavigate();
   const goBack = useGoBack();
   const hasServers = !!Object.keys(servers).length;
+  // eslint-disable-next-line react-compiler/react-compiler
   const [serversImported, setServersImported] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
+  // eslint-disable-next-line react-compiler/react-compiler
   const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
   const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
   const [serverData, setServerData] = useState<ServerData>();

src/servers/ManageServers.tsx

@@ -41,6 +41,7 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
     [allServers, searchTerm],
   );
   const hasAutoConnect = allServers.some(({ autoConnect }) => !!autoConnect);
+  // eslint-disable-next-line react-compiler/react-compiler
   const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
 
   return (