perf: re-reduce router change re-render

Signed-off-by: Innei <tukon479@gmail.com>

src/app/notes/[id]/page.tsx

@@ -1,20 +1,33 @@
 'use client'
 
+import { useRef } from 'react'
 import { useParams } from 'next/navigation'
 
 import { Toc, TocAutoScroll } from '~/components/widgets/toc'
 import { useNoteByNidQuery } from '~/hooks/data/use-note'
 import { PageDataHolder } from '~/lib/page-holder'
 import { ArticleElementProvider } from '~/providers/article/article-element-provider'
+import { useSetNoteId } from '~/providers/note/note-id-provider'
 import { NoteLayoutRightSidePortal } from '~/providers/note/right-side-provider'
 import { parseMarkdown } from '~/remark'
+import { isClientSide } from '~/utils/env'
 
 const PageImpl = () => {
   const { id } = useParams() as { id: string }
   const { data } = useNoteByNidQuery(id)
 
   const mardownResult = parseMarkdown(data?.data?.text ?? '')
 
+  // Why do this, I mean why do set NoteId to context, don't use `useParams().id` for children components.
+  // Because any router params or query changes, will cause components that use `useParams()` hook, this hook is a context hook,
+  // For example, `ComA` use `useParams()` just want to get value `id`,
+  // but if router params or query changes `page` params, will cause `CompA` re - render.
+  const setNoteId = useSetNoteId()
+  const onceRef = useRef(false)
+  if (isClientSide() && !onceRef.current) {
+    onceRef.current = true
+    setNoteId(id)
+  }
   return (
     <article className="prose">
       <header>

src/app/notes/layout.tsx

@@ -1,25 +1,28 @@
 import type { PropsWithChildren } from 'react'
 
 import { NoteLeftSidebar } from '~/components/widgets/note/NoteLeftSidebar'
+import { NoteIdProvider } from '~/providers/note/note-id-provider'
 import { NoteLayoutRightSideProvider } from '~/providers/note/right-side-provider'
 import { clsxm } from '~/utils/helper'
 
 export default async (props: PropsWithChildren) => {
   return (
-    <div
-      className={clsxm(
-        'relative mx-auto grid min-h-screen max-w-[50rem]',
-        'gap-4 md:grid-cols-1 lg:max-w-[calc(50rem+400px)] lg:grid-cols-[1fr_minmax(auto,50rem)_1fr]',
-        'mt-24',
-      )}
-    >
-      <NoteLeftSidebar className="relative hidden lg:block" />
+    <NoteIdProvider>
+      <div
+        className={clsxm(
+          'relative mx-auto grid min-h-screen max-w-[50rem]',
+          'gap-4 md:grid-cols-1 lg:max-w-[calc(50rem+400px)] lg:grid-cols-[1fr_minmax(auto,50rem)_1fr]',
+          'mt-24',
+        )}
+      >
+        <NoteLeftSidebar className="relative hidden lg:block" />
 
-      <div className="relative md:col-start-1 lg:col-auto">
-        {props.children}
-      </div>
+        <div className="relative md:col-start-1 lg:col-auto">
+          {props.children}
+        </div>
 
-      <NoteLayoutRightSideProvider className="relative hidden lg:block" />
-    </div>
+        <NoteLayoutRightSideProvider className="relative hidden lg:block" />
+      </div>
+    </NoteIdProvider>
   )
 }

src/hooks/data/use-note.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import { useParams } from 'next/navigation'
 
+import { useNoteId } from '~/providers/note/note-id-provider'
 import { queries } from '~/queries/definition'
 
 export const useNoteData = () => {
@@ -18,7 +18,7 @@ export const useNoteData = () => {
 }
 
 export const useNoteNId = () => {
-  return (useParams() as { id?: string }).id
+  return useNoteId()
 }
 
 export const useNoteByNidQuery = (nid: string) => {

src/providers/note/note-id-provider.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { createContextState } from 'foxact/context-state'
+
+export const [NoteIdProvider, useNoteId, useSetNoteId] = createContextState<
+  undefined | string
+>(undefined)