能不能把useTimeout升级一下？

[npmstudy]

用法示意

import { useTimeout } from 'ahooks/useTimeout';

export default  () => {
  const [counter, setCounter] = useState(0)
  const [start, clear, isActive] = useTimeout(() => setCounter(counter + 1), 0, false);

  return (
    <div className="App" onClick={() => start()}>
      <h1 style={{border:'1px dashed'}}>点击开启定时器 {counter}</h1>
    </div>
  );
};

如果需要，我把pr和测试提上来。

[liuyib]

其实目前已经满足你这个使用场景了：

文档里有提到：useTimeout 的时间设置为 undefined 时会停止定时器

import React, { useState } from 'react';
import { useInterval } from 'ahooks';

export default () => {
  const [count, setCount] = useState(0);
  const [delay, setDelay] = useState<number | undefined>(1000);

  const isActive = delay !== undefined;
  const start = () => setDelay(1000);
  const pause = () => setDelay(undefined);
  const clear = useInterval(() => {
    setCount(count + 1);
  }, delay);

  return (
    <div>
      <button onClick={start}>start</button>
      <button onClick={pause}>pause</button>
      <button onClick={clear}>clear</button>
      <div>isActive: {`${isActive}`}</div>
      <div>count: {count}</div>
    </div>
  );
};

不过比较麻烦一些。可以考虑升级一下

[liuyib]

旧 API：

const clear = useTimeout(fn, delay);

新 API：

const {
  start,
  pause,
  clear,
  isActive,
} = useTimeout(fn, delay, {
  defaultActive: false
})

• start: (delay?: number) => void
• pause: () => void
• clear: () => void
• isActive: boolean

会引入 breaking change。看看大家的意见~

另外，@npmstudy 要不分享下你的使用场景？

[raotaohub]

目前useTimeout(fn, delay); 返回的仅仅是一个 clear 函数，如果要为以后迭代更丰富的功能，确实应该返回成对象，方便扩展。
是不是应该放到4.x去做这件事@liuyib

[liuyib]

目前useTimeout(fn, delay); 返回的仅仅是一个 clear 函数，如果要为以后迭代更丰富的功能，确实应该返回成对象，方便扩展。
是不是应该放到4.x去做这件事@liuyib

是的，破坏性更改。需要 v4 做

[npmstudy]

好的，这周搞定

[npmstudy]

还有一些新增修改，比如start方法，需要把参数透传给具体fn。

[npmstudy]

补充写法

 function fn(x:number) {
    setCounter(counter + x)
  }
  const [start, clear, isActive] = useTimeout(fn, 0, false);

[cdx111]

完全没有必要做

[cdx111]

会让useTimeout更难理解

[ayangweb]

希望能把 useInterval 也顺带一起升级一下🌹