refactor & perf of files `datesets/Doc.tsx` and `template.xx.mdx` (#17951)

web/app/(commonLayout)/datasets/Doc.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiListUnordered } from '@remixicon/react'
@@ -67,6 +67,17 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
     }
   }
 
+  const Template = useMemo(() => {
+    switch (locale) {
+      case LanguagesSupported[1]:
+        return <TemplateZh apiBaseUrl={apiBaseUrl} />
+      case LanguagesSupported[7]:
+        return <TemplateJa apiBaseUrl={apiBaseUrl} />
+      default:
+        return <TemplateEn apiBaseUrl={apiBaseUrl} />
+    }
+  }, [apiBaseUrl, locale])
+
   return (
     <div className="flex">
       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
@@ -107,16 +118,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           )}
       </div>
       <article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
-        {(() => {
-          switch (locale) {
-            case LanguagesSupported[1]:
-              return <TemplateZh apiBaseUrl={apiBaseUrl} />
-            case LanguagesSupported[7]:
-              return <TemplateJa apiBaseUrl={apiBaseUrl} />
-            default:
-              return <TemplateEn apiBaseUrl={apiBaseUrl} />
-          }
-        })()}
+        {Template}
       </article>
     </div>
   )

web/app/(commonLayout)/datasets/template/template.en.mdx

@@ -1,3 +1,8 @@
+{/**
+  * @typedef Props
+  * @property {string} apiBaseUrl
+  */}
+
 import { CodeGroup } from '@/app/components/develop/code.tsx'
 import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstruction, Paragraph } from '@/app/components/develop/md.tsx'
 

web/app/(commonLayout)/datasets/template/template.ja.mdx

@@ -1,3 +1,8 @@
+{/**
+  * @typedef Props
+  * @property {string} apiBaseUrl
+  */}
+
 import { CodeGroup } from '@/app/components/develop/code.tsx'
 import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstruction, Paragraph } from '@/app/components/develop/md.tsx'
 

web/app/(commonLayout)/datasets/template/template.zh.mdx

@@ -1,3 +1,8 @@
+{/**
+  * @typedef Props
+  * @property {string} apiBaseUrl
+  */}
+
 import { CodeGroup } from '@/app/components/develop/code.tsx'
 import { Row, Col, Properties, Property, Heading, SubProperty, PropertyInstruction, Paragraph } from '@/app/components/develop/md.tsx'