[Improve] Use React.memo and useCallback

src/components/common/DateTimeChange.jsx

@@ -68,4 +68,4 @@ const DateTimeChange = ({ group, page, time }) => {
   );
 };
 
-export default DateTimeChange;
+export default React.memo(DateTimeChange);

src/components/common/Tags.jsx

@@ -103,4 +103,4 @@ const Tags = ({ tags, type, onRemove }) => {
   );
 };
 
-export default Tags;
+export default React.memo(Tags);

src/components/introduce/ApplyStatusButton.jsx

@@ -90,4 +90,4 @@ const ApplyStatusButton = ({
   );
 };
 
-export default ApplyStatusButton;
+export default React.memo(ApplyStatusButton);

src/components/introduce/StudyIntroduceForm.jsx

@@ -138,4 +138,4 @@ const StudyIntroduceForm = ({
   );
 };
 
-export default StudyIntroduceForm;
+export default React.memo(StudyIntroduceForm);

src/components/main/StudyGroup.jsx

@@ -84,4 +84,4 @@ const StudyGroup = ({ group, realTime }) => {
   );
 };
 
-export default StudyGroup;
+export default React.memo(StudyGroup);

src/components/main/StudyGroups.jsx

@@ -41,4 +41,4 @@ const StudyGroups = ({ groups, realTime, user }) => (
   </>
 );
 
-export default StudyGroups;
+export default React.memo(StudyGroups);

src/containers/groups/StudyGroupsContainer.jsx

@@ -45,4 +45,4 @@ const StudyGroupsContainer = () => {
   );
 };
 
-export default StudyGroupsContainer;
+export default React.memo(StudyGroupsContainer);

src/containers/introduce/IntroduceContainer.jsx

@@ -46,4 +46,4 @@ const IntroduceContainer = ({ groupId }) => {
   );
 };
 
-export default IntroduceContainer;
+export default React.memo(IntroduceContainer);

src/containers/write/TagsFormContainer.jsx

@@ -1,25 +1,25 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getGroup } from '../../util/utils';
-import TagsForm from '../../components/write/TagsForm';
-
 import { changeWriteField } from '../../reducers/groupSlice';
 
+import TagsForm from '../../components/write/TagsForm';
+
 const TagsFormContainer = () => {
   const dispatch = useDispatch();
 
   const { tags } = useSelector(getGroup('writeField'));
 
-  const onChangeTags = (nextTags) => {
+  const onChangeTags = useCallback((nextTags) => {
     dispatch(
       changeWriteField({
         name: 'tags',
         value: nextTags,
       }),
     );
-  };
+  }, [dispatch]);
 
   return (
     <TagsForm onChange={onChangeTags} tags={tags} />

src/containers/write/WriteFormContainer.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useUnmount } from 'react-use';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,14 +13,14 @@ const WriteFormContainer = () => {
 
   const writeField = useSelector(getGroup('writeField'));
 
-  const onChangeWriteField = ({ name, value }) => {
+  const onChangeWriteField = useCallback(({ name, value }) => {
     dispatch(
       changeWriteField({
         name,
         value,
       }),
     );
-  };
+  }, [dispatch]);
 
   useUnmount(() => dispatch(clearWriteFields()));
 

src/pages/IntroducePage.jsx

@@ -15,4 +15,4 @@ const IntroducePage = ({ params }) => {
     </Responsive>
   );
 };
-export default IntroducePage;
+export default React.memo(IntroducePage);

src/pages/MainPage.jsx

@@ -10,4 +10,4 @@ const MainPage = () => (
   </Responsive>
 );
 
-export default MainPage;
+export default React.memo(MainPage);

src/services/api.js

@@ -6,8 +6,8 @@ const branchGetGroups = (tag) => {
   if (tag) {
     return db
       .collection('groups')
-      .orderBy('applyEndDate', 'asc')
       .where('tags', 'array-contains', tag)
+      .orderBy('applyEndDate', 'asc')
       .get();
   }