Skip to content

useLatest

useLatest 是一个自定义 Hook,它返回一个 ref 对象,.current 属性始终保存最新的值。
在回调或副作用中避免闭包“捕获旧值”的问题时非常有用。

用法示例

tsx
import React, { useState, useEffect } from 'react';
import { useLatest } from '@gracefront/hooks';

export default () => {
  const [count, setCount] = useState(0);
  const [count2, setCount2] = useState(0);

  const latestCountRef = useLatest(count);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(latestCountRef.current + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount2(count2 + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <p>count(useLatest): {count}</p>
      <p>count(default): {count2}</p>
    </>
  );
};