How to use the ahooks.usePersistFn function in ahooks

function InlineEditor({
  value,
  displayValue,
  title,
  onSave,
}: IInlineEditorProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [inputVal, setInputVal] = useState(displayValue)
  const [isPosting, setIsPosting] = useState(false)

  const handleCancel = useCallback(() => {
    setIsVisible(false)
    setInputVal(displayValue)
  }, [displayValue])

  const handleSave = usePersistFn(async () => {
    if (!onSave) {
      setIsVisible(false)
      return
    }
    try {
      setIsPosting(true)
      // PD only accept modified config in the same value type,
      // i.e. true => false, but not true => "false"
      const r = await onSave(valueWithSameType(inputVal, value))
      if (r !== false) {
        // When onSave returns non-false, input value is not reverted and only popup is hidden
        setIsVisible(false)
      } else {
        // When onSave returns false, popup is not hidden and value is reverted
        setInputVal(displayValue)
      }

function MultiSelect(props: IMultiSelectProps) {
  const [internalVal, setInternalVal] = useControllableValue(props)
  const setInternalValPersist = usePersistFn(setInternalVal)
  const {
    items,
    filterFn,
    selectedValueTransKey,
    columnTitle,
    placeholder,
    value, // only to exclude from restProps
    onChange, // only to exclude from restProps
    ...restProps
  } = props

  const { t } = useTranslation()

  const columns: IColumn[] = useMemo(
    () => [
      {

function Value({ item, onSaved }: IValueProps) {
  const handleSave = usePersistFn(async (newValue) => {
    try {
      const resp = await client.getInstance().configurationEdit({
        id: item.id,
        kind: item.kind,
        new_value: newValue,
      })
      if ((resp?.data?.warnings?.length ?? 0) > 0) {
        Modal.warning({
          title: 'Edit configuration is partially done',
          content: (
            <pre>{resp.data.warnings?.map((w) =&gt; w.message).join('\n\n')}</pre>
          ),
        })
      }
    } catch (e) {
      return false

function BaseAntCheckboxGroupHeader(props: IGroupHeaderProps) {
  const _classNames = getClassNames(props.styles, {
    theme: props.theme!,
    className: props.className,
    selected: props.selected,
    isCollapsed: props.group?.isCollapsed,
    compact: props.compact,
  })

  const _onHeaderClick = usePersistFn(() => {
    if (props.onToggleSelectGroup) {
      props.onToggleSelectGroup(props.group!)
    }
  })

  const _onToggleSelectGroupClick = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleSelectGroup) {
        props.onToggleSelectGroup(props.group!)
      }
      ev.preventDefault()
      ev.stopPropagation()
    }
  )

  const _onToggleCollapse = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleCollapse) {
        props.onToggleCollapse(props.group!)
      }
      ev.stopPropagation()
      ev.preventDefault()

function BaseAntCheckboxGroupHeader(props: IGroupHeaderProps) {
  const _classNames = getClassNames(props.styles, {
    theme: props.theme!,
    className: props.className,
    selected: props.selected,
    isCollapsed: props.group?.isCollapsed,
    compact: props.compact,
  })

  const _onHeaderClick = usePersistFn(() => {
    if (props.onToggleSelectGroup) {
      props.onToggleSelectGroup(props.group!)
    }
  })

  const _onToggleSelectGroupClick = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleSelectGroup) {
        props.onToggleSelectGroup(props.group!)
      }
      ev.preventDefault()
      ev.stopPropagation()
    }
  )

  const _onToggleCollapse = usePersistFn(

export default function ReportHistory() {
  const navigate = useNavigate()
  const { t } = useTranslation()
  const { data, isLoading, error } = useClientRequest((reqConfig) =>
    client.getInstance().diagnoseReportsGet(reqConfig)
  )
  const columns = useMemo(() => tableColumns(t), [t])

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

  return (
    
  )
}

if (props.onToggleSelectGroup) {
      props.onToggleSelectGroup(props.group!)
    }
  })

  const _onToggleSelectGroupClick = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleSelectGroup) {
        props.onToggleSelectGroup(props.group!)
      }
      ev.preventDefault()
      ev.stopPropagation()
    }
  )

  const _onToggleCollapse = usePersistFn(
    (ev: React.MouseEvent) => {
      if (props.onToggleCollapse) {
        props.onToggleCollapse(props.group!)
      }
      ev.stopPropagation()
      ev.preventDefault()
    }
  )

  return (
    <div style="{props.viewport">
      </div>

setInputVal(displayValue)
      setIsVisible(false)
    } finally {
      setIsPosting(false)
    }
  })

  const handleInputValueChange = useCallback((e) => {
    setInputVal(e.target.value)
  }, [])

  useEffect(() => {
    setInputVal(displayValue)
  }, [displayValue])

  const renderPopover = usePersistFn(() => {
    return (
      
        <div>
          <input disabled="{isPosting}" size="small" value="{inputVal}">
        </div>
        <div>
          
            </div>

function SlowQueriesTable({ controller, ...restProps }: Props) {
  const {
    loadingSlowQueries,
    tableColumns,
    slowQueries,
    orderOptions: { orderBy, desc },
    changeOrder,
    errors,
    visibleColumnKeys,
  } = controller

  const navigate = useNavigate()
  const handleRowClick = usePersistFn(
    (rec, _idx, ev: React.MouseEvent) => {
      const qs = DetailPage.buildQuery({
        digest: rec.digest,
        connectId: rec.connection_id,
        timestamp: rec.timestamp,
      })
      openLink(`/slow_query/detail?${qs}`, ev, navigate)
    }
  )

  const getKey = useCallback((row) => `${row.digest}_${row.timestamp}`, [])

  return (

export default function StatementsTable({ controller, ...restPrpos }: Props) {
  const {
    orderOptions,
    changeOrder,
    validTimeRange: { begin_time, end_time },
    loadingStatements,
    statements,
    errors,
    tableColumns,
    visibleColumnKeys,
  } = controller

  const navigate = useNavigate()
  const handleRowClick = usePersistFn(
    (rec, _idx, ev: React.MouseEvent) => {
      const qs = DetailPage.buildQuery({
        digest: rec.digest,
        schema: rec.schema_name,
        beginTime: begin_time,
        endTime: end_time,
      })
      openLink(`/statement/detail?${qs}`, ev, navigate)
    }
  )

  const getKey = useCallback((row) => `${row.digest}_${row.schema_name}`, [])

  return (