Add eslint-plugin-react-hooks

.eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
     'plugin:import/typescript',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
     'plugin:tailwindcss/recommended',
   ],
   overrides: [

package.json

@@ -51,6 +51,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-tailwindcss": "^3.14.3",
     "jsdom": "^24.0.0",
     "prettier": "^2.8.8",

src/component/form/pet-filters-form.tsx

@@ -27,7 +27,7 @@ export const PetFiltersForm: FC<PetFiltersFormProps> = ({
 
   useEffect(() => {
     setPetFilters(initialPetFilters);
-  }, [initialPetFilters]);
+  }, [initialPetFilters, setPetFilters]);
 
   return (
     <form

src/component/form/pet-form.tsx

@@ -25,7 +25,7 @@ export const PetForm: FC<PetFormProps> = ({ submitPet, initialPet, httpError }:
     if (initialPet) {
       setPet(initialPet);
     }
-  }, [initialPet]);
+  }, [initialPet, setPet]);
 
   return (
     <form

src/component/page/pet/list.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { de } from 'date-fns/locale';
 import { format } from 'date-fns';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -42,18 +42,19 @@ const List: FC = () => {
 
   const query = useMemo(() => querySchema.parse(qs.parse(location.search.substring(1))), [location]);
 
-  const petListRequest: PetListRequest = {
-    offset: query.page * limit - limit,
-    limit,
-    filters: query.filters,
-    sort: query.sort,
-  };
-
-  const queryString = qs.stringify(petListRequest);
+  const petListRequest: PetListRequest = useMemo(
+    () => ({
+      offset: query.page * limit - limit,
+      limit,
+      filters: query.filters,
+      sort: query.sort,
+    }),
+    [query.filters, query.page, query.sort],
+  );
 
-  const fetchPetList = async () => {
+  const fetchPetList = useCallback(async () => {
     actions.listModel(petListRequest);
-  };
+  }, [actions, petListRequest]);
 
   const deletePet = async (id: string) => {
     if (await actions.deleteModel(id)) {
@@ -77,7 +78,7 @@ const List: FC = () => {
     document.title = pageTitle;
 
     fetchPetList();
-  }, [queryString]);
+  }, [fetchPetList]);
 
   if (!petList && !httpError) {
     return <div></div>;

src/component/page/pet/read.tsx

@@ -21,7 +21,7 @@ const Read: FC = () => {
     document.title = pageTitle;
 
     actions.readModel(id);
-  }, [id]);
+  }, [actions, id]);
 
   if (!pet && !httpError) {
     return <div></div>;

src/component/page/pet/update.tsx

@@ -29,7 +29,7 @@ const Update: FC = () => {
     document.title = pageTitle;
 
     actions.readModel(id);
-  }, [id]);
+  }, [actions, id]);
 
   if (!pet && !httpError) {
     return <div></div>;