fix: I really don't know how to write react and js

src/components/ui/form/Form.tsx

@@ -8,6 +8,7 @@ import type {
 } from 'react'
 import type { Field } from './types'
 
+import { useRefValue } from '~/hooks/common/use-ref-value'
 import { jotaiStore } from '~/lib/store'
 
 import { FormConfigContext, FormContext, useForm } from './FormContext'
@@ -20,7 +21,7 @@ export const Form = (
   >,
 ) => {
   const { showErrorMessage = true, ...formProps } = props
-  const fieldsAtom = useRef(atom({})).current
+  const fieldsAtom = useRefValue(() => atom({}))
   return (
     <FormContext.Provider
       value={

src/components/ui/markdown/index.demo.tsx

@@ -1,5 +1,4 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { useRef } from 'react'
 import { ToastContainer } from 'react-toastify'
 import { ThemeProvider } from 'next-themes'
 import type { DocumentComponent } from 'storybook/typings'
@@ -8,9 +7,10 @@ import type { DocumentComponent } from 'storybook/typings'
 import customize from './customize.md?raw'
 import { Markdown } from './Markdown'
 
+const queryClient = new QueryClient()
 export const MarkdownCustomize: DocumentComponent = () => {
   return (
-    <QueryClientProvider client={useRef(new QueryClient()).current}>
+    <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <main className="relative m-auto mt-6 max-w-[800px] border border-accent/10">
           <Markdown

src/components/widgets/comment/CommentBox/UniversalTextArea.tsx

@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic'
 
 import { FloatPopover } from '~/components/ui/float-popover'
 import { TextArea } from '~/components/ui/input'
+import { useRefValue } from '~/hooks/common/use-ref-value'
 import { preventDefault } from '~/lib/dom'
 
 import { getRandomPlaceholder } from './constants'
@@ -15,7 +16,7 @@ const EmojiPicker = dynamic(() =>
   import('../../shared/EmojiPicker').then((mod) => mod.EmojiPicker),
 )
 export const UniversalTextArea = () => {
-  const placeholder = useRef(getRandomPlaceholder()).current
+  const placeholder = useRefValue(() => getRandomPlaceholder())
   const setter = useSetCommentBoxValues()
   const value = useCommentBoxTextValue()
 

src/components/widgets/comment/CommentBox/providers.tsx

@@ -1,12 +1,13 @@
 'use client'
 
-import { createContext, memo, useEffect, useMemo, useRef } from 'react'
+import { createContext, memo, useEffect, useMemo } from 'react'
 import { atom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import type { CommentModel } from '@mx-space/api-client'
 import type { FC, PropsWithChildren } from 'react'
 
 import { useBeforeMounted } from '~/hooks/common/use-before-mounted'
+import { useRefValue } from '~/hooks/common/use-ref-value'
 import { jotaiStore } from '~/lib/store'
 
 import { setCommentActionLeftSlot, useCommentActionLeftSlot } from './hooks'
@@ -47,10 +48,10 @@ export const CommentBoxProvider = (
 ) => {
   const { refId, children, afterSubmit, initialValue } = props
 
-  const ctxValue = useRef({
+  const ctxValue = useRefValue(() => ({
     ...createInitialValue(),
     refId: atom(refId),
-  }).current
+  }))
   useBeforeMounted(() => {
     if (initialValue) {
       jotaiStore.set(ctxValue.text, initialValue)

src/hooks/common/use-ref-value.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react'
+
+// @see https://react.dev/reference/react/useRef#avoiding-recreating-the-ref-contents
+export const useRefValue = <T>(value: () => T): T => {
+  const ref = useRef<T>()
+
+  const onceRef = useRef(false)
+
+  if (!onceRef.current) {
+    ref.current = value()
+    onceRef.current = true
+  }
+
+  return ref.current!
+}

src/providers/article/MarkdownImageRecordProvider.tsx

@@ -1,22 +1,17 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react'
+import { createContext, useCallback, useContext, useEffect } from 'react'
 import { atom, useAtomValue } from 'jotai'
 import { selectAtom } from 'jotai/utils'
 import type { Image } from '@mx-space/api-client'
 
+import { useRefValue } from '~/hooks/common/use-ref-value'
 import { jotaiStore } from '~/lib/store'
 
 const MarkdownImageRecordProviderInternal = createContext(atom([] as Image[]))
 
 export const MarkdownImageRecordProvider: Component<{
   images: Image[]
 }> = ({ children, images }) => {
-  const atomRef = useRef(atom([...images] as Image[])).current
+  const atomRef = useRefValue(() => atom([...images] as Image[]))
 
   useEffect(() => {
     jotaiStore.set(atomRef, [...images])

src/providers/root/react-query-provider.tsx

@@ -2,7 +2,6 @@
 
 import { QueryClient } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
-import { useRef } from 'react'
 import { del, get, set } from 'idb-keyval'
 import type {
   PersistedClient,
@@ -34,30 +33,29 @@ export const queryClient = new QueryClient({
     },
   },
 })
+
+const persistOptions = {
+  persister,
+  maxAge: 1000 * 60 * 60 * 24 * 7, // 1 week
+  dehydrateOptions: {
+    shouldDehydrateQuery: (query) => {
+      const queryIsReadyForPersistance = query.state.status === 'success'
+
+      if (query.meta?.persist === false) return false
+
+      if (queryIsReadyForPersistance) {
+        return !((query.state?.data as any)?.pages?.length > 1)
+      } else {
+        return false
+      }
+    },
+  },
+} as Omit<PersistQueryClientOptions, 'queryClient'>
 export const ReactQueryProvider = ({ children }: PropsWithChildren) => {
   return (
     <PersistQueryClientProvider
       client={queryClient}
-      persistOptions={
-        useRef<Omit<PersistQueryClientOptions, 'queryClient'>>({
-          persister,
-          maxAge: 1000 * 60 * 60 * 24 * 7, // 1 week
-          dehydrateOptions: {
-            shouldDehydrateQuery: (query) => {
-              const queryIsReadyForPersistance =
-                query.state.status === 'success'
-
-              if (query.meta?.persist === false) return false
-
-              if (queryIsReadyForPersistance) {
-                return !((query.state?.data as any)?.pages?.length > 1)
-              } else {
-                return false
-              }
-            },
-          },
-        }).current
-      }
+      persistOptions={persistOptions}
     >
       {children}
     </PersistQueryClientProvider>