132486 define initTags with useMemo

apps/app/src/components/PageTags/TagEditModal.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, {
+  useState, useCallback, useEffect, useMemo,
+} from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
@@ -18,13 +20,16 @@ export const TagEditModal: React.FC = () => {
 
   const { data: tagEditModalData, close: closeTagEditModal } = useTagEditModal();
 
+  const initTags = useMemo(() => {
+    return tagEditModalData?.tags ?? [];
+  }, [tagEditModalData?.tags]);
+
   const isOpen = tagEditModalData?.isOpen;
-  const initTags = tagEditModalData?.tags;
   const pageId = tagEditModalData?.pageId;
   const revisionId = tagEditModalData?.revisionId;
   const updateStateAfterSave = useUpdateStateAfterSave(pageId);
 
-  const [tags, setTags] = useState<string[] | undefined>(initTags);
+  const [tags, setTags] = useState<string[] | undefined>();
 
   // use to take initTags when redirect to other page
   useEffect(() => {

apps/app/src/components/PageTags/TagsInput.tsx

@@ -15,13 +15,15 @@ type TypeaheadInstance = {
 }
 
 type Props = {
-  tags?: string[],
+  tags,
   autoFocus: boolean,
   onTagsUpdated: (tags: string[]) => void,
 }
 
 export const TagsInput: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
+  const { tags, autoFocus, onTagsUpdated } = props;
+
   const tagsInputRef = useRef<TypeaheadInstance>(null);
 
   const [resultTags, setResultTags] = useState<string[]>([]);
@@ -32,10 +34,10 @@ export const TagsInput: FC<Props> = (props: Props) => {
   const isLoading = error == null && tagsSearch === undefined;
 
   const changeHandler = useCallback((selected: string[]) => {
-    if (props.onTagsUpdated != null) {
-      props.onTagsUpdated(selected);
+    if (onTagsUpdated != null) {
+      onTagsUpdated(selected);
     }
-  }, [props]);
+  }, [onTagsUpdated]);
 
   const searchHandler = useCallback(async(query: string) => {
     const tagsSearchData = tagsSearch?.tags || [];
@@ -64,7 +66,7 @@ export const TagsInput: FC<Props> = (props: Props) => {
         id="tag-typeahead-asynctypeahead"
         ref={tagsInputRef}
         caseSensitive={false}
-        defaultSelected={props.tags ?? []}
+        defaultSelected={tags}
         isLoading={isLoading}
         minLength={1}
         multiple
@@ -74,7 +76,7 @@ export const TagsInput: FC<Props> = (props: Props) => {
         onKeyDown={keyDownHandler}
         options={resultTags} // Search result (Some tag names)
         placeholder={t('tag_edit_modal.tags_input.tag_name')}
-        autoFocus={props.autoFocus}
+        autoFocus={autoFocus}
       />
     </div>
   );