Can the strategy to store information from previous render be used in a custom hook?
未關閉
還沒有人認領這個 Issue。
- 主要語言
- JavaScript
- 星號
- 11.8k
- 分支
- 7.9k
- 平均合併
- 1 天 11 小時
- 30 天內合併 PR
- 11
描述
I was reading the strategy in the new beta docs, and was thinking whether it could be used in a custom hook? I tried doing it and it worked, but wanted to know whether it's advised or not.
To explain in code, my question is whether this is OK (same example from React docs but trend logic moved to another hook):
import { useState } from 'react';
const useCountTrend = (count) => {
const [prevCount, setPrevCount] = useState(count);
const [trend, setTrend] = useState(null);
if (prevCount !== count) {
setPrevCount(count);
setTrend(count > prevCount ? 'increasing' : 'decreasing');
}
return trend;
}
function CountLabel({ count }) {
const trend = useCountTrend(count);
return (
<>
<h1>{count}</h1>
{trend && <p>The count is {trend}</p>}
</>
);
}
function App() {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<button onClick={() => setCount(count - 1)}>
Decrement
</button>
<CountLabel count={count} />
</>
);
}
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
從連結的 React beta 文件中關於儲存先前 render 資訊的部分開始,並檢視此 issue 中的 custom-hook 範例。判斷這種模式是否建議用於 custom hooks,以及該指引應放在文件中的哪個位置。文件提供由範例支援的明確答案即視為完成。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react
- 領域
- documentation
- Issue 類型
- 文件
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 活躍度
- 停滯
- 描述清晰度
- 需要釐清
- 新手友好度
- 25/100