reactjs / reactjs/react.dev

Can the strategy to store information from previous render be used in a custom hook?

Đang mở
#5,393 1 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 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} />
    </>
  );
}

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 phần tài liệu beta của React được liên kết về việc lưu trữ thông tin từ các lần render trước đó và xem xét ví dụ custom-hook trong issue này. Xác định xem pattern này có được khuyến nghị cho custom hooks hay không và hướng dẫn đó nên được đặt ở đâu trong tài liệu. Được xem là hoàn tất khi tài liệu đưa ra câu trả lời rõ ràng được ví dụ hỗ trợ.

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ó
4/5
Thời gian dự kiến
3-5 ngày
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
25/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.