Merge pull request #271 from dermeck/react-compiler-eslint

add react compiler eslint rules

.eslintrc.json

@@ -12,8 +12,10 @@
         "ecmaVersion": 12,
         "sourceType": "module"
     },
-    "plugins": ["react", "@typescript-eslint"],
-    "rules": {},
+    "plugins": ["react", "@typescript-eslint", "eslint-plugin-react-compiler"],
+    "rules": {
+        "react-compiler/react-compiler": "error"
+    },
     "settings": { "react": { "version": "detect" } },
     "ignorePatterns": ["webpack.config.js", "webpack.stand-alone.js"]
 }

package.json

@@ -39,6 +39,7 @@
         "dotenv-cli": "^7.4.4",
         "eslint": "^8.57.1",
         "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-compiler": "beta",
         "eslint-plugin-react-hooks": "^5.0.0",
         "fast-xml-parser": "^4.5.0",
         "feedparser": "^2.2.10",

src/sidebar/MainView/folder-tree/FolderTreeNode.tsx

@@ -12,7 +12,7 @@ type FolderTreeNode = {
 };
 
 const FolderTreeNode = ({ nodeId, nestedLevel, filterString }: FolderTreeNode) => {
-    const selectTreeNode = useMemo(makeSelectTreeNode, []);
+    const selectTreeNode = useMemo(() => makeSelectTreeNode(), []);
     const node = useAppSelector((state) => selectTreeNode(state.feeds, nodeId));
 
     if (!node) {

src/sidebar/MainView/folder-tree/dragdrop/useDragDropNode.ts

@@ -53,7 +53,7 @@ const useDragDropNode = (nodeMeta: NodeMeta) => {
 
     const [relativeDropPosition, setRelativDropPosition] = useState<RelativeDragDropPosition | undefined>(undefined);
 
-    const selectDescendentNodeIds = useMemo(makeselectDescendentNodeIds, [draggedNode]);
+    const selectDescendentNodeIds = useMemo(() => makeselectDescendentNodeIds(), []);
     const draggedNodeDescendents = useAppSelector((state) => selectDescendentNodeIds(state.feeds, draggedNode?.nodeId));
 
     const isDropNotAllowed =

src/utils/hooks/useNamedCallback.ts

@@ -4,7 +4,9 @@ import { DependencyList, useCallback, useDebugValue } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-types
 function useNamedCallback<T extends Function>(name: string, callback: T, deps: DependencyList): T {
     useDebugValue(name);
-    return useCallback(callback, [...deps, callback]);
+    const array = [...deps];
+    // eslint-disable-next-line react-compiler/react-compiler
+    return useCallback(callback, [array, callback]);
 }
 
 export default useNamedCallback;