How to use the @umijs/hooks.usePersistFn function in @umijs/hooks

}
    const sel = selection.current
    sel.setChangeEvents(false)
    sel.setAllItems(tableItems)
    if (internalVal && internalVal.length > 0) {
      sel.resetAllSelection(internalVal)
    } else if (defaultSelectAll) {
      sel.setAllSelectionSelected(true)
    }
    sel.setChangeEvents(true)
    dataHasLoaded.current = true
    // [defaultSelectAll, internalVal] is not needed
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableItems])

  const getInstanceByKeys = usePersistFn((keys: string[]) => {
    const keyToItemMap = {}
    for (const item of tableItems) {
      keyToItemMap[item.key] = item
    }
    return keys.map((key) => keyToItemMap[key])
  })

  const getInstanceByKey = usePersistFn((key: string) => {
    return getInstanceByKeys([key])[0]
  })

  React.useImperativeHandle(ref, () => ({
    getInstanceByKey,
    getInstanceByKeys,
  }))

function InstanceSelect(
  props: IInstanceSelectProps,
  ref: React.Ref
) {
  const [internalVal, setInternalVal] = useControllableValue(props)
  const setInternalValPersist = usePersistFn(setInternalVal)
  const {
    enableTiFlash,
    defaultSelectAll,
    value, // only to exclude from restProps
    onChange, // only to exclude from restProps
    ...restProps
  } = props

  const { t } = useTranslation()

  const {
    data: dataTiDB,
    isLoading: loadingTiDB,
  } = useClientRequest((reqConfig) =>
    client.getInstance().getTiDBTopology(reqConfig)
  )

}
      try {
        const res = await client.getInstance().startProfiling(req)
        navigate(`/instance_profiling/${res.data.id}`)
      } catch (e) {
        // FIXME
        Modal.error({
          content: e.message,
        })
      }
      setSubmitting(false)
    },
    [navigate]
  )

  const handleRowClick = usePersistFn(
    (rec, _idx, ev: React.MouseEvent) => {
      openLink(`/instance_profiling/${rec.id}`, ev, navigate)
    }
  )

  const historyTableColumns = useMemo(
    () => [
      {
        name: t('instance_profiling.list.table.columns.targets'),
        key: 'targets',
        minWidth: 150,
        maxWidth: 250,
        onRender: (rec) => {
          // TODO: Extract to utility function
          const r: string[] = []
          if (rec.target_stats.num_tidb_nodes) {

}
    sel.setChangeEvents(true)
    dataHasLoaded.current = true
    // [defaultSelectAll, internalVal] is not needed
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableItems])

  const getInstanceByKeys = usePersistFn((keys: string[]) => {
    const keyToItemMap = {}
    for (const item of tableItems) {
      keyToItemMap[item.key] = item
    }
    return keys.map((key) => keyToItemMap[key])
  })

  const getInstanceByKey = usePersistFn((key: string) => {
    return getInstanceByKeys([key])[0]
  })

  React.useImperativeHandle(ref, () => ({
    getInstanceByKey,
    getInstanceByKeys,
  }))

  const renderValue = useCallback(
    (selectedKeys) => {
      if (
        tableItems.length === 0 ||
        !selectedKeys ||
        selectedKeys.length === 0
      ) {
        return null

function useSignInSubmit(
  successRoute,
  fnLoginForm: (form) => UserAuthenticateForm,
  onFailure: () => void
) {
  const { t } = useTranslation()
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  const clearErrorMsg = useCallback(() => {
    setError(null)
  }, [])

  const handleSubmit = usePersistFn(async (form) => {
    try {
      clearErrorMsg()
      setLoading(true)
      const r = await client.getInstance().userLogin(fnLoginForm(form), {
        errorStrategy: ErrorStrategy.Custom,
      })
      auth.setAuthToken(r.data.token)
      message.success(t('signin.message.success'))
      singleSpa.navigateToUrl(successRoute)
    } catch (e) {
      if (!e.handled) {
        setError(t('signin.message.error', { msg: e.message }))
        onFailure()
      }
    } finally {
      setLoading(false)

cardNoMargin,
    cardNoMarginTop,
    extendLastColumn,
    visibleColumnKeys,
    visibleItemsCount,
    orderBy,
    desc = true,
    onChangeOrder,
    onRowClicked,
    columns,
    items,
    ...restProps
  } = props
  const renderClickableRow = useRenderClickableRow(onRowClicked)

  const onColumnClick = usePersistFn(
    (_ev: React.MouseEvent, column: IColumn) => {
      if (!onChangeOrder) {
        return
      }
      if (column.key === orderBy) {
        onChangeOrder(orderBy, !desc)
      } else {
        onChangeOrder(column.key, true)
      }
    }
  )

  const finalColumns = useMemo(() => {
    let newColumns: IColumn[] = columns || []
    if (visibleColumnKeys != null) {
      newColumns = newColumns.filter((c) => visibleColumnKeys[c.key])

return 
          } else {
            return (
              
            )
          }
        },
      },
    ],
    [t]
  )

  const handleRowClick = usePersistFn(
    async (rec, _idx, _ev: React.MouseEvent) => {
      const res = await client
        .getInstance()
        .getActionToken(rec.id, 'single_view')
      const token = res.data
      if (!token) {
        return
      }
      window.open(
        `${client.getBasePath()}/profiling/single/view?token=${token}`,
        '_blank'
      )
    }
  )

  const handleDownloadGroup = useCallback(async () => {

function StatusColumn({
  node,
  onHideTiDB,
}: {
  node: IInstanceTableItem
  onHideTiDB: (node) => void
}) {
  const { t } = useTranslation()

  const onConfirm = usePersistFn(() => {
    onHideTiDB && onHideTiDB(node)
  })

  return (
    <span>
      {node.instanceKind === 'tidb' &amp;&amp; node.status !== InstanceStatus.Up &amp;&amp; (
        &lt;&gt;
          
            </span>