From eb75edc5e4263fb18f3362783199acd12356705a Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 6 Dec 2020 18:56:22 +0900 Subject: [PATCH] [Improve] Use React.memo and useCallback - apply to optimize-performance --- src/components/common/DateTimeChange.jsx | 2 +- src/components/common/Tags.jsx | 2 +- src/components/introduce/ApplyStatusButton.jsx | 2 +- src/components/introduce/StudyIntroduceForm.jsx | 2 +- src/components/main/StudyGroup.jsx | 2 +- src/components/main/StudyGroups.jsx | 2 +- src/containers/groups/StudyGroupsContainer.jsx | 2 +- src/containers/introduce/IntroduceContainer.jsx | 2 +- src/containers/write/TagsFormContainer.jsx | 10 +++++----- src/containers/write/WriteFormContainer.jsx | 6 +++--- src/pages/IntroducePage.jsx | 2 +- src/pages/MainPage.jsx | 2 +- src/services/api.js | 2 +- 13 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/common/DateTimeChange.jsx b/src/components/common/DateTimeChange.jsx index d51f7e5..d0179b0 100644 --- a/src/components/common/DateTimeChange.jsx +++ b/src/components/common/DateTimeChange.jsx @@ -68,4 +68,4 @@ const DateTimeChange = ({ group, page, time }) => { ); }; -export default DateTimeChange; +export default React.memo(DateTimeChange); diff --git a/src/components/common/Tags.jsx b/src/components/common/Tags.jsx index b42a102..e065860 100644 --- a/src/components/common/Tags.jsx +++ b/src/components/common/Tags.jsx @@ -103,4 +103,4 @@ const Tags = ({ tags, type, onRemove }) => { ); }; -export default Tags; +export default React.memo(Tags); diff --git a/src/components/introduce/ApplyStatusButton.jsx b/src/components/introduce/ApplyStatusButton.jsx index 3c71593..5d65916 100644 --- a/src/components/introduce/ApplyStatusButton.jsx +++ b/src/components/introduce/ApplyStatusButton.jsx @@ -90,4 +90,4 @@ const ApplyStatusButton = ({ ); }; -export default ApplyStatusButton; +export default React.memo(ApplyStatusButton); diff --git a/src/components/introduce/StudyIntroduceForm.jsx b/src/components/introduce/StudyIntroduceForm.jsx index 16938c1..3c6f0a0 100644 --- a/src/components/introduce/StudyIntroduceForm.jsx +++ b/src/components/introduce/StudyIntroduceForm.jsx @@ -138,4 +138,4 @@ const StudyIntroduceForm = ({ ); }; -export default StudyIntroduceForm; +export default React.memo(StudyIntroduceForm); diff --git a/src/components/main/StudyGroup.jsx b/src/components/main/StudyGroup.jsx index 29dfba5..56d3318 100644 --- a/src/components/main/StudyGroup.jsx +++ b/src/components/main/StudyGroup.jsx @@ -84,4 +84,4 @@ const StudyGroup = ({ group, realTime }) => { ); }; -export default StudyGroup; +export default React.memo(StudyGroup); diff --git a/src/components/main/StudyGroups.jsx b/src/components/main/StudyGroups.jsx index 0131342..35a97bb 100644 --- a/src/components/main/StudyGroups.jsx +++ b/src/components/main/StudyGroups.jsx @@ -41,4 +41,4 @@ const StudyGroups = ({ groups, realTime, user }) => ( ); -export default StudyGroups; +export default React.memo(StudyGroups); diff --git a/src/containers/groups/StudyGroupsContainer.jsx b/src/containers/groups/StudyGroupsContainer.jsx index 7a60a2d..2cac228 100644 --- a/src/containers/groups/StudyGroupsContainer.jsx +++ b/src/containers/groups/StudyGroupsContainer.jsx @@ -45,4 +45,4 @@ const StudyGroupsContainer = () => { ); }; -export default StudyGroupsContainer; +export default React.memo(StudyGroupsContainer); diff --git a/src/containers/introduce/IntroduceContainer.jsx b/src/containers/introduce/IntroduceContainer.jsx index 14cee81..4daa17e 100644 --- a/src/containers/introduce/IntroduceContainer.jsx +++ b/src/containers/introduce/IntroduceContainer.jsx @@ -46,4 +46,4 @@ const IntroduceContainer = ({ groupId }) => { ); }; -export default IntroduceContainer; +export default React.memo(IntroduceContainer); diff --git a/src/containers/write/TagsFormContainer.jsx b/src/containers/write/TagsFormContainer.jsx index 711fe69..964e44b 100644 --- a/src/containers/write/TagsFormContainer.jsx +++ b/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 ( diff --git a/src/containers/write/WriteFormContainer.jsx b/src/containers/write/WriteFormContainer.jsx index 06d6d21..777d645 100644 --- a/src/containers/write/WriteFormContainer.jsx +++ b/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())); diff --git a/src/pages/IntroducePage.jsx b/src/pages/IntroducePage.jsx index ae46df6..444cfba 100644 --- a/src/pages/IntroducePage.jsx +++ b/src/pages/IntroducePage.jsx @@ -15,4 +15,4 @@ const IntroducePage = ({ params }) => { ); }; -export default IntroducePage; +export default React.memo(IntroducePage); diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 8fa08b8..a2107fa 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -10,4 +10,4 @@ const MainPage = () => ( ); -export default MainPage; +export default React.memo(MainPage); diff --git a/src/services/api.js b/src/services/api.js index e64a966..328b949 100644 --- a/src/services/api.js +++ b/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(); }