[Suggestion]: Document that hooks can be called after a conditional `throw`
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ả
Summary
I don't believe it is documented anywhere that calling a hook after a conditional throw statement is not a violation of the rules of hooks. If this is a valid pattern, it should be documented. If it is not, the Eslint rule rules-of-hooks should warn for it.
Page
Rules of hooks
Details
I realised this is effectively the pattern when using Next.js app router notFound(), which throws an Error in the component render. I had assumed this not being flagged by the rules-of-hooks was a limitation of the Next.js eslint plugin, but actually, this is not flagged as an issue with a standard throw:
const Component = ({ someOtherCondition }) => {
const [foo, setFoo] = useState();
if (someOtherCondition) throw new Error();
const [bar, setBar] = useState();
return (<>...</>);
};
My assumption is this is a valid pattern as if someOtherCondition becomes true, the error will be thrown up the call stack to the nearest error boundary, and the render that was in-progress will be discarded. There is not a case to have this conditional throw call more hooks than the previous render, only less. The rules of hooks state:
It’s not supported to call Hooks (functions starting with use) in any other cases, for example:
🔴 Do not call Hooks inside conditions or loops.
🔴 Do not call Hooks after a conditional return statement.
In the example above, the second useState call comes after a conditional throw statement. Not quite either of the cases in documentation.
If this is a valid pattern, it should be mentioned in the docs, with potential warnings about it not being a recommended workaround to conditionally call hooks (as there is no way to resume execution of the other path of the conditional once an error is thrown from the component).
If this isn't a valid pattern, it should be flagged by the eslint rule.
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- 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.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với trang Rules of Hooks và hành vi rules-of-hooks được ghi chép trong issue. Tái hiện ví dụ throw có điều kiện, sau đó xác định xem trang có cần làm rõ hay quy tắc ESLint có nên thay đổi hay không; hoàn tất nghĩa là hành vi và hướng dẫn dự kiến dành cho hành vi đó đã được giải quyết và phản ánh ở nơi phù hợp.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- eslint, javascript, next.js, 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
- 35/100