Form.useWatch support selector

package.json

@@ -26,7 +26,7 @@
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
-    "rc-field-form": "~1.27.4",
+    "rc-field-form": "~1.41.0",
     "rc-util": "^5.30.0",
     "react-is": "^18.2.0",
     "runes2": "^1.1.2",

src/components/form/form-subscribe.tsx

@@ -1,10 +1,9 @@
-import React, { memo, useContext } from 'react'
+import React, { useContext } from 'react'
 import type { FC, ReactNode } from 'react'
 import { FieldContext, useWatch } from 'rc-field-form'
-import { useUpdate } from 'ahooks'
 import type { FormInstance } from 'rc-field-form'
 import type { NamePath } from 'rc-field-form/es/interface'
-import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect'
+import { cloneByNamePathList } from './utils'
 
 type RenderChildren<Values = any> = (
   changedValues: Record<string, any>,
@@ -18,9 +17,9 @@ export interface FormSubscribeProps {
 }
 
 export const FormSubscribe: FC<FormSubscribeProps> = props => {
-  const update = useUpdate()
   const form = useContext(FieldContext)
 
+  useWatch(values => cloneByNamePathList(values, props.to), form)
   const value = form.getFieldsValue(props.to)
 
   // Memo to avoid useless render
@@ -29,29 +28,5 @@ export const FormSubscribe: FC<FormSubscribeProps> = props => {
     [JSON.stringify(value), props.children]
   )
 
-  return (
-    <>
-      {childNode}
-      {props.to.map(namePath => (
-        <Watcher
-          key={namePath.toString()}
-          form={form}
-          namePath={namePath}
-          onChange={update}
-        />
-      ))}
-    </>
-  )
+  return childNode as React.ReactElement
 }
-
-export const Watcher = memo<{
-  form: FormInstance
-  namePath: NamePath
-  onChange: () => void
-}>(props => {
-  const value = useWatch(props.namePath, props.form)
-  useIsomorphicUpdateLayoutEffect(() => {
-    props.onChange()
-  }, [value])
-  return null
-})

src/components/form/utils.ts

@@ -1,4 +1,8 @@
 import { isMemo, isFragment } from 'react-is'
+import { NamePath, Store } from 'rc-field-form/es/interface'
+import getValue from 'rc-util/lib/utils/get'
+import setValue from 'rc-util/lib/utils/set'
+
 export function toArray<T>(candidate?: T | T[] | false): T[] {
   if (candidate === undefined || candidate === false) return []
 
@@ -25,3 +29,16 @@ export function isSafeSetRefComponent(component: any): boolean {
 
   return !isSimpleFunctionComponent(component.type)
 }
+
+export const cloneByNamePathList = (
+  store: Store,
+  namePathList: NamePath[]
+): Store => {
+  return namePathList.reduce((accumulator, currentValue) => {
+    return setValue(
+      accumulator,
+      toArray(currentValue),
+      getValue(store, toArray(currentValue))
+    )
+  }, {})
+}