[Hooks] - callbacks in useState hook examples
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 11.8k
- 派生
- 7.9k
- 平均合并
- 1 天 11 小时
- 30 天内合并 PR
- 11
描述
I would like to discuss about using callbacks to create new state which bases on current state in documentation for useState hook.
Current examples can be confusing for new developers which are not very familiar with js.
It would be easier for new developers to learn the rule like newer use value from this.state (for setState) or take current state value from scope (for hooks) to create new state. This simple rule leads to smaller amount of bugs.
So new developers can take this example from https://reactjs.org/docs/hooks-intro.html
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
and convert to something like this:
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>
Click me
</button>
</div>
);
}
with assumption that it will increment by 2 but it does not (it's based on observation with junior developers).
Shouldn't we change first example (and all 'counter' based examples in docs) to something like this?
import { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(currentValue => currentValue + 1)}>
Click me
</button>
</div>
);
}
and create new example to show 'standard' way to set state (example where new state is not based on current one).
Or maybe we should just say it's how JS (closures) works and left examples as is?
What's your opinion? I can create PR with changes but I'm not sure which path to choose. On the one hand it's how JS works but on the other hand I see it's confusing.
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 https://reactjs.org/docs/hooks-intro.html 中的 useState 示例开始,并检查文档中其他基于计数器的示例。这个 issue 需要由 maintainer 决定是修改示例,还是解释现有行为;当所选择的指导得到一致记录时,即视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react
- 领域
- documentation
- Issue 类型
- 文档
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 32/100