reactjs / reactjs/react.dev

[Hooks] - callbacks in useState hook examples

Đang mở
#1,480 3 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
JavaScript
Star
11.8k
Fork
7.9k
Merge trung bình
1 ngày 11 giờ
Pull request đã merge (30 ngày)
11

Mô tả

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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với ví dụ useState tại https://reactjs.org/docs/hooks-intro.html và xem xét các ví dụ dựa trên bộ đếm khác trong tài liệu. Issue này cần maintainer quyết định giữa việc thay đổi các ví dụ và giải thích hành vi hiện tại; issue được xem là hoàn tất khi hướng dẫn đã chọn được ghi lại một cách nhất quán.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
javascript, react
Lĩnh vực
documentation
Loại issue
Tài liệu
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
32/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.