diff --git a/src/components/common/EmptyStateArea.tsx b/src/components/common/EmptyStateArea.tsx
index 51aa51c6..8e9f22e0 100644
--- a/src/components/common/EmptyStateArea.tsx
+++ b/src/components/common/EmptyStateArea.tsx
@@ -1,4 +1,4 @@
-import { memo, ReactElement } from 'react';
+import { ReactElement } from 'react';
import styled from '@emotion/styled';
@@ -46,7 +46,7 @@ function EmptyStateArea({
);
}
-export default memo(EmptyStateArea);
+export default EmptyStateArea;
const EmptyStateWrapper = styled.section<{ marginTop: string; }>`
display: flex;
diff --git a/src/components/common/ProfileImage.tsx b/src/components/common/ProfileImage.tsx
index 47abfeb0..e8d5aa0f 100644
--- a/src/components/common/ProfileImage.tsx
+++ b/src/components/common/ProfileImage.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement } from 'react';
import Image from 'next/image';
@@ -50,7 +50,7 @@ function ProfileImage({
);
}
-export default ProfileImage;
+export default memo(ProfileImage);
const ProfileAvatarImage = styled(Image)`
border-radius: 70%;
diff --git a/src/components/common/SwitchButton.tsx b/src/components/common/SwitchButton.tsx
index df2ba72e..c772f915 100644
--- a/src/components/common/SwitchButton.tsx
+++ b/src/components/common/SwitchButton.tsx
@@ -9,17 +9,19 @@ interface Props {
defaultChecked: boolean;
}
-const SwitchButton = ({ onChange, defaultChecked }: Props) => (
-
-);
+function SwitchButton({ onChange, defaultChecked }: Props) {
+ return (
+
+ );
+}
export default SwitchButton;
diff --git a/src/components/common/Tag.tsx b/src/components/common/Tag.tsx
index 5c6c96ff..83ecd01b 100644
--- a/src/components/common/Tag.tsx
+++ b/src/components/common/Tag.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement } from 'react';
import { X as CloseSvg } from 'react-feather';
import { useTheme } from '@emotion/react';
@@ -37,7 +37,7 @@ function Tag({ tag, onRemove, onClick }: Props): ReactElement {
);
}
-export default Tag;
+export default memo(Tag);
const TagWrapper = styled.div`
display: inline-flex;
diff --git a/src/components/home/TagsBar.tsx b/src/components/home/TagsBar.tsx
index e19c7bdc..2a144eb8 100644
--- a/src/components/home/TagsBar.tsx
+++ b/src/components/home/TagsBar.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement, useCallback } from 'react';
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
@@ -13,23 +13,25 @@ function TagsBar(): ReactElement {
const setGroupsCondition = useSetRecoilState(groupsConditionState);
+ const onClick = useCallback((name: string) => setGroupsCondition((prev) => ({
+ ...prev,
+ tag: name,
+ })), []);
+
return (
{tags.map(({ name }) => (
setGroupsCondition((prev) => ({
- ...prev,
- tag: name,
- }))}
+ onClick={() => onClick(name)}
/>
))}
);
}
-export default TagsBar;
+export default memo(TagsBar);
const TagsWrapper = styled.div`
height: 36px;
diff --git a/src/components/write/TagForm.tsx b/src/components/write/TagForm.tsx
index a4aff9d4..0293a657 100644
--- a/src/components/write/TagForm.tsx
+++ b/src/components/write/TagForm.tsx
@@ -53,10 +53,10 @@ function TagForm({ tags: initialTags, onChange }: Props): ReactElement {
actionKeyEvent(e, ['Enter']);
}, [actionKeyEvent]);
- const handleRemove = (nextTags: string[]) => {
+ const handleRemove = useCallback((nextTags: string[]) => {
setTags(nextTags);
onChange(nextTags);
- };
+ }, [onChange]);
useEffect(() => {
setTags(initialTags);
diff --git a/src/components/write/TagList.tsx b/src/components/write/TagList.tsx
index 2406bfde..952c6f4f 100644
--- a/src/components/write/TagList.tsx
+++ b/src/components/write/TagList.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { memo, ReactElement, useCallback } from 'react';
import Tag from '../common/Tag';
@@ -8,11 +8,11 @@ interface Props {
}
function TagList({ onRemove, tags }: Props): ReactElement {
- const handleRemove = (target: string) => {
+ const handleRemove = useCallback((target: string) => {
const nextTags = tags.filter((tag) => tag !== target);
onRemove(nextTags);
- };
+ }, [tags, onRemove]);
return (
<>
@@ -27,4 +27,4 @@ function TagList({ onRemove, tags }: Props): ReactElement {
);
}
-export default TagList;
+export default memo(TagList);
diff --git a/src/containers/write/WriteFormContainer.tsx b/src/containers/write/WriteFormContainer.tsx
index 3887a7a6..d047af1f 100644
--- a/src/containers/write/WriteFormContainer.tsx
+++ b/src/containers/write/WriteFormContainer.tsx
@@ -13,7 +13,7 @@ function WriteFormContainer(): ReactElement | null {
const onChangeFields = useCallback((form: Partial) => {
changeFields((prevState) => ({ ...prevState, ...form }));
- }, [changeFields]);
+ }, []);
if (!user) {
return null;