fix: props로 넘기는 함수에 useCallback 사용

go-cham · Aug 21, 2023 · 8e2bdb4 · 8e2bdb4
1 parent 9a5c1f2
commit 8e2bdb4
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 43 deletions.
diff --git a/src/app/Provider.tsx b/src/app/Provider.tsx
@@ -18,7 +18,7 @@ export function Provider({ children }: { children: React.ReactNode }) {
       <JotaiProvider>
         <BrowserRouter>{children}</BrowserRouter>
       </JotaiProvider>
-      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
 }
diff --git a/src/features/posts/queries/useGetPost.tsx b/src/features/posts/queries/useGetPost.tsx
@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { isNumber } from 'lodash';
 import { axiosInstance } from '@/common/libs/axios';
 import { GetPostResponse } from './dto/get-post';
 

diff --git a/src/features/register/components/form/GenderSelect/GenderSelect.tsx b/src/features/register/components/form/GenderSelect/GenderSelect.tsx
@@ -17,7 +17,7 @@ export function GenderSelect({ defaultValue, onChange }: GenderSelectProps) {
     if (gender) {
       onChange(gender);
     }
-  }, [gender]);
+  }, [gender, onChange]);
 
   return (
     <div>

diff --git a/src/features/user/components/NicknameAgeGenderForm/NicknameAgeGenderForm.tsx b/src/features/user/components/NicknameAgeGenderForm/NicknameAgeGenderForm.tsx
@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { axiosInstance } from '@/common/libs/axios';
 import { parseDateString } from '@/common/utils/date/parseDateString';
 import { validateBirthDate } from '@/common/utils/validations/birth-date';
@@ -45,29 +45,35 @@ export function NicknameAgeGenderForm({
     birthDate: null,
   });
 
-  const handleNicknameChange = async (nickname: string) => {
-    setIsDirty({ ...isDirty, nickname: true });
-    setFormData({ ...formData, nickname });
+  const handleNicknameChange = useCallback(
+    async (nickname: string) => {
+      setIsDirty((prevIsDirty) => ({ ...prevIsDirty, nickname: true }));
+      setFormData((prevFormData) => ({ ...prevFormData, nickname }));
 
-    let error = validateNickname(nickname);
-    if (!error) {
-      try {
-        await axiosInstance.get(`/user/${user?.id}/validate-nickname`, {
-          params: { nickname },
-        });
-      } catch (e) {
-        if (e instanceof AxiosError && e.response?.status === 400) {
-          const errorCode = e.response.data.errorCode;
-          if (errorCode === 'IS_DUPLICATED_NICKNAME') {
-            error = '이미 존재하는 닉네임입니다.';
-          } else if (errorCode === 'IS_BAD_WORD') {
-            error = '금칙어 입력이 불가합니다.';
+      let error = validateNickname(nickname);
+      if (!error) {
+        try {
+          await axiosInstance.get(`/user/${user?.id}/validate-nickname`, {
+            params: { nickname },
+          });
+        } catch (e) {
+          if (e instanceof AxiosError && e.response?.status === 400) {
+            const errorCode = e.response.data.errorCode;
+            if (errorCode === 'IS_DUPLICATED_NICKNAME') {
+              error = '이미 존재하는 닉네임입니다.';
+            } else if (errorCode === 'IS_BAD_WORD') {
+              error = '금칙어 입력이 불가합니다.';
+            }
           }
         }
       }
-    }
-    setErrorMessage({ ...errorMessage, nickname: error });
-  };
+      setErrorMessage((prevErrorMessage) => ({
+        ...prevErrorMessage,
+        nickname: error,
+      }));
+    },
+    [user?.id],
+  );
 
   const nicknameSuccessMessage =
     isDirty.nickname && !errorMessage.nickname
@@ -76,21 +82,26 @@ export function NicknameAgeGenderForm({
   const birthDateSuccessMessage =
     isDirty.birthDate && !errorMessage.birthDate ? ' ' : null;
 
-  const handleBirthDateChange = ({ year, month, day }: BirthDate) => {
-    setIsDirty({ ...isDirty, birthDate: true });
-    setFormData({ ...formData, birthDate: `${year}-${month}-${day}` });
-
-    setErrorMessage({
-      ...errorMessage,
-      birthDate: isDirty.birthDate
-        ? validateBirthDate({ year, month, day })
-        : null,
-    });
-  };
+  const handleBirthDateChange = useCallback(
+    ({ year, month, day }: BirthDate) => {
+      setIsDirty((prevIsDirty) => ({ ...prevIsDirty, birthDate: true }));
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        birthDate: `${year}-${month}-${day}`,
+      }));
+      setErrorMessage((prevErrorMessage) => ({
+        ...prevErrorMessage,
+        birthDate: isDirty.birthDate
+          ? validateBirthDate({ year, month, day })
+          : null,
+      }));
+    },
+    [isDirty.birthDate],
+  );
 
-  const handleGenderChange = (gender: Gender) => {
-    setFormData({ ...formData, gender });
-  };
+  const handleGenderChange = useCallback((gender: Gender) => {
+    setFormData((prevFormData) => ({ ...prevFormData, gender }));
+  }, []);
 
   useEffect(() => {
     const isValid = Boolean(
@@ -101,7 +112,7 @@ export function NicknameAgeGenderForm({
         !errorMessage.birthDate,
     );
     onChange(formData, isValid);
-  }, [formData, errorMessage]);
+  }, [formData, errorMessage, onChange]);
 
   return (
     <div className="space-y-[2.9rem]">

diff --git a/src/features/user/components/RegionJobCategoryForm/RegionJobCategoryForm.tsx b/src/features/user/components/RegionJobCategoryForm/RegionJobCategoryForm.tsx
@@ -74,7 +74,7 @@ export function RegionJobCategoryForm({
     );
 
     onChange(formData, isValid);
-  }, [formData, jobErrorMessage, isDirty]);
+  }, [formData, jobErrorMessage, isDirty, onChange]);
 
   useEffect(() => {
     if (formData.job) {

diff --git a/src/features/vote/components/VoteButton/VoteButton.tsx b/src/features/vote/components/VoteButton/VoteButton.tsx
@@ -1,5 +1,4 @@
 import { useAtom, useSetAtom } from 'jotai';
-import { useEffect } from 'react';
 import { FloatingButton } from '@/common/components/ui/buttons';
 import { useUser } from '@/features/user/queries';
 import { useChooseOption } from '@/features/vote/queries';

diff --git a/src/features/vote/components/VoteSection.tsx b/src/features/vote/components/VoteSection.tsx
@@ -1,5 +1,4 @@
 import { useAtomValue, useSetAtom } from 'jotai';
-import { useAtom } from 'jotai/index';
 import { useEffect } from 'react';
 import { Spacing } from '@/common/components/ui';
 import { getRemainingTime } from '@/features/posts/utils/get-remaining-time';

diff --git a/src/features/vote/queries/useGetChoiceOptions.tsx b/src/features/vote/queries/useGetChoiceOptions.tsx
@@ -1,5 +1,4 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
-import { useQuery } from '@tanstack/react-query';
 import { axiosInstance } from '@/common/libs/axios';
 import { GetChoiceOptionsResponse } from './dto/get-choice-options';
 

diff --git a/src/features/vote/queries/useGetMyChoice.tsx b/src/features/vote/queries/useGetMyChoice.tsx
@@ -1,5 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { isNumber } from 'lodash';
 import { axiosInstance } from '@/common/libs/axios';
 import { GetMyChoiceResponse } from './dto/get-my-choice';